Shulou(Shulou.com)06/01 Report--

这篇文章给大家分享的是有关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中范型的示例分析"这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.