【金秋打卡】第14天-C01Vue3TypeScript-泛型（约束泛型）

• 课程名称：Vue3 + Typescript 从0到1开发通用基础组件
• 章节名称：
  • 第2章：你好Typescript：进入类型的世界
    • 2-12：泛型(Generics)第一部分
    • 2-13：泛型(Generics)第二部分-约束泛型
• 讲师姓名：张轩
• 时间：2022-11-06 21:56

课程内容

• 为什么为加入泛型的概念

  • 定义一个函数，要为参数指定类型，也要为函数指定返回类型
  • 如果希望任意参数都能处理，返回类型也可以根据实际情况指定
  • 那就要使用泛型了
  • 泛型是在定义时指定为一个通用形式
  • 而在具体使用时再将其类型指定为具体类型

• 泛型的定义

  function echo<T>(arg: T): T {
      return arg
  }
  const str: string = "abc"
  const result = echo(str)// 这时rsult类型为string
  const result1 = echo(true)// 这时result1的类型由传入参数类型决定
  
  function swap<T, U>(tuple: [T, U]): [U, T] {
      return [tuple[1], tuple[0]]
  }
  const result2 = swap(['string', 123])
  

• 约束泛型

  • 当使用泛型时，希望调用长度属性，但由于不知道泛型是什么类型，所以在调用长度属性时会报错，比如

    function echoWithArg<T>(arg: T): T {
        console.log(arg.length)// 此行会报错，因为参数不知道会不会有length属性
        return arg
    }
    // 当上面内容修改为
    function echoWithArg<T>(arg: T[]): T[] {
        console.log(arg.length)// 此行会报错，因为参数不知道会不会有length属性
        return arg
    }// 由于数组有长度属性，所以上述代码不会报错
    const arrs = echoWithArr([1, 2, 3])
    // 但这种方案又会把参数类型限制为数组类型
    // 所以更好的方案是，让这个参数只能是包含length属性的类型
    interface IWithLength {
        length: number
    }
    function echoWithLength1<T extends IWithLength>(args: T): T {
        console.log(arg.length)
        return arg
    }
    const s1 = echoWithLength1('str')// 字符串参数是有length参数的
    const s2 = echoWithLength1({ length: 10})// 是一个对象，有length属性
    const s3 = echoWithLength1([1, 2, 3])
    

课程收获

泛型的自由是有代价的，在课程中的例子就是定义泛型类，必须要有length属性