Ts-入门

• string
• number
• boolean
• null
• undefined

1.1 默认分配

let str = 'str'

会被默认定义为string类型

1.2 类型注解

let num: number=10

其中: number是类型注解

1.3 类型断言

let numArr =[1,2,3];
const result =numArr.find(item=> item >2)
result *5

上述代码会报错

因为result的类型是undefined

当我们确定数组中有大于2的值时，我们可以使用断言

(最好别在明知有可能不是number的情况下使用)

let numArr =[1,2,3];
const result =numArr.find(item=> item >2) as number
result *5

也就是在result的表达式后面加上 as number 表示一个断言

1.4 联合类型

如果我认为一个变量是string或null类型则可以这样写

let v4: string | null =null

需要注意的是，如果关闭配置中的strictNullChecks则可以不需要先联合null类型，随意分配null

也可以直接联合常量，例如我希望一个数只等于 1，2，3其中之一，可以这样写

let v5: 1 | 2 | 3 = 2

2、数组、元组、枚举

2.1 数组

定义一个number类型的数组

let arr: number[] = [1,2,3]

let arr1: Array<number> = [1,2,3]

如果你想往这样一个数组里添加一个字符串，会出现编译错误

2.2 元组

具体定义数组里每一个元素的类型

let t1: [number,string,number] = [1,'a',2]

可以设置可选元素，可选元素只能放在尾部，在定义类型后加上?,设置后指定位置的元素不一定要设置值

let t1: [number,string,number?] = [1,'a']

2.3 枚举

enum MyEnum {
    A,
    B,
    C
}
console.log(MyEnum.A)
console.log(MyEnum[0])

3、函数

function myFn(a: number,b?:number): void{
    console.log(a);
    console.log(b);
}

上述代码是一个两个number类型形参，其中第二个参数是可选参数，可选参数要放在最右侧

function myFn(a: number,b?:number , ...rest: number[]): void{
    console.log(a);
    console.log(b);
    console.log(rest);
}

上述是第三个参数是剩余参数，剩余参数语法允许我们将一个不定数量的参数表示为一个数组。

4、接口

对象的模板

interface Obj {
    name: string,
    age: number
}
const obj: Obj ={
    name: 'a',
    age: 10
}

优势是可以做字段检查(例如字段写成了ago)和类型检查

5、类型

假设一个变量的类型是string | null 那么你可以封装这个类型

let UserName = string | null
let v1: UserName = null;

6、泛型

function myFn(a: number,b: number): number[]{
    return [a,b];
}

这是一个简单的函数，如果我想传入boolean类型或string类型则可以使用泛型

function myFn<T>(a: T,b: T): T[]{
    return [a,b];
}
myFn<number>(1,2)
myFn('a','b') // 因为ts支持类型推断，所以不一定需要指定类型

该例为泛型使用实例