我想要一個可用于所有過濾器的 onFilterChange 輔助函式，這樣我就不需要為每個不同的過濾器鍵入它，但我被卡住了：
// helper.ts
export function onFilterChange(prevState: Record<string, any>, fieldName: string, value: string, isDelete = false): Record<string, any> {
const newFilters: Record<string, any> = { ...prevState };
if (isDelete) {
delete newFilters[fieldName];
} else {
newFilters[fieldName] = value;
}
if (fieldName !== 'page' && 'page' in newFilters) {
newFilters.page = '1';
}
return newFilters;
}
// index.tsx
const [filters, setFilters] = React.useState({page: 1, order: 'desc'});
setFilters(prevState => onFilterChange(prevState, 'statuses', '', true)); // error
上面最后一行代碼的錯誤是：Type 'Record<string, any>' is missing the following properties from type '{ page: number; 順序：字串；}'：頁面，順序
我也試過 T extends Record<string, any> 但這段代碼有錯誤：
newFilters[fieldName] = value;
型別字串不能用于索引型別 T。
感謝任何指標。謝謝
uj5u.com熱心網友回復：
這個答案的問題是，如果您斷言型別，您將無法訪問filters.statuses稍后的值。
您必須提前輸入 useState
const [filters, setFilters] = React.useState<
{page: number; order: string; statuses: string}
>({page: 1, order: 'desc'});
并將您的功能更改為通用
//Note this generic only extends page, since this is the only
//value we need guranteed, and access directly with the line below
export function onFilterChange<T extends { page: string }>(
prevState: T,
fieldName: keyof T,
value: T[typeof fieldName],
isDelete = false
): T {
const newFilters: T = { ...prevState };
if (isDelete) {
delete newFilters[fieldName];
} else {
newFilters[fieldName] = value;
}
if (fieldName !== 'page' && 'page' in newFilters) {
newFilters.page = '1'; //Here is why T needs to extend {page: string}
}
return newFilters;
}
或者，如果您要設定很多欄位但不知道它們的型別，您可以使用索引訪問器
const [filters, setFilters] = React.useState<{
page: number;
order: string;
} & { [index: string]: string }>({page: 1, order: 'desc'});
我們必須在這里使用一個交集，否則，我們會得到一個錯誤Property 'page' of type 'number' is not assignable to 'string' index type 'string'.ts(2411)。
另請注意，TS 在此處捕獲您已經犯的錯誤，其中page值是您的 useState 中的一個數字，但在您的函式中使用將其重新分配為字串，我不知道這是否是故意的，但型別/修復為需要。
uj5u.com熱心網友回復：
您可以應用這樣的型別斷言：
// index.tsx
const [filters, setFilters] = React.useState({page: 1, order: 'desc'});
setFilters(prevState => onFilterChange(prevState, 'statuses', '', true) as typeof prevState); // Ok
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/449181.html
上一篇：型別特定的方法對于使用`some`指令回傳的var不可用
下一篇：如何創建一個帶有迭代器的結構？