Ts_06 类型系统深入

类型保护

我们通常在 JavaScript 中通过判断来处理一些逻辑，在 TypeScript 中这种条件语句块还有另外一 个特性:根据判断逻辑的结果，缩小类型范围(有点类似断言)，这种特性称为 类型保护 ，触发条 件:

  • 逻辑条件语句块:if、else、elseif
  • 特定的一些关键字:typeof、instanceof、in……

typeof

我们知道 typeof 可以返回某个数据的类型，在 TypeScript 在 if 、 else 代码块中能够把 typeof 识别为类型保护，推断出适合的类型

  1.  function fn(a: string|number) { // error，不能保证 a 就是字符串 a.substring(1);
  2. if (typeof a === 'string') {
  3. // ok
  4.     a.substring(1);
  5.   } else {
  6. // ok
  7.     a.toFixed(1);
  8.   }

instanceof

与 typeof 类似的， instanceof 也可以被 TypeScript 识别为类型保护

  1. function fn(a: Date|Array<any>) {
  2.   if (a instanceof Array) {
  3.     a.push(1);
  4.   } else {
  5.     a.getFullYear();
  6.   }
  7.   }

in

in 也是如此

  1. interface IA {
  2.     x: string;
  3.     y: string;
  4. }
  5. interface IB {
  6. a: string;
  7. b: string; }
  8. function fn(arg: IA | IB) {
  9.     if ('x' in arg) {
  10. // ok
  11.         arg.x;
  12.         // error
  13.         arg.a;
  14. } else { // ok
  15.         arg.a;
  16.         // error
  18. }

字面量类型保护

如果类型为字面量类型，那么还可以通过该字面量类型的字面值进行推断

  2. interface IA {
  3.     type: 'IA';
  4. x: string;
  5. y: string; }
  6. interface IB {
  7.     type: 'IB';
  8. a: string;
  9. b: string; }
  10. function fn(arg: IA | IB) {
  11.     if (arg.type === 'IA') {
  12. // ok
  13.         arg.x;
  14.         // error
  15.         arg.a;
  16. } else { // ok
  17.         arg.a;
  18.         // error
  19.         arg.x;
  20.       }
  21. }

自定义保护类型

有的时候，以上的一些方式并不能满足一些特殊情况，则可以自定义类型保护规则

  2. function canEach(data: any): data is Element[]|NodeList {
  3.     return data.forEach !== undefined;
  4. }
  5. function fn2(elements: Element[]|NodeList|Element) {
  6.     if ( canEach(elements) ) {
  7.         elements.forEach((el: Element)=>{
  8.             el.classList.add('box');
  9.         });
  10.     } else {
  11.         elements.classList.add('box');
  12. }
  13. }

data is Element[]|NodeList 是一种类型谓词，格式为: xx is XX ，返回这种类型的函数就可以 被 TypeScript 识别为类型保护

类型操作

TypeScript 提供了一些方式来操作类型这种数据，但是需要注意的是，类型数据只能作为类型来使 用，而不能作为程序中的数据，这是两种不同的数据，一个用在编译检测阶段，一个用于程序执行阶段

typeof

在 TypeScript 中， typeof 有两种作用

  • 获取数据的类型
  • 捕获数据的类型
  2. let str1 = 'kaikeba';
  3. // 如果是 let ，把 'string' 作为值
  4. let t = typeof str1;
  5. // 如果是 type，把 'string' 作为类型
  6. type myType = typeof str1;
  7. let str2: myType = '开课吧';
  8. let str3: typeof str1 = '开课吧';

keyof

获取类型的所有 key 的集合

  2. interface Person {
  3.     name: string;
  4.     age: number;
  5. };
  6. type personKeys = keyof Person;
  7. // 等同:type personKeys = "name" | "age"
  8. let p1 = {
  9.     name: 'zMouse',
  10. age: 35 }
  11. function getPersonVal(k: personKeys) {
  12.     return p1[k];
  13. }
  14. /**
  15. 等同:
  16. function getPersonVal(k: 'name'|'age') {
  17.     return p1[k];
  18. }
  19. */
  20. getPersonVal('name'); //正确 
  21. getPersonVal('gender'); //错误

in

针对类型进行操作的话，内部使用的 for…in 对类型进行遍历

  2. interface Person {
  3.     name: string;
  4.     age: number;
  5. }
  6. type personKeys = keyof Person;
  7. type newPerson = {
  8. [k in personKeys]: number;
  9. /**
  10. 等同 [k in 'name'|'age']: number; 也可以写成
  11. [k in keyof Person]: number;
  12. */
  13. }
  14. /**
  15. type newPerson = {
  16.     name: number;
  17.     age: number;
  18. }
  19. */

注意: in 后面的类型值必须是 string 或者 number 或者 symbol

类型兼容

TypeScript 的类型系统是基于结构子类型的，它与名义类型(如:java)不同(名义类型的数据类型 兼容性或等价性是通过明确的声明或类型的名称来决定的)。这种基于结构子类型的类型系统是基于组 成结构的，只要具有相同类型的成员，则两种类型即为兼容的。

  2. class Person {
  3.     name: string;
  4.     age: number;
  5. }
  6. class Cat {
  7.     name: string;
  8.     age: number;
  9. }
  10. function fn(p: Person) {
  11.     p.name;
  12. }
  13. let xiaohua = new Cat();
  14. // ok，因为 Cat 类型的结构与 Person 类型的结构相似，所以它们是兼容的 
  15.  fn(xiaohua);