Typescript中infer關鍵字的使用小結
更新時間：2026年01月13日 10:50:24 作者：滿天星辰
infer是TypeScript中條件類型的一個關鍵字,主要用于在條件類型中進行類型推斷,下面就來詳細的介紹一下Typescript infer關鍵字的使用,感興趣的可以了解一下
infer 是 TypeScript 中條件類型的一個關鍵字，主要用于在條件類型中進行類型推斷。它允許我們在泛型條件類型中聲明一個類型變量，然后從其他類型中推斷出這個類型。
基本語法
type ReturnType<T> = T extends (...args: any[]) => infer R ? R : never;
主要使用場景
1.獲取函數(shù)返回類型
// 內(nèi)置的 ReturnType 實現(xiàn)原理
type MyReturnType<T> = T extends (...args: any[]) => infer R ? R : never;
function foo(): string {
return "hello";
}
type FooReturn = MyReturnType<typeof foo>; // string
2.獲取函數(shù)參數(shù)類型
// 獲取第一個參數(shù)類型
type FirstParam<T> = T extends (first: infer P, ...rest: any[]) => any ? P : never;
// 獲取所有參數(shù)類型（元組）
type Params<T> = T extends (...args: infer P) => any ? P : never;
function bar(x: number, y: string): void {}
type BarFirstParam = FirstParam<typeof bar>; // number
type BarParams = Params<typeof bar>; // [number, string]
3.獲取數(shù)組/元組元素類型
typescript
type ArrayElement<T> = T extends (infer U)[] ? U : never; type StrArrayElement = ArrayElement<string[]>; // string type NumArrayElement = ArrayElement<number[]>; // number
4.獲取 Promise 的解析類型
type UnwrapPromise<T> = T extends Promise<infer U> ? U : T; type PromiseString = Promise<string>; type Unwrapped = UnwrapPromise<PromiseString>; // string
實際應用示例
示例1：提取對象值類型
type ValueOf<T> = T extends { [key: string]: infer V } ? V : never;
type Obj = { a: number; b: string };
type Values = ValueOf<Obj>; // number | string
示例2：提取構造函數(shù)實例類型
type InstanceType<T> = T extends new (...args: any[]) => infer R ? R : any;
class Animal {
name: string;
constructor(name: string) {
this.name = name;
}
}
type AnimalInstance = InstanceType<typeof Animal>; // Animal
示例3：遞歸解包嵌套 Promise
type DeepUnwrapPromise<T> = T extends Promise<infer U> ? DeepUnwrapPromise<U> : T; type NestedPromise = Promise<Promise<string>>; type Result = DeepUnwrapPromise<NestedPromise>; // string
使用注意事項
1.只能用在條件類型的 extends 子句中
// ? 正確 type Example1<T> = T extends Array<infer U> ? U : never; // ? 錯誤：infer 不能單獨使用 type Example2<T> = infer U; // 編譯錯誤
2.多個 infer 可以同時使用
type Zip<T, U> = T extends [infer A, ...infer RestT]
? U extends [infer B, ...infer RestU]
? [[A, B], ...Zip<RestT, RestU>]
: []
: [];
type Result = Zip<[1, 2], ['a', 'b']>; // [[1, 'a'], [2, 'b']]
3.協(xié)變位置 vs 逆變位置
// infer 在協(xié)變位置（返回類型） type GetReturnType<T> = T extends () => infer R ? R : never; // infer 在逆變位置（參數(shù)類型） type GetArgType<T> = T extends (arg: infer A) => any ? A : never;
實戰(zhàn)技巧
1.類型守衛(wèi)與 infer
function isPromise<T>(value: any): value is Promise<T> {
return value && typeof value.then === 'function';
}
async function handle<T>(input: T | Promise<T>): Promise<T> {
if (isPromise(input)) {
// 這里 input 被推斷為 Promise<T>
return input;
}
return Promise.resolve(input);
}
2.構建實用類型工具
// 提取所有方法的返回類型
type MethodsReturnType<T> = {
[K in keyof T]: T[K] extends (...args: any[]) => infer R ? R : never;
};
// 提取特定屬性的類型
type PropType<T, K extends keyof T> = T extends { [P in K]: infer V } ? V : never;
總結
infer 的核心作用：在條件類型中提取未知類型的內(nèi)部結構。它是 TypeScript 類型系統(tǒng)的高級特性，常用于：
- 類型提取：從已有類型中提取部分類型信息
- 類型轉換：將一個類型轉換為另一種形式
- 類型推導：根據(jù)上下文推導出具體類型
- 工具類型創(chuàng)建：構建復雜的實用類型工具
掌握 infer 的關鍵是多實踐，從簡單的函數(shù)返回類型提取開始，逐步應用到更復雜的類型操作中。
到此這篇關于Typescript中infer關鍵字的使用小結的文章就介紹到這了,更多相關Typescript infer關鍵字內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
webpack4.0+vue2.0利用批處理生成前端單頁或多頁應用的方法
這篇文章主要介紹了webpack4.0+vue2.0利用批處理生成前端單頁或多頁應用的方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-06-06
js中不存在自帶的sleep方法，要想休眠要自己定義個方法,需要的朋友可以參考下2014-07-07
由PHP傳入JS處理的時間戳我說怎么老是對不上號呢，原來JS時間戳為13位，包含3位毫秒的，而PHP只有10位不包含毫秒的。恩，基礎還是要補補的2014-06-06
JavaScript計算器網(wǎng)頁版實現(xiàn)代碼分享
這篇文章主要為大家詳細介紹了JavaScript計算器網(wǎng)頁版實現(xiàn)代碼，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-07-07
JS使用replace()方法和正則表達式進行字符串的搜索與替換實例
這篇文章主要介紹了JS使用replace()方法和正則表達式進行字符串的搜索與替換實例,需要的朋友可以參考下2014-04-04
微信小程序?qū)崿F(xiàn)用table顯示數(shù)據(jù)庫反饋的多條數(shù)據(jù)功能示例
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)用table顯示數(shù)據(jù)庫反饋的多條數(shù)據(jù)功能,涉及微信小程序wx.request訪問php后臺及返回結果的顯示布局相關操作技巧,需要的朋友可以參考下2019-05-05
下面小編就為大家?guī)硪黄狢anvas放置反彈效果隨機圖形(實例)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
JavaScript實現(xiàn)數(shù)據(jù)導出為Excel和CSV文件
在 Web 開發(fā)中,經(jīng)常會遇到需要將數(shù)據(jù)導出為文件的需求,這篇文章主要為大家詳細介紹了如何使用JavaScript實現(xiàn)數(shù)據(jù)導出為Excel和CSV文件,需要的可以了解下2025-05-05
js中將HTMLCollection/NodeList/偽數(shù)組轉換成數(shù)組的代碼
js中將HTMLCollection/NodeList/偽數(shù)組轉換成數(shù)組的代碼，需要的朋友可以參考下。2011-07-07
JavaScript基本語法_動力節(jié)點Java學院整理
這篇文章主要介紹了JavaScript基本語法，適合剛入門的同學，有興趣的可以了解下。2017-06-06