--- theme: channing-cyan --- # TS高级用法总结《一》 **本文主要内容**：在 function 中使用泛型、在 class 中使用泛型和extends keyof 的使用本文阅读时间大约为6分钟，请听笔者娓娓道来。 ## 在 function 中使用泛型泛型可以理解为是函数的参数 ```ts function identity(arg: number): number { return arg; } ``` 上述例子，表示传入参数和返回值都必须是 number 类型；当然也可以使用 any，使用 any 时丢失了 ts 的功效。在日常的开发项目中，建议少用 any 类型。 **泛型常用的写法** ```ts function identity(arg: Type): Type { return arg; } // 上面就是 Type 就是 string 类型 let output = identity("myString"); ``` 如果此时 arg 是个数组，上面 identity 方法就需要改写 ```ts function loggingIdentity(arg: Type): Type { console.log(arg.length); // Property 'length' does not exist on type 'Type'. return arg; } // === 改写成 Type[] 推荐使用 👍👍👍 === function loggingIdentity(arg: Type[]): Type[] { console.log(arg.length); return arg; } // === 也可以 Array === function loggingIdentity(arg: Array): Array { console.log(arg.length); // Array has a .length, so no more error return arg; } ``` **函数字面量的形式定义泛型** ```ts function identity(arg: Type): Type { return arg; } let myIdentity: { (arg: Type): Type } = identity; ``` 上述方式是通过字面量的形式定义泛型，笔者认为可阅读性不强，咱们可以稍微改造使用接口的方式。 ```ts interface GenericIdentityFn { (arg: Type): Type; } type cGenericIdentityFn = GenericIdentityFn let myIdentity: cGenericIdentityFn = (num:number) => return 12; ``` 咱们定义了一个 GenericIdentityFn 接口，再使用类型别名 type 定义了一个 number 类型的 GenericIdentityFn，然后再实现 myIdentity。虽然，很绕但是好处就是当项目大的时候，所有来源的类型都可知道。Vue3 源码中的 ts 比这还绕，相信看过的同学都有深刻的印象。 ## 在 class 中使用泛型 **使用示例** ```ts class GenericNumber { zeroValue: NumType; add: (x: NumType, y: NumType) => NumType; } let myGenericNumber = new GenericNumber(); myGenericNumber.zeroValue = 0; myGenericNumber.add = function (x, y) { return x + y; }; // 或者 let stringNumeric = new GenericNumber(); stringNumeric.zeroValue = ""; stringNumeric.add = function (x, y) { return x + y; }; ``` 通过泛型，一个类可以生成多种类型的实例 ## extends & keyof **extends** 之前我们处理下面这种方式的时候，是让 arg:Type -> arg:Type[] ```ts function loggingIdentity(arg: Type): Type { console.log(arg.length); // Property 'length' does not exist on type 'Type'. return arg; } ``` 现在我们可以通过继承的方式来妥善处理上述的问题 ```ts interface Lengthwise { length: number; } function loggingIdentity(arg: Type): Type { console.log(arg.length); // Now we know it has a .length property, so no more error return arg; } loggingIdentity({ length: 10, value: 3 }); ``` **keyof** 可以声明受其他类型参数约束的类型参数。例如，这里我们希望从给定名称的对象获取一个属性。我们希望确保我们不会意外地抓取 obj 上不存在的属性，因此我们将在两种类型之间设置一个约束 ```ts // Key extends keyof Type 表示第二个参数一定是 Type 中的 key // 并且这是返回一个联合类型 union function getProperty(obj: Type, key: Key) { return obj[key]; } let x = { a: 1, b: 2, c: 3, d: 4 }; getProperty(x, "a"); getProperty(x, "m"); // Argument of type '"m"' is not assignable to parameter of type '"a" | "b" | "c" | "d"'. ``` Keyof 操作符接受对象类型，并生成其键的字符串或数值文字联合。下列类型 p 与“x”| “y”类型相同 ```ts type Point = { x: number; y: number }; type P = keyof Point; ``` 如果类型有字符串或数字索引签名，keyof 将返回这些类型: ```ts type Arrayish = { [n: number]: unknown }; type A = keyof Arrayish; // type A = number type Mapish = { [k: string]: boolean }; type M = keyof Mapish; // type M = string | number ``` 注意，在这个例子中，m 是字符串 | number ー这是因为 JavaScript 对象键总是被强制为字符串，所以 obj [0]总是与 obj [“0”]相同。 ## 总结阅读 Vue3 源码，如果不知道 ts 的高级用法，你可能会被绕晕；如果你是初次阅读源码，建议在社区内找一个“简单”版本学习，咳咳！ 👍👍👍 推荐源码阅读从 mini-vue 开始：[gitHub 仓库](https://github.com/cuixiaorui/mini-vue)，实现了最简的 Vue 模型！