1. 注释的妙用，通过/* /来注释Typescript类型，当我们使用相关类型的时候就会有注释的提示，这个技巧在多人协作时十分有用，不用花时间去看文档或者跳转页面去看注释
  1. interface User {
  2.   /**
  3.    * 合法用户接口
  4.    */
  5.   username: string;
  6.   id: number;
  7.   token: string;
  8.   avatar: string;
  9.   role: string;
  10. }
  11. let admin: User = {
  12.   username: "admin",
  13.   id: 1,
  14.   token: "123456",
  15.   avatar: "xxx.xxx.xxx/xxx.png",
  16.   role: "admin",
  17. };
  1. 巧用类型推导，ts能根据简单的规则推断和检查变量的类型 ```typescript function add(a:number, b: number) { return a + b; }

// ts可以通过参数与return运算法推断函数的返回值为number类型

  1. 获取函数的整体的类型，可以借助typeof
  2. ```typescript
  3. type addFn = typeof add
  1.   返回值类型复杂时，可以借助类型推导和ReturnType轻松的获取返回值类型
  1. type returnType = ReturnType<typeof add> // number

以上的技巧在redux编码时非常有用，可以省略大量的重复代码

  1. 巧用元组，适用于批量的获取参数，并且每一个参数的类型还不一样，我们可以声明一个一个元组

    1. function query(...args: [string, number, boolean]) {
    2. const d: string = args[0];
    3. const n: number = args[1];
    4. const b: boolean = args[2];
    5. }

  2. 巧用Omit, 适用于复用一个类型，但是又不需要此类型中的全部属性，因此需要剔除某些属性 ```typescript interface User { /**

    • 合法用户接口 */ username: string; id: number; token: string; avatar: string; role: string; }

type UserWithoutToken = Omit

  1. 常用再React的父组件向子组件传递数据的时候，通常需要复用父组件的props类型，但是又需要剔除一些无用的类型
  3. 5. 使用Record, Record允许从Union类型中创建新类型，Union类型中的值作为新类型的属性
  4. ```typescript
  5. // 简单的汽车品牌年龄表
  6. type Car = "Audi"| "BMW" | "MercedesBenz"
  7. const cars = {
  8.     Audi: { age: 119 },
  9.   BMW: { age: 113 },
  10.   MercedesBenz: { age: 133 },
  11. }
  13. //潜在的类型安全的问题
  14. // 1. 忘记写一个汽车品牌，会报错吗？
  15. // 2. 拼写属性错误，会报错吗？
  16. // 3. 添加一个非上述是三个品牌的品牌进去，会报错吗？
  17. // 4. 更改其中一个品牌的名字，他会有报错提醒吗？
  19. // 借助Record即可解决
  20. type Car = "Audi"| "BMW" | "MercedesBenz"
  21. type CarList = Record<Card, {age: number}>
  23. type Car = "Audi" | "BMW" | "MercedesBenz";
  24. type CarList = Record<Car, { age: number }>;
  26. const cars: CarList = {
  27.   Audi: { age: 119 },
  28.   BMW: { age: 113 },
  29.   MercedesBenz: { age: 133 },
  30. };
  1. 巧用类型约束， 在.tsx文件中，泛型可能会被当做jsx标签 ```typescript const toArray = (element: T) => [element]; // Error

// 加上逗号，或者extends都可以解决 const toArray = (element: T) => [element]; const toArray = (element: T) => [element]; ```

小结

  1. 巧用注释
  2. 类型推导，typeof, ReturnType
  3. 巧用元组，批量获取参数
  4. 巧用Omit，复用类型，剔除其中不需要的属性
  5. 使用Record, 类型安全
  6. 巧用类型约束，tsx中泛型会被当做jsx标签