Type Hero是一个非常优质的练习ts网站，通过学习并完成相关习题，可以提供我们对typescript 这门语言的理解和使用。
Generic Type Arguments 泛型类型参数
为什么我们需要泛型类型参数
泛型可以看做对TS中的变量(类型)进行操作的函数。就像函数需要参数一样，泛型类型也可以提供类型(变量)作为输入值，并在调用时确定真正类型。
如何使用泛型参数
对于泛型，我们使用尖括号< 和> 而不是括号()来传递变量
这里使用T 作为泛型类型参数
interface Row<T> {
label: string;
value: T;
disabled: boolean;
}
// 调用泛型
type StringRow = Row<string>;
上面使用泛型定义的类型，完全等同于下面直接声明StringRow类型
// 直接声明StringRow类型
type StringRow = {
label: string;
value: string;
disabled: boolean;
};
多个泛型参数
就像函数可以接收多个参数一样，泛型也可以。
type GroceryItem<Name, Price, InStock> = {
name: Name;
price: Price;
inStock: InStock;
};
默认泛型参数
就像函数参数可以有默认参数一样，泛型也可以
type Log<Message, Level = 'info'> = {
message: Message;
level: Level;
};
type ImplicitInfo = Log<'implicit info'>;
上面类型等同于下面
type ImplicitInfo = {
message:'implicit info',
level:'info'
}
例题
type Store = unknown;
type Item = unknown;
type Salad = unknown;
给定下面三个类型，利于上面学习泛型知识，使下面条件满足
type test_KrogerDetroit = Expect<Equal<
Store<'Kroger', 'Detroit'>,
{ name: 'Kroger', city: 'Detroit' }
>>;
type test_StopNShopMassachusetts = Expect<Equal<
Store<'Stop 'N Shop', 'Massachusetts'>,
{ name: 'Stop 'N Shop', city: 'Massachusetts' }
>>;
type test_CapreseSaladName = Expect<Equal<
Salad['name'],
'Caprese Salad'
>>;
type test_CapreseSaladPrice = Expect<Equal<
Salad['price'],
14.99
>>;
type test_CapreseSaladInStock = Expect<Equal<
Salad['inStock'],
true
>>;
例题解析：
- 对
Store类型变量，想让 类型Store<'Kroger', 'Detroit'>等于类型{ name: 'Kroger', city: 'Detroit' }，用泛型定义比较简单。
type Store<Name,City> ={
name: Name,
city:City
}
- 对于
Salad类型，如果直接定义成索引类型是满足上面例子条件的，但这里需要使用泛型
type Salad ={
name: 'Caprese Salad',
price: 14.99,
inStock: true
}
所以可以先声明一个泛型类型Item，然后在调用Item，声明salad就满足了
type Item<Name,Price,InStock> = {
name:Name,
price:Price,
inStrock:InStock
}
// 调用Item泛型类型
type Salad = Item<'Caprese Salad',14.99,true>
总结
联系js知识，泛型其实就是对变量操作的函数，只不过这个变量在ts叫做类型而已，利于泛型在调用使用时，才确定类型的特性，我们可以更加灵活对类型进行定义，最后也欢迎大家发表自己见解~。
