有时候你会遇到这样的情况,你会比 TypeScript 更了解某个值的详细信息。通常这会发生在你清楚地知道一个实体具有比它现有类型更确切的类型。
通过类型断言这种方式可以告诉编译器,“相信我,我知道自己在干什么”。类型断言好比其他语言里的类型转换,但是不进行特殊的数据检查和解构。它没有运行时的影响,只是在编译阶段起作用。
TypeScript 类型检测无法做到绝对智能,毕竟程序不能像人一样思考。有时会碰到我们比 TypeScript 更清楚实际类型的情况,比如下面的例子:

  1. const arrayNumber: number[] = [1, 2, 3, 4];
  2. const greaterThan2: number = arrayNumber.find(num => num > 2); // 提示 ts(2322)

其中,greaterThan2 一定是一个数字(确切地讲是 3),因为 arrayNumber 中明显有大于 2 的成员,但静态类型对运行时的逻辑无能为力。
在 TypeScript 看来,greaterThan2 的类型既可能是数字,也可能是 undefined,所以上面的示例中提示了一个 ts(2322) 错误,此时我们不能把类型 undefined 分配给类型 number。
不过,我们可以使用一种笃定的方式——类型断言(类似仅作用在类型层面的强制类型转换)告诉 TypeScript 按照我们的方式做类型检查。
比如,我们可以使用 as 语法做类型断言,如下代码所示:

  1. const arrayNumber: number[] = [1, 2, 3, 4];
  2. const greaterThan2: number = arrayNumber.find(num => num > 2) as number;

1.语法

  1. // 尖括号 语法
  2. let someValue: any = "this is a string";
  3. let strLength: number = (<string>someValue).length;
  4. // as 语法
  5. let someValue: any = "this is a string";
  6. let strLength: number = (someValue as string).length;

以上两种方式虽然没有任何区别,但是尖括号格式会与react中JSX产生语法冲突,因此我们更推荐使用 as 语法。

2.非空断言

在上下文中当类型检查器无法断定类型时,一个新的后缀表达式操作符 ! 可以用于断言操作对象是非 null 和非 undefined 类型。具体而言,x! 将从 x 值域中排除 null 和 undefined 。
具体看以下示例:

  1. let mayNullOrUndefinedOrString: null | undefined | string;
  2. mayNullOrUndefinedOrString!.toString(); // ok
  3. mayNullOrUndefinedOrString.toString(); // ts(2531)
  1. type NumGenerator = () => number;
  2. function myFunc(numGenerator: NumGenerator | undefined) {
  3. // Object is possibly 'undefined'.(2532)
  4. // Cannot invoke an object which is possibly 'undefined'.(2722)
  5. const num1 = numGenerator(); // Error
  6. const num2 = numGenerator!(); //OK
  7. }

3.确定赋值断言

允许在实例属性和变量声明后面放置一个 ! 号,从而告诉 TypeScript 该属性会被明确地赋值。为了更好地理解它的作用,我们来看个具体的例子:

  1. let x: number;
  2. initialize();
  3. // Variable 'x' is used before being assigned.(2454)
  4. console.log(2 * x); // Error
  5. function initialize() {
  6. x = 10;
  7. }


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

  1. let x!: number;
  2. initialize();
  3. console.log(2 * x); // Ok
  4. function initialize() {
  5. x = 10;
  6. }

通过 let x!: number; 确定赋值断言,TypeScript 编译器就会知道该属性会被明确地赋值。

4.双重断言

来看一个例子

  1. interface Person {
  2. name: string;
  3. age: number;
  4. }
  5. const person = 'ts' as Person; // Error

这个时候不能把类型 string 强制为一个接口 Person,但是并非没有办法,此时可以使用双重断言:

  1. interface Person {
  2. name: string;
  3. age: number;
  4. }
  5. const person = 'ts' as any as Person; // ok

这种操作就是先把类型 string 转为 any,再断言为Person 接口。
双重断言还是慎用,不过还是有用武之地的。

5.类型断言的使用

  1. // 这种形式是没有任何问题的,建议使用这种形式
  2. const getStrLength = (target: string | number): number => {
  3. if ((target as string).length) {
  4. return (target as string).length;
  5. } else {
  6. return target.toString().length;
  7. }
  8. };
  9. // 这种形式在JSX代码中不可以使用,而且也是TSLint不建议的写法
  10. const getStrLength = (target: string | number): number => {
  11. if ((<string>target).length) {
  12. return (<string>target).length;
  13. } else {
  14. return target.toString().length;
  15. }
  16. };