泛型的概念
此处我就不引用官网文档上那两大段话了，太晦涩难懂，站在软件工程和c# java语言层面理解，对于我这个小前端来说有点遥远，我对他的定义就是
泛型是一种传递类型的方式，是一种类型占位符，这种类型占位符告诉我们的（function、class或interface）我们在调用它时想要使用什么类型
泛型的理解
const componentObj = { one: 'list', two: 'topic' };
function getGroupComponentType<T, K extends keyof T>(obj: T, key: K): T[K] {
return obj[key];
}
getGroupComponentType(componentObj, 'one'); // 'list'
初学者看到<T>的时候就已经可能产生了困惑，更别说后面还跟着<T, K extends keyof T> 其实我们一点点来拆解就能理解它的意思了
- 常用泛型变量
T代表 Type，在定义泛型时通常用作第一个类型变量名，除了T之外，以下是常见泛型变量代表的意思：K（Key）：表示对象中的键类型V（Value）：表示对象中的值类型E（Element）：表示元素类型
简单函数示例
// 参数arg类型是number
function identity(arg: number): number {
return arg;
}
// 参数类型可能变为string.... 一直变所以改了any
function identity(arg: string): string {
return arg;
}
// 参数类型又变了可能变为string或者number
function identity(arg: number | string): number | string {
return arg;
}
// 参数类型 一直变所以改了any
function identity(arg: any): any {
return arg;
}
// 引入了<Type>来解决上面的问题
function identity<Type>(arg: Type): Type {
return arg;
}
可以通过👆上面代码的例子看出，随着需求的变更，越来越不好维护，但是引入了泛型轻松解决了输入输出要一致的问题。
泛型的使用之函数
处理函数传入参数可多个
function identities<T, U> (arg1: T, arg2: U): [T, U]{
return [arg1, arg2] ;
}
泛型参数默认类型 语法<T = defacult type>
// 使用type 定义函数Handler，Handler的泛型默认参数是unknown
export type Handler<T = unknown> = (event: T) => void;
通过上面的事例我们已经了解了，泛型来处理函数传入参数，默认参数和函数返回值类型，下面看看泛型还在哪里有使用
泛型的使用
// 定义interface GenericInterface中需要传入的类型
interface GenericInterface<U> {
value: U;
getIdentity: () => U;
}
class IdentityClass<T> implements GenericInterface<T> {
value: T;
constructor(value: T) {
this.value = value;
}
getIdentity(): T {
return this.value;
}
}
const myNumberClass = new IdentityClass<number>(1);
console.log(myNumberClass.getIdentity()); // 1
const myStringClass = new IdentityClass<string>('Hello!');
console.log(myStringClass.getIdentity()); // Hello!
类型别名中的泛型大多是用来进行工具类型封装
type Stringify<T> = {
[K in keyof T]: string;
};
type Clone<T> = {
[K in keyof T]: T[K];
};
泛型工具类型
TypeScript 内置了一些常用的工具类型，比如 Partial、Required、Readonly、Record 和 ReturnType 等
// 语法
`Pick<T, K extends keyof T>` 的作用是将某个类型中的子属性挑出来，变成包含这个类型部分属性的子类型
type Pick<T, K extends keyof T> = { [P in K]: T[P]; };
interface Todo {
title: string;
description: string;
completed: boolean;
}
type TodoPreview = Pick<Todo, "title" | "completed">;
const todo: TodoPreview = {
title: "Clean room",
completed: false,
};
Record<K extends keyof any, T> 的作用是将 K 中所有的属性的值转化为 T 类型
type Record<K extends keyof any, T> = { [P in K]: T; };
interface PageInfo {
title: string;
}
type Page = "home" | "about" | "contact";
const x: Record<Page, PageInfo> = {
about: { title: "about" },
contact: { title: "contact" },
home: { title: "home" }
};
泛型约束
- 泛型约束表现形式一约束函数参数来确保该属性存在
示例: 无法确定T 是否有length 属性，所以会报错
function identity<T>(arg: T): T {
console.log(arg.length); // Error
return arg;
}
解决上述问题可以通过<T extends SomeType>，让这个泛型T继承extends一个定义好的interface接口 这样就能约束泛型。
interface Length {
length: number;
}
function identity<T extends Length>(arg: T): T {
console.log(arg.length); // 可以获取length属性
return arg;
}
- 泛型约束表现形式二约束检查对象上的key是否存在
const componentObj = { one: 'list', two: 'topic' };
function getGroupComponentType<T, K extends keyof T>(obj: T, key: K): T[K] {
return obj[key];
}
getGroupComponentType(componentObj, 'one'); // 'list'
getGroupComponentType(componentObj, 'tree');
// error type 类型"three"的参数不能赋给类型"one" | "two"的参数。
可以看到报错信息error type 类型"three"的参数不能赋给类型"one" | "two"的参数。所以先来了解一下keyof
keyof 操作符是在 TypeScript 2.1 版本引入的，该操作符可以用于获取某种类型的所有键，其返回类型是联合类型
所以上述代码在 getGroupComponentType 函数中，我们通过 K extends keyof T 确保参数 key 一定是componentObj对象中含有的键，这样就不会发生运行时错误。这是一个类型安全的解决方案
泛型使用之源代码分析工具库mitt
... 未完继续
