typeof

在 TypeScript 中，typeof 操作符可以用来获取一个变量或对象的类型。

  • 获取变量的类型：

    1. function doSome(x: number | string) {
    2. if (typeof x === 'string') {
    3.   // 在这个块中，TypeScript 知道 `x` 的类型必须是 `string`
    4.   console.log(x.subtr(1)); // Error: 'subtr' 方法并没有存在于 `string` 上
    5.   console.log(x.substr(1)); // ok
    6. }
    8. x.substr(1); // Error: 无法保证 `x` 是 `string` 类型
    9. }

  • 获取对象的类型： ```typescript interface People { name: string; age: number; }

const me: People = { name: “zzk”, age: 23 }; type Me = typeof me; // type Me = People

  2. - 此外，typeof 也可以用来获取函数对象的类型，比如：
  3. ```typescript
  4. function toArray(x: number): Array<number> {
  5.   return [x];
  6. }
  8. type Func = typeof toArray; // -> (x: number) => number[]

instanceof

这有一个关于 class 和 instanceof 的例子：

  1. class Foo {
  2.   foo = 123;
  3.   common = '123';
  4. }
  6. class Bar {
  7.   bar = 123;
  8.   common = '123';
  9. }
  11. function doStuff(arg: Foo | Bar) {
  12.   if (arg instanceof Foo) {
  13.     console.log(arg.foo); // ok
  14.     console.log(arg.bar); // Error
  15.   }
  16.   if (arg instanceof Bar) {
  17.     console.log(arg.foo); // Error
  18.     console.log(arg.bar); // ok
  19.   }
  20. }
  22. doStuff(new Foo());
  23. doStuff(new Bar());

TypeScript 甚至能够理解 else。当你使用 if 来缩小类型时，TypeScript 知道在其他块中的类型并不是 if 中的类型：

  1. class Foo {
  2.   foo = 123;
  3. }
  5. class Bar {
  6.   bar = 123;
  7. }
  9. function doStuff(arg: Foo | Bar) {
  10.   if (arg instanceof Foo) {
  11.     console.log(arg.foo); // ok
  12.     console.log(arg.bar); // Error
  13.   } else {
  14.     // 这个块中，一定是 'Bar'
  15.     console.log(arg.foo); // Error
  16.     console.log(arg.bar); // ok
  17.   }
  18. }
  20. doStuff(new Foo());
  21. doStuff(new Bar());

in

in 操作符可以安全的检查一个对象上是否存在一个属性，它通常也被作为类型保护使用：

  1. interface A {
  2.   x: number;
  3. }
  5. interface B {
  6.   y: string;
  7. }
  9. function doStuff(q: A | B) {
  10.   if ('x' in q) {
  11.     // q: A
  12.   } else {
  13.     // q: B
  14.   }
  15. }

字面量类型保护

当你在联合类型里使用字面量类型时，你可以检查它们是否有区别：

  1. type Foo = {
  2.   kind: 'foo'; // 字面量类型
  3.   foo: number;
  4. };
  6. type Bar = {
  7.   kind: 'bar'; // 字面量类型
  8.   bar: number;
  9. };
  11. function doStuff(arg: Foo | Bar) {
  12.   if (arg.kind === 'foo') {
  13.     console.log(arg.foo); // ok
  14.     console.log(arg.bar); // Error
  15.   } else {
  16.     // 一定是 Bar
  17.     console.log(arg.foo); // Error
  18.     console.log(arg.bar); // ok
  19.   }
  20. }

使用定义的类型保护

JavaScript 并没有内置非常丰富的、运行时的自我检查机制。当你在使用普通的 JavaScript 对象时（使用结构类型，更有益处），你甚至无法访问 instanceof 和 typeof。在这种情景下，你可以创建用户自定义的类型保护函数，这仅仅是一个返回值为类似于someArgumentName is SomeType 的函数，如下：

  1. // 仅仅是一个 interface
  2. interface Foo {
  3.   foo: number;
  4.   common: string;
  5. }
  7. interface Bar {
  8.   bar: number;
  9.   common: string;
  10. }
  12. // 用户自己定义的类型保护！
  13. function isFoo(arg: Foo | Bar): arg is Foo {
  14.   return (arg as Foo).foo !== undefined;
  15. }
  17. // 用户自己定义的类型保护使用用例：
  18. function doStuff(arg: Foo | Bar) {
  19.   if (isFoo(arg)) {
  20.     console.log(arg.foo); // ok
  21.     console.log(arg.bar); // Error
  22.   } else {
  23.     console.log(arg.foo); // Error
  24.     console.log(arg.bar); // ok
  25.   }
  26. }
  28. doStuff({ foo: 123, common: '123' });
  29. doStuff({ bar: 123, common: '123' });