我第一次遇到這個問題，如果標題沒有意義，我很抱歉，無法找到一個好的措辭。
我正在使用一個回傳如下回應的 API：
{
PaginatedResults: {
TotalResults: 100,
Offset: 0,
Limit: 0,
PageSize: 100,
},
Error: {
Message: '',
Code: '',
},
Customers: [{...}]
}
whereCustomers可以替換為 API 可能回傳的任何型別。所以它也可能看起來像這樣：
{
PaginatedResults: {
TotalResults: 100,
Offset: 0,
Limit: 0,
PageSize: 100,
},
Error: {
Message: '',
Code: '',
},
Sales: [{...}]
}
我目前表達的型別是這樣的：
type PaginatedResponse<TResponse extends object> =
TResponse &
Readonly<{
PaginatedResponse: {
TotalResults: number;
Offset: number;
Limit: number;
PageSize: number;
};
Error?: {
Message: string;
Code: string;
};
}>;
這一直運行良好，但我最近在嘗試創建通用輔助函式來自動對端點進行分頁時遇到了一個問題。
為了跟蹤所有結果，我需要執行以下操作：
const allResults = [...initialResults];
const nextResp = await apiCall();
allResults.push(...nextResp['Customers'])
但問題是密鑰'Customers'可以是 API 可能回傳的 50 多種型別中的任何一種。所以我需要一種通用的方法來索引回應。我嘗試了很多不同的事情，但都沒有成功，所以我希望獲得一些關于處理此類事情的最佳方法的指導。
uj5u.com熱心網友回復：
單獨的 TypeScript 在這里不會有太大幫助。...nextResponse['Customers']您期望 TypeScript 填寫正確的密鑰。但是正確的密鑰只有在運行時或手動提供的泛型型別中才能知道。
但也許這無論如何都會對你有所幫助：
// I added some generic types here which will help later
type PaginatedResponse<TResponse extends {[key in TKey]: any}, TKey extends keyof TResponse = keyof TResponse> =
Readonly<{
PaginatedResponse: {
TotalResults: number,
Offset: number,
Limit: number,
PageSize: number,
};
Error?: {
Message: string;
Code: string;
};
}> & TResponse
定義可能的Response型別：
type Response1 = PaginatedResponse<{Customers: any}>
type Response2 = PaginatedResponse<{Sales: any}>
type AllResponses = Response1 | Response2
現在讓我們定義一個獲取 aPaginatedResponse并將 a 推入TResponse陣列的函式：
type GetResponseKey<T> = T extends PaginatedResponse<infer TRes, infer TKey> ? TKey : never
const arr: any[] = []
function pushToResponseArray<
T extends AllResponses,
K extends GetResponseKey<T>
>(response: T, key: K){
arr.push(response[key])
}
const res: Response1 = {} as any
pushToResponseArray(res, "Customers") // We have to manually specify the key here
// but typescript will check if key is correct
這不是一個完美的解決方案，我認為您總是必須手動設定key或使用一些 JavaScript 邏輯來確定它。
總結一下：
在您的應用程式的某個地方，您需要一些 JavaScript 邏輯來確定PaginatedResponse. 之后將型別映射到相應的鍵以訪問TResponse.
沙盒
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/470418.html
上一篇：保留泛型變數之間的型別限制