typescript中范型的示例分析

这篇文章给大家分享的是有关typescript中范型的示例分析的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

范型

在定义泛型后，有两种方式使用，一种是传入泛型类型，另一种使用类型推断。

declare function fn(arg: T): T; // 定义一个泛型函数 const fn1 = fn('hello'); // 第一种方式，传入泛型类型 string const fn2 = fn(1); // 第二种方式，从参数 arg 传入的类型 number，来推断出泛型 T 的类型是 number

一个扁平数组结构建树形结构例子：

// 转换前数据 const arr = [ { id: 1, parentId: 0, name: 'test1'}, { id: 2, parentId: 1, name: 'test2'}, { id: 3, parentId: 0, name: 'test3'} ]; // 转化后 [ { id: 1, parentId: 0, name: 'test1',     childrenList: [ { id: 2, parentId: 1, name: 'test2', childrenList: [] } ] },     { id: 3, parentId: 0, name: 'test3', childrenList: [] } ]interface Item {     id: number;     parentId: number;     name: string; }// 传入的 options 参数中，得到 childrenKey 的类型，然后再传给 TreeIteminterface Options {     childrenKey: T; } type TreeItem = Item & { [key in T]: TreeItem[] | [] }; declare function listToTree(list: Item[], options: Options): TreeItem[]; listToTree(arr, { childrenKey: 'childrenList' }).forEach(i => i.childrenList)

infer

表示在 extends 条件语句中待推断的类型变量。

type ParamType = T extends (param: infer P) => any ? P : T;

这句话的意思是：如果 T 能赋值给 (param: infer P) => any，则结果是 (param: infer P) => any 类型中的参数 P，否则返回为 T。

interface User {     name: string;     age: number; } type Func = (user: User) => void type Param = ParamType; // Param = User type AA = ParamType; // string

例子：

// [string, number] -> string | numbertype ElementOf = T extends Array ? E : never;type TTuple = [string, number];type ToUnion = ElementOf; // string | number// T1 | T2 -> T1 & T2type UnionToIntersection = (U extends any ? (k: U) => void : never) extends ((k: infer I) => void) ? I : never;type Result = UnionToIntersection; // T1 & T2

感谢各位的阅读！关于"typescript中范型的示例分析"这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！