TypeScript类型推断和断言

本节课我们来开始了解 TypeScript 的类型推断和类型断言功能。

一．类型推断

1. 如果我们不使用类型注解的时候，那么 TS 将自行对变量的类型进行推断；

// 类型推断
// 第一次赋值了 number，那么 other 就固定为 number 类型
let other = 100
//other = 'Mr.Lee'
// 报错
console.log(typeof other)

2. 如果声明变量的时候，并没有进行有效赋值，那么这个变量将是 any 类型；

// 初始化时没有赋值，那么类型将是 any(任意)类型
let yourName
yourName = 'Miss.Wang'
yourName = 520

3. 对于函数的参数和返回值， TS 也可以进行类型的推断，只不过参数需要关闭严格；

// num1 和 num2 在严格模式下，会提醒你设置类型注解
// 可以修改 tsconfig.json，"strict": false,
function info(num1, num2) {
//由于是 any，可以赋值字符串
num1 = 'Mr.Lee'
return num1 + num2
}
console.log(info(1, 20))
// 严格模式："strict": true,
function info(num1 : number, str1 : string) {
return num1 + str1
}
// 会自行推断成 string 类型的返回值
console.log(typeof info(1, 'Mr.Lee'))

二．类型断言

1. 在联合类型传参的时候，我们可能需要根据判断类型来做响应的处理；

// 获取参数的长度
function myInfo(info : number | string) : number {
// 这里会报错，因为访问联合类型的属性，它会检查所有类型都是否具备这个属性
if (info.length) {
....
}
}
PS：由于 number 类型不存在.length 属性，所以会导致报错(不管你是否传递了数值)；
PS：当然，也可以尝试使用 typeof 判断类型，只不过在后面更多的类型判断将出现问题；
// 数值要先.toString()再取长度
let myNum : number = 100
console.log(myNum.toString().length)

2. 类型断言有两种方案，具体如下：

(1) . <类型> 值；
// 后续另一种类型也有这种符号，易混淆
(2) . 值 as 类型；
// 推荐这种，jsx 只支持这种
// 类型断言
function myInfo(info : number | string) : number {
// 将 info 断言成 string 类型，欺骗编译器不报错
if ((info as string).length) {
return (info as string).length
} else {
return info.toString().length
}
}
console.log(myInfo('Mr.Lee'))