TypeScript 断言总结

10,213 阅读2分钟

1. 类型断言

在使用 TypeScript 的过程中,你可能会遇到这种情况:你比 TypeScript 更加清楚某个值的类型。 比如你从异步请求中拿到一个类型为any的值,但你清楚的知道这个值就是string类型,这个时候你可以通过类型断言方式告诉编译器:"嘿!相信我,我知道我在干什么!"。类型断言有点类似于其他语言的类型转换,但它没有运行时的影响,只是在编译阶段起作用。 类型断言有两种形式:

1.1 尖括号语法

  • 形式:<类型>变量名
let value: any = "this is a string";
let length: number = (<string>value).length;

1.2 as 语法

  • 形式:变量名 as 类型
let value: any = "this is a string";
let length: number = (value as string).length;

2. 非空断言

当你明确知道某个值不可能为 undefinednull 时,你可以用 在变量后面加上一个 !(非空断言符号)来告诉编译器:"嘿!相信我,我确信这个值不为空!"。 非空断言具体的使用场景如下:

function fun(value: string | undefined | null) {
  const str: string = value; // error value 可能为 undefined 和 null
  const str: string = value!; //ok
  const length: number = value.length; // error value 可能为 undefined 和 null
  const length: number = value!.length; //ok
}

3. 确定赋值断言

TypeScript 的确定赋值断言,允许在实例属性和变量声明后面放置一个 ! 号,从而告诉 TypeScript 该属性会被明确地赋值。

let name!: string;

上述表达式就是对编译器说:"有一个名为 name 的属性,其类型为 string | undefined。它以值 undefined 开始。但每次获取或设置该属性时,我都希望将其视为类型 string。"

为了更好地理解它的作用,我们来看个具体的例子:

let count: number;
initialize();

// Variable 'count' is used before being assigned.(2454)
console.log(2 * count); // Error

function initialize() {
  count = 10;
}

很明显该异常信息是说变量 count 在赋值前被使用了,要解决该问题,我们可以使用确定赋值断言:

let count!: number;
initialize();
console.log(2 * count); // Ok

function initialize() {
  count = 10;
}

4.参考文章