【金秋打卡】第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属性
约束泛型