typescript中范型的示例分析

這篇文章給大家分享的是有關typescript中范型的示例分析的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

范型

在定義泛型后，有兩種方式使用，一種是傳入泛型類型，另一種使用類型推斷。

declare function fn<T>(arg: T): T; // 定義一個泛型函數 
const fn1 = fn<string>('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 的類型，然后再傳給 TreeItem

interface Options<T extends string> { 
    childrenKey: T; 
} 
type TreeItem<T extends string> = Item & { [key in T]: TreeItem<T>[] | [] }; 
declare function listToTree<T extends string = 'children'>(list: Item[], options: Options<T>): TreeItem<T>[]; 
listToTree(arr, { childrenKey: 'childrenList' }).forEach(i => i.childrenList)

infer

表示在 extends 條件語句中待推斷的類型變量。

type ParamType<T> = 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<Func>; // Param = User 
type AA = ParamType<string>; // string

例子：

// [string, number] -> string | number
type ElementOf<T> = T extends Array<infer E> ? E : never;

type TTuple = [string, number];

type ToUnion = ElementOf<TTuple>; // string | number


// T1 | T2 -> T1 & T2
type UnionToIntersection<U> = (U extends any ? (k: U) => void : never) extends ((k: infer I) => void) ? I : never;

type Result = UnionToIntersection<T1 | T2>; // T1 & T2

感謝各位的閱讀！關于“typescript中范型的示例分析”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！