好的，我知道標題可能有點混亂，所以讓我解釋一下。
我有以下介面和一個陣列Items[]：
interface Items {
step: number;
keyName: string;
value: string;
}
interface ReturnData {
foo: string;
bar: string;
baz: string;
}
const items: Items[] = [
{ step: 1, keyName: 'foo', value: 'fooVal' },
{ step: 2, keyName: 'bar', value: 'barVal' },
{ step: 3, keyName: 'baz', value: 'bazVal' },
];
現在想象一下，我想要一個接受Items[]作為引數的函式，回圈遍歷items, 并為每個專案分配一個鍵為keyName和值為 的value新屬性給型別為 的新物件ReturnData，然后它最終將該物件作為承諾回傳。
出于演示目的，我在setInterval這里使用，但同樣適用于 afor loop或其他方法。
const myFunc = (items: Items[]): Promise<ReturnData> => {
let index = 0;
let returnData: ReturnData = { foo: '', bar: '', baz: '' };
return new Promise(resolve => {
const interval = setInterval(() => {
/*
at index 0: items[index].keyName = 'foo' and items[index].value = 'fooVal'
at index 1: items[index].keyName = 'bar' and items[index].value = 'barVal'
at index 2: items[index].keyName = 'baz' and items[index].value = 'bazVal'
*/
returnData[items[index].keyName] = items[index]?.value;
if (items[index]?.step === items.length) {
clearInterval(interval);
resolve(returnData);
}
else {
index = 1;
}
}, 250);
})
}
(async () => {
const myResult = await myFunc(items);
console.log('myResult value is:', myResult);
/* myResult value is: { foo: 'fooVal', bar: 'barVal', baz: 'bazVal' } */
})();
在普通的 javascript 中，此函式將正常運行myResult并按預期回傳。但是在 Typescript 中，當我嘗試returnData在我的setInterval.
Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'ReturnData'.
No index signature with a parameter of type 'string' was found on type 'ReturnData'.ts(7053)
和
Object is possibly 'undefined'.ts(2532)
我最近開始學習 Typescript，所以我的問題是，我如何讓 Typescript 理解這里發生的事情，以便它不會拋出錯誤。我知道一個快速而骯臟的技巧是為any我的returnData物件分配型別以消除錯誤，但如果這是正確的術語，那將不是完全“型別安全”。什么是讓打字稿快樂的更好方法？
TS Playground 上的完整代碼示例
uj5u.com熱心網友回復：
更新這一行應該可以解決您的問題：
問題是打字稿無法將字串型別的 keyName 關聯為 ReturnData 的鍵。
interface Items {
step: number;
keyName: keyof ReturnData; // only if you expect that ReturnData keyName will always belong to ReturnData
value: string;
}
打字稿 或
returnData[(items[index]!.keyName) as keyof ReturnData] = items[index]?.value ?? '';
打字稿游樂場
uj5u.com熱心網友回復：
只需使用keyof運算子更改您的界面即可。
interface Items {
step: number;
keyName: keyof ReturnData;
value: string;
}
keyName 現在是： "foo" | “酒吧” | “巴茲”
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/368247.html
標籤：javascript 打字稿
上一篇：在字串中添加HTML物體符號
下一篇：無法用??轉換JS到TS