TypeScript入门｜ 青训营笔记

这是我参与「第五届青训营 」伴学笔记创作活动的第 6 天。

这篇笔记记录一些TypeScript的基本语法和知识点。

一、本堂课重点内容

• TypeScript 基本语法
• TypeScript 高级数据类型

二、详细知识点介绍

1、TypeScript特性

• TypeScript是一门弱类型、静态的语言
  • 弱类型语言：允许隐式类型转换
  • 静态：编译时就确定变量的数据类型。动态语言是运行时确定
  • 静态语言特性
    • 可读性强
    • 可维护性强：编译时发现错误
  • TS是JS的超集

2、基本语法

• 基础数据类型：string、number、boolean、null、undefined
• 对象类型
  • readonly：只读属性
  • ?.：可选属性
  • [key: string]: any：表示这一项可有可无，且必须key为字符串类型，value为任意类型

interface IByteDance {
    readonly jobId: number;
    name: string;
    sex: 'max' | 'woman' | 'other';
    age: number;
    hobby?: string;
    [key: string]: any;
}

• 函数类型

interface IMult {
    (x: number, y: number): number;
}
const mult: IMult = (x, y) => x * y;
/* ---或者--- */
const mult: (x: number, y: number) => number = (x, y) => x * y;

• 函数重载

function getDate(type: string, timestamp?: string): string;
interface IGetDate {
    (type: string, timestamp?: string): string;
    (type: Date, timestamp?: string): Date;
    (type: string | Date, timestamp?: string): Date | string;
const getDate2: IGetDate = (type: string, timestamp: string) => {
    const date = new Date(timestamp);
    return type === string ? date | date.toLocaleString();
}
}

• 数组类型
  • 类型 + 方括号：const arr1: number[] = [1, 2, 3];
  • 泛型

  type IArr2 = Array<string | number | Record<string, number>>
  const arr2: IArr2 = [1, '2', {a: 1}]
  

  • 元组

  type IArr3 = [number, string, string];
  const arr3: IArr3 = [1, '2', '3'];
  

  • 接口

  interface IArr4 {
      [key: number]: any;
  }
  const arr4: IArr4 = [...];
  

• 补充类型
  • void
  • any
  • 枚举

  // 定义枚举类
  enum Gender {
      Male = 1,
      Female = 2,
  }
  let msg:{name:string,gender:Gender}  // 第二步，类型的时候填枚举类
  msg = {
      name:'zhangsan',
      gender:Gender.Female // 使用的时候用点语法
  }
  

• 泛型
  • 不预先指定具体的类型，而在使用的时候再指定类型的一种特性

  type IType = <T>(target: T) => T[];
  

  • 泛型接口 & 多泛型

  interface IX<T, U> {
      key: T;
      val: U;
  }
  

  • 泛型类

  class IMan<T> {
      instance: T;
  }
  

  • 泛型别名

  type IArr<T> = Array<T>;
  

  • 泛型约束：extends。补充extends作用：
    • ①接口继承

    interface Animal { name: string }
    interface Dog extends Animal { bark: () => void }
    

    • ②普通条件判断：用来判断一个类型是否可以分配给另外一个类型。A extends B，是表示A类型能够分配给B类型，而不是表示A类型是B类型的子集。换句话来说，如果条件判断的时候A extends B为true，则说明约束A类型的一切约束条件，B类型都具有。

    type bool = Animal extends Dog ? 'yes': 'no' // bool = 'no'
    type bool1 = Dog extends Animal ? 'yes': 'no' // bool1 = 'yes'
    

    • ③泛型条件判断：对于使用extends关键字的条件类型，如果extends前面的参数是一个泛型类型，当传入该参数的是联合类型，则使用分配律计算最终的结果。
      • 分配律是指，将联合类型的联合项拆成单项，分别代入条件类型，然后将每个单项代入得到的结果再联合起来，得到最终的判断结果。
      • 满足两个要点即可适用分配律：
        • 参数是泛型类型，
        • 代入参数的是联合类型

    type AB<T> = T extends 'x' ? 'a' : 'b';
    type All = AB<'x' | 'y'>; // 非确定条件，可能是 'x' 或 'y'
    // 得到 type All = 'a' | 'b';
    

    • ④泛型约束

    function getInfo<T, key extends keyof T>(obj: T, key: key): T[key]{
        return obj[key]
    }
    const obj = {
        name: 'tom',
        age: 12
    }
    getInfo(obj, 'age') // 这里第二个参数只能传age或者name，传其他的字段都会报错。
    

• 类型断言：as

  interface Vup {
      name: string,
      roomId: number,
  }
  // 以下代码报错，类型“{}”上不存在属性xxx
  // let azi = {}
  // azi.name = "azusa";
  // azi.age = 18;
  
  // 添加类型断言编译通过
  let azi = {} as Vup;
  azi.name = "azusa";
  azi.age = 18;
  

• 字符串/数字 字面量
  • 允许指定字符串/数字必须的固定值

  type IChar = 'A' | 'B' | 'C';
  type INum = 1 | 3 | 5;
  

3、高级类型

• 联合/交叉类型
  • 联合类型：IA|IB，表示一个值可以是几种类型之一
  • 交叉类型：IA&IB，多种类型叠加到一起成为一种类型，它包含了所需的所有类型的特性

  const vupList = [{
      name: 'azusa',
      type: 'human',
      vrlink: 1
  }, {
      name: 'nanami',
      type: 'shark',
      vrp: 3,
  }]
  
  type IVupList = Array<{
      name: string;
  } & ({
      type: 'human';
      vrlink: number;
  } | {
      type: 'shark';
      vrp: number;
  })>
  

• 类型保护与类型守卫
  • 类型守卫：定义一个函数，它的返回值是一个类型谓词，生效范围为子作用域

  interface IA { a: 1, a1: 2}
  interface IB { b: 1, b1: 2}
  
  // 类型守卫：定义一个函数，它的返回值是一个类型谓词，生效范围为子作用域
  function getIsIA(arg: IA|IB): arg is IA {
      return !!(arg as IA).a;
  }
  function log2(arg: IA|IB) {
      if(getIsIA(arg)) {
          console.log(arg.a1);
      } else {
          console.log(arg.b1);
      }
  }
  

  • 实现logVup方法，函数接收vup类型，并打印出相关特征
    • 联合类型 + 类型保护 = 自动类型推断

  function logVup(vup: IVup) {
      if (vup.type === 'human') {
          console.log(vup.vrlink);
      } else {
          console.log(vup.vrp);
      }
  }
  

• 高级类型
  • 假如现在要把两个对象 sourceObj 和 targetObj 合并，其类型实现繁琐。若 obj 类型复杂，则生命 source 和 target 便需要大量重复2遍。若 target 增加/减少 key， 则需要 source 联动去除

  interface ISourceObj {
      x?: string;
      y?: string;
  }
  interface ITargetObj {
      x: string;
      y: string;
  }
  type IMerge = (sourceOBj: ISourceObj, targetObj: ITargetObj) => ITargetObj;
  

  • 使用高级类型Record和Partial

  interface IMerge {
      <T extends Record<string, any>>(sourceObj: Partial<T>, targetObj: T): T;
  }
  

  • Partial的底层实现
    • keyof：取值对象中的所有 key 组成的字符串字面量。
      • e.g.：type IKeys = keyof {a: string, b: number};等价于type IKeys = 'a'|'b';
    • in：遍历
    • ?：将该属性变为可选属性

  type Partial<T> = {
      [P in keyof T]?: T[P];
  }
  

• 函数返回值类型
  • 实现一个delayCall函数，接收一个函数作为入参，返回一个promise，结果为入参函数的返回结果

  function delayCall(func) {
      return new Promise(resolve => {
          setTimeout(()=>{
              const result = func();
              resolve(result);
          }, 1000);
      });
  }
  

  • 定义类型
    • extends跟随泛型出现时，表示类型推断，其表达可类比三元表达式，如T === 判断类型 ? 类型A: 类型B
    • infer的理解：如果 T 继承了 extends (...args: any[]) => any 类型，则返回类型 R，否则返回 any。其中 R 被定义在 extends (...args: any[]) => infer R 中，即 R 是从传入参数类型中推导出来的。

  type IDelayCall = <T extends () => any>(func: T) => ReturnType<T>;
  type IReturnType<T extends (...args: any) => any> = T extends (...args: any) => infer R ? R: any;
  

三、实践练习例子

• 所有实例代码均已在上一节中列出

四、课后个人总结

• extends的作用、TypeScript的高级类型都很难懂，也不容易想明白，需要时常回顾复习。

五、引用参考

• 前端培训：ts入门学习指南（四） - 知乎 (zhihu.com)
• Typescript中extends的作用 - 闯入码途的水产人 - 博客园 (cnblogs.com)
• TypeScript 的 extends 条件类型 - 掘金 (juejin.cn)
• 第九节:TypeScript 类型断言 - 简书 (jianshu.com)
• (13条消息) TypeScript高级类型-Partial_roamingcode的博客-CSDN博客_ts partial
• Typescript 中 infer 关键字解读 - 简书 (jianshu.com)