联合类型&类型保护

联合类型可以扩展变量的类型范围，但带来的代价是，类型检验会更麻烦。
比如：…
此时，需要类型保护机制来消除错误警告。

  1. interface Bird {
  2.   fly: boolean
  3.   sing: () => {}
  4. }
  6. interface Dog {
  7.   fly: boolean
  8.   bark: () => {}
  9. }
  11. function trainAnimal(animal: Bird | Dog) {
  12.   // animal.sing() // 直接使用会报错！
  14.   // 【类型保护】方案一：【类型断言】
  15.   if (animal.fly) {
  16.     (animal as Bird).sing()
  17.   } else {
  18.     (animal as Dog).bark()
  19.   }
  21.   // 【类型保护】方案二：【in语法】
  22.   if ('sing' in animal) {
  23.     animal.sing()
  24.   } else {
  25.     animal.bark()
  26.   }
  27. }
  29. // 【类型保护】方案三：【typeof语法】
  30. function add(first: string | number, second: string | number) {
  31.   if (typeof first === 'string' || typeof second === 'string') {
  32.     return `${first} ${second}`
  33.   } else {
  34.     return first + second
  35.   }
  36. }
  38. // 【类型保护】方案四：【instance语法】
  39. class NumberObj {
  40.   // 注意，使用instance时，数据类型一定要通过类定义，而不能用接口。因为只有class才能使用instanceof操作符
  41.   count: number
  42. }
  44. function addObj(first: object | NumberObj, second: object | NumberObj) {
  45.   if (first instanceof NumberObj && second instanceof NumberObj) {
  46.     return first.count + second.count
  47.   }
  48.   return 0
  49. }

枚举类型

  1. enum Status {
  2.   OFFLINE = 1,
  3.   ONLINE,
  4.   DELETED
  5. }
  7. console.log(Status.OFFLINE); // 1
  9. // enum很灵活的一点是：可以使用Status[0]【反查】到OFFLINE
  10. console.log(Status[0]); // OFFLINE
  13. function getResult(status) {
  14.   if (status === Status.OFFLINE) {
  15.     return 'offline';
  16.   } else if (status === Status.ONLINE) {
  17.     return 'online';
  18.   } else if (status === Status.DELETED) {
  19.     return 'deleted';
  20.   }
  21.   return 'error';
  22. }
  24. const result = getResult(1);
  25. console.log(result);  // offline

泛型（重难点）

函数泛型

  1. // 泛型 generic 泛指的类型
  3. // 理论上讲，泛型的名字可以随便起
  4. function join1<ABC>(first: ABC, second: ABC) {
  5.   return `${first}${second}`;
  6. }
  8. // 但实践中常用 T, U, V, P等
  9. function join2<T, P>(first: T, second: P) {
  10.   return `${first}${second}`;
  11. }
  13. function anotherJoin<T>(first: T, second: T): T {
  14.   return first;
  15. }
  17. // 数组方案一：T[]
  18. function map1<T>(params: T[]) {
  19.   return params
  20. }
  21. // 数组方案二：Array<T>
  22. function map2<T>(params: Array<T>) {
  23.   return params;
  24. }
  28. join1<number>(1, 3);
  29. join2<number, string>(1, '1');
  30. map1<string>(['123']);

使用泛型做类型注解

  1. // 如何使用泛型作为一个具体的类型注解
  2. function hello<T>(params: T) {
  3.   return params;
  4. }
  6. const func: <T>(param: T) => T = hello;

类泛型

类泛型的基本使用

  1. class DataManager<T> {
  2.   constructor(private data: T[]) { }
  3.   getItem(index: number): T {
  4.     return this.data[index];
  5.   }
  6. }
  8. const data = new DataManager<number>([1, 2, 3, 4, 5]);
  9. data.getItem(0);

使用extends对泛型做约束

  1. interface Item {
  2.   name: string;
  3. }
  5. class DataManager<T extends Item> {
  6.   // T类型继承Item的含义：将来传进来的具体类型T，它必须有name这个字段！
  7.   constructor(private data: T[]) { }
  8.   getItemName(index: number): string {
  9.     return this.data[index].name  // 此时.name会有语法提示
  10.   }
  11. }
  13. const data = new DataManager([
  14.   {
  15.     name: 'dell'
  16.   }, {
  17.     name: 'lee'
  18.   }
  19. ]);

使用extends对泛型做约束

  1. interface Test {
  2.   name: string;
  3. }
  5. class DataManager<T extends number | string> {
  6.   constructor(private data: T[]) { }
  7.   getItem(index: number): T {
  8.     return this.data[index];
  9.   }
  10. }
  12. const data1 = new DataManager<Test>([])  // 报错
  13. const data2 = new DataManager<number>([]);  // 正确

keyof语法（难点中的难点）

  1. interface Person {
  2.   name: string;
  3.   age: number;
  4.   gender: string;
  5. }
  7. // type NAME = 'name';
  8. // key: 'name';
  9. // Person['name'];
  11. // type T = 'age'
  12. // key: 'age'
  13. // Person['age']
  15. // type T = 'gender'
  16. // key: 'gender'
  17. // Person['gender']
  19. class Teacher {
  20.   constructor(private info: Person) { }
  21.   // keyof 是个循环
  22.   // 要想理解这，需要知道一点：类型可以是个固定的字符串！！！
  23.   // type NAME='name' // 当类型为简单类型常量时，变量值只能取该常量，相当于使用const
  24.   // const abc: NAME = 'name'
  25.   getInfo<T extends keyof Person>(key: T): Person[T] {
  26.     return this.info[key];
  27.   }
  28. }
  30. const teacher = new Teacher({
  31.   name: 'yyy',
  32.   age: 3,
  33.   gender: 'male'
  34. });
  36. const _name = teacher.getInfo('name');  // 将鼠标放在_name上，显示其类型为string
  37. const age = teacher.getInfo('age');  // 将鼠标放在age上，显示其类型为number 
  38. console.log(_name);

命名空间

  1. namespace Home {
  2.   class Header {
  3.     constructor() {
  4.       const elem = document.createElement('div');
  5.       elem.innerText = 'This is Header';
  6.       document.body.appendChild(elem);
  7.     }
  8.   }
  10.   class Content {
  11.     constructor() {
  12.       const elem = document.createElement('div');
  13.       elem.innerText = 'This is Content';
  14.       document.body.appendChild(elem);
  15.     }
  16.   }
  18.   class Footer {
  19.     constructor() {
  20.       const elem = document.createElement('div');
  21.       elem.innerText = 'This is Footer';
  22.       document.body.appendChild(elem);
  23.     }
  24.   }
  26.   export class Page {  // 将需要暴露的类或方法前面加上export！否则找不到！
  27.     constructor() {
  28.       new Header();
  29.       new Content();
  30.       new Footer();
  31.     }
  32.   }
  33. }
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <title>Document</title>
  6.     <script src="./dist/page.js"></script>
  7.   </head>
  8.   <body>
  9.     <script>
  10.       new Home.Page();
  11.     </script>
  12.   </body>
  13. </html>

类型定义文件

小试牛刀

在html中引入两个文件（至于为什么可以直接引入.ts文件，请看：打包工具——Parcel）

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.     <head>
  4.         <meta charset="UTF-8" />
  5.         <title>类型定义文件</title>
  6.         <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
  7.         <script src="./page.ts"></script>
  8.     </head>
  9.     <body></body>
  10. </html>

其中 page.ts内容如下：

  1. $(function() {
  2.   $('body').html('<div>123</div>');
  3. });

此时项目是可以运行的，但是编辑器中会报错，因为不认识$这个符号。怎么办呢？写个类型声明文件：

  1. // 定义全局变量
  2. // declare var $: (param: () => void) => void;
  4. // 定义全局函数
  5. interface JqueryInstance {
  6.   html: (html: string) => JqueryInstance;  // 该对象有一个html方法
  7. }
  9. // 重载 $ 
  10. declare function $(readyFunc: () => void): void;  // 如果传入一个函数，返回空
  11. declare function $(selector: string): JqueryInstance;  // 如果传入字符串，返回JqueryInstance类型的对象

ok，解决问题！

使用接口

  1. interface JqueryInstance {
  2.   html: (html: string) => JqueryInstance  // 该对象有一个html方法
  3. }
  5. // 使用interface语法实现函数重载
  6. interface JQuery {
  7.   (readyFunc: () => void): void
  8.   (selector: string): JqueryInstance
  9. }
  11. declare var $: JQuery

模块化

  1. import $ from 'jquery';
  3. $(function() {
  4.   $('body').html('<div>123</div>');
  5.   new $.fn.init();
  6. });
  1. // Es6 模块化方案（还有commonjs、amd等语法的模块化方案）
  2. // 当 $ 既是函数，又是对象时（混合类型），可以使用 module语法
  3. declare module 'jquery' {
  4.   interface JqueryInstance {
  5.     html: (html: string) => JqueryInstance;
  6.   }
  7.   // 
  8.   function $(readyFunc: () => void): void;
  9.   function $(selector: string): JqueryInstance;
  11.   // 使用namespace实现对“对象”的定义，使用class在其内定义类
  12.   namespace $ {
  13.     namespace fn {
  14.       class init { }
  15.     }
  16.   }
  17.   export = $;  // 最终把 $ 导出
  18. }