开启掘金成长之旅!这是我参与「掘金日新计划 · 12 月更文挑战」的第28天
TS中的类型
类型
| 类型 | 说明 |
|---|---|
| number | 数字类型,number[]表示其内全为数字型的数组 |
| string | 字符串类型,string[]表示其内全为字符串型的数组 |
| boolean | 布尔值,boolean[]表示其内全为布尔型的数组 |
| any | 任意类型,声明变量时不设置类型便会默认设为any,且any设置的变量可以任意赋值给其他类型的变量但不报错,所以不推荐使用 |
| unknown | 类型安全的any,这里的类型安全就指的是unknown类型变量的值不能任意赋值给其他变量,是any的安全替代 |
| void | 空值(undefined) |
| never | 不能是任何值 |
| object | 对象类型 |
| array<类型> | 数组类型,通过<类型>来指定数组内元素的类型 |
| tuple | 元组,固定长度数组[string, string]->[1, 2] |
| enum | 枚举->enum enumobj{A = 0, B = 0},可以通过enumobj.A来获取值 |
| 字面量 | 定义的字面量其本身就是类型,例如a: 10,a之后便只能等于10 |
类型声明
类型声明是TS有别于JS的一个非常重要的特点,我们可以通过类型声明来指定变量的类型,当我们为变量指定类型后再赋值时,编译器便会自动检查值是否符合类型声明,若不符合则会报错。
语法:
//以前js中的做法:
let 变量;
//现在ts中的做法:
let 变量: 类型;
let 变量: 类型 = 值;
let 变量: 类型|类型|类型;//联合类型,多者任选一
let 变量 = 值;//如果变量的声明和赋值是同时进行的,TS可以自动对变量进行类型检测
function fn(参数: 类型, 参数: 类型):返回值类型{}
例:
let a: number = 3;
a = "hello";//赋值为字符串就会报错Type 'string' is not assignable to type 'number'.
类型断言
当我们为一个变量定义类型为unknown,将其赋值为指定类型的字面量,在使用这个变量再对对应类型限制的变量赋值时,就会出现问题,例如:
let a: unknown;
let s: string;
a = '123';
s = a;//这里就会报错,因为s和a的类型不同,即使a的字面量为字符串,但我们为其添加的约束还是unknown
这时候就需要我们人为地告诉编译器它的数据类型,有两种方式:
s = a as string;
s = <string>a;
限制对象中的属性
通过let a: object可以限制a为对象类型,但是如果想要限制其中属性的类型,就要用如下方法进行限制:
let a: {name: string};//表示a内必须有name属性,且为字符串类型
let a: {name?: string};//添加问号表示为可选属性
let a: {name: string}&{age: number};//表示a内必须有name和age两个属性,并且要满足其类型要求
但按如上方式定义后可以发现问题,那就是定义的对象内属性只能有name,不能再添加其他没有预设好的属性,我们这样解决:
let a: {name: string, [propName: string]: any};//用户随后便可以自由添加没有预设的属性了
提前预设函数
既然可以提前设置约束好对象,那么方法当然也可以:
let a: (b: number, c: number)=>number;//a函数内有两个数字类型的参数,返回值也为数字类型
类型别名
当你的类型特别长时,就可以为其定义一个别名,如下:
type myType = 1|2|3|4|5|6|7|8|9|0;
let a: myType;