typescript 知识笔记-API框架-舒克老师的前端

typescript 知识笔记 TYPESCRIPT

shuke 2022-1-30 387

TS数据类型

数据类型作用？在你们定义代码的时候，写了数据类型，编译代码运行的时候内存分配空间。决定了当前值在内存里面用多大的空间来存放

变量必须要有三要素：

变量的名字
变量的类型
变量的初始值

数字类型

let age:number

定义数据类型为number就可以。

布尔类型

let boo:boolean = true
boo = false //值必须是true false
boo = ”小王“ //编译报错

字符串类型

let username:string = "tom"
username=123 //编译报错

数组类型

// 数组类型
let array:number[] = [1,2,3]
let array2:string[] = ["1","2","xiaowang"]
// 在数组里面存放对象类型,简单的语法
let array3:Object[] = [{id:1}]
// 泛型设计
let array4:Array<string> = ["xiaowang","xiaozhang"]
// any类型在某些特定场景可以使用,一般不推荐使用
let array5:any = [1,"xiaowang",{id:1}]

在TS中数组要求必须存放统一数据类型的值，定义数组的时候需要申明数组里面存放数据类型，定义常见的三种语法就是上面案列中

元组类型

元组类型是一种特殊数组，允许你在数组中存放不同数据类型

let student:[string,number] = ["xiaowang",20]

规定数组每一个值是什么类型，规定数组里面内容长度

any类型

你可以给任何变量都设置any类型，一把不会用any，如果要用any一般用来表示不准确的数据类型

const element:any = document.getElementById("app")

// any类型
let username2:any
username2 = "xiaowang"
username2 = 10

undefind和null

当一个变量定义后没有赋值就是undefined

let scope:number | undefined;
console.log(scope);

你可以直接给一个变量设置类型为undefined，这种就没有太多意义。

你可以用|符号来表示某个变量可以支持多个类型

never类型

never类型表示哪些用不存在的值

// never类型
let others:never
others = (()=>{
    throw new Error("代码错误");
})()

当你无法用一个数据类型来表示一个函数的结果，那就never来表示

枚举类型

代码开发过程中会出现很多的状态。比如订单：0-支付失败 1-支付成功 2-支付超时 3-订单失效

一年12个月：0-1月份 1-2月份

let order = {
    id:"cdbchhd",
    name:"小米耳机订单",
    status:0  //魔法数字、魔鬼数字
}

let order = {
    id:"cdbchhd",
    name:"小米耳机订单",
    status:1
}

let user = {
    gender:0
}
let user2 = {
    gender:1
}

用枚举的方式将订单状态定义出来

// 枚举类型
//  当你们状态是固定可以使用枚举
enum state {error=0,success=1,timeout=2}
enum gender {man=0,fman=1,notfind=2}
let order={
    id:"dddd",
    status:0
}

if(order.status == state.error){

}else if(order.status == state.success){

}else if(order.status == state.timeout){

}

枚举其实就是将你们代码中各种状态提取出来，要求状态必须是固定，不变化。比如一年12个月、一年4季，比如性别

Object类型

// 对象类型
let obj1:object = {}
// console.log(obj1.id);
let obj2:object = []
let obj3:object = function(){}

let obj4:{id:number,name:string} = {id:1,name:"xiaowang"}
console.log(obj4.id);

在定义过程中对象类型你可以指定每一个属性的类型

最新回复 (2)

全部楼主

shuke 2022-1-30

2 楼

TS函数

在TS中函数的内容还是Javascript基础，在TS中函数需要对参数和返回值进行约束。

  function show(msg){
      if(typeof msg == "object"){
         if(msg instanceof Array){

            }
         }
      else if(typeof == "number"){

      }
      try{
          msg.map()
      }catch{

      }
  }

ts中的函数参数

// 函数

function check(data:number,username:string){
    // 判断数据类型
}

check(1,"xiaowang")

function check2(student:{id:number}){
    console.log(student.id);

}
check2({id:1})

function check3(arr:number[]){

}
check3([1,2,3])

function check4(arr:Array<string>){

}
check4(["xiaowang"])

function check5(num1:number,...args:number[]){
    console.log(num1); //1
    console.log(args); //[2,3,4,5]
}
check5(1,2,3,4,5)

函数中的返回值

function show(num1:number,num2:number):{id:number}{
    // return num1+num2
    console.log(num1+num2);
    // return 10
    return {
        id:1
    }

}

const obj:{id:number} = show(10,20)
console.log(obj.id);

函数如果没有返回值，我们需要添加一个void。如果有返回结果，返回值类型必须是申明的类型

const checkObj = (num1:number,num2:number):void=>{

}

练习：定义一个函数，接受一个数组，返回数组中最大值

shuke 2022-2-1

3 楼
泛型
使用ts来定义数据，数据类型一旦要求了，那就无法修改
```
function change(arg1:number,arg2:number):number{    return arg1+arg2}change(1,3)change("xiaowang","xiaowang")
```
计算数字之和，如果我要计算两个字符串之和。
虽然定义参数的时候一定要写数据类型，但是我想要动态改变数据类型
一、函数泛型
我们要定义一个函数，函数需要返回不同类型的数据
```
/** * 定义一个函数，需要返回不同类型的值 * 要返回不同类型的值，只能创建多个函数 */
function show(value:number):string{    
return "xiaowang"
}
```
使用泛型来进行开发
```
function check<T>(value:T):T{    
return value;
}
check<string>("123");
```
案列：编写一个函数，接受一个数组，返回数组中最大值
```
function compare(arr: number[]): number {    
let max = arr[0]    
arr.forEach(item => max = item > max ? item : max)    
return max;
}
```
我们编写了一个函数，接受一个数组，返回数组中的最大值，但是如果我要比较字符串，传递进来的数组存放的是字符串，那就无法中重用这个代码
```
function compare2<T>(arr:T[]):T{    
let max = arr[0]    
arr.forEach(item => max = item > max ? item : max)    
return max;
```
一般在开发中使用T来代表默认的数据类型。
二、类的泛型
1. /**
2. * 类的泛型
3. */
4. class compValue<T>{
5. // 初始化一个数组
6. public list:T[] = [];
7. add(num:T):void{
8. this.list.push(num)
9. }
10. min():T{
11. let comp = this.list[0];
12. for(let i=0;i<this.list.length;i++){
13. if(comp>this.list[i]){
14. comp = this.list[i]
15. }
16. }
17. return comp;
18. }
19. }
21. const comp = new compValue<number>();
22. comp.add(20)
23. comp.add(22)
24. comp.add(24)
25. comp.add(19)
26. console.log(comp.min());
28. const comp2 = new compValue<string>();
29. comp2.add("a")
30. comp2.add("b")
31. comp2.add("c")
32. comp2.add("d")
33. console.log(comp2.min());
给类定义了泛型，可以根据不同的类型来执行不同的结果。

发新帖

shuke

主题数
263

帖子数
79

注册排名
1