第九节:TypeScript 类型断言

1. 断言了解

TypeScript 允许你覆盖它的推断，毕竟作为开发者你比编译器更了解你写的代码。

类型断言主要用于当 TypeScript 推断出来类型并不满足你的需求，你需要手动指定一个类型。

类型断言有两种方式:

1. 使用"尖括号"语法
2. 使用as语法

2. as关键字

使用类型断言（as关键字）覆盖其类型推断：

let student = {}
// let student: {}

student.name = 'jack'
// 类型“{}”上不存在属性“name”。
student.age = 18
// 类型“{}”上不存在属性“age”。

TypeScript类型推断变量student是一个没有属性的对象, 所以添加对象时会报错

此时就可以定义一个具有name,age属性的接口,然后通过as关键字来进行类型断言

// 接口
interface Person{
  name:string;
  age: number
}

let student = {} as Person
// let student: Person

student.name = 'jack'
student.age = 18

此时student的 类型使用断言类型, 而不是推断的类型, 因此添加name,age属性就不会报错

3. 断言的<>语法

断言除了使用as关键字, 还在可以通过<>语法来实现

interface Person{
  name:string;
  age: number
}

let student = <Person>{}
// let student: Person

student.name = 'jack'
student.age = 18

as 关键字使用在需要断言数据类型之后, 而<>使用在断言数据之前

断言注意:

1. 因为 类型断言是在编译时被删除,所以没有与类型断言关联的运行时检查
2. 如果类型断言失败,则不会出现异常的生成(指的是TypeScript)

4. 非空断言运算符(后缀!)

TypeScript还具有一种特殊的语法, 用于在不进行任何显示检查的情况下从类型中删除null,undefined

在任何表达式之后写!,其实际上也是一种类型断言, 该值不是null,或undefined

例如:

let num:number | null | undefined
// let num: number | null | undefined 

let num2 = num.toFixed(2)
// 报错: Object is possibly 'null' or 'undefined'.

代码解释: 变量num在获取toFixed属性并调用时报错, 告知变量num有可能是null或undefined

而null和undefined类型的值是没有toFixed属性.

此时我们就可以使用非空断言,

let num2 = num!.toFixed(2)

在变量num后面添加非空断言符合!, 来断言num是非空值.

注意点:

和其他类型断言一样, 这种断言只会让TypeScript不报错, 但不会改变代码运行时的行为

简单说就是在编译后运行时如果num变量的值是null 或undefined ,JavaScript依然会报错

因此只有在你确定num值不为null,或undefined时在使用它

5. 双重断言

双重断言极少有应用场景，只需要知道有这种操作即可：

例如:

interface Person{
  name:string;
  age: number;
  hobby: string[]
}

// 断言不成功
let student:Person = 'jack' as Person
/*
  报错:
    类型 "string" 到类型 "Person" 的转换可能是错误的，
    因为两种类型不能充分重叠。如果这是有意的，请先将表达式转换为 
*/

示例中的断言不成功, TypeScript告诉我们string类型转换为Person有问题

此时就可以使用双重断言

interface Person{
  name:string;
  age: number;
  hobby: string[]
}

// 断言不成功
let student:Person = 'jack' as unknown as Person

代码最后一行,使用as关键字进行了两次断言, 先将string类型断言为unknown类型,在断言为Person类型, 就不会有报错了

6. 小结:

• 慎用类型断言，除非你真的有把握。
• 类型断言是一个编译时语法，不涉及运行时。