我想知道,是否可以使用 Angular 12 / Typescript 確保陣列中的所有物件都具有相同的屬性,而無需顯式宣告屬性(應該是通用的)。
這是我想要實作的示例:
// This should compile because all objects have the same properties
const correct = [
{firstname: 'Jack', lastname: 'Sanders'},
{firstname: 'Susanna', lastname: 'Marsaglia'},
{firstname: 'Walter', lastname: 'Walker'}
]
// This shouldn't compile because some object have different properties
const wrong = [
{firstname: 'Aline', lastname: 'Rose', phone: 'xxx-xxx-xx-xx'},
{firstname: 'Daniel', email: '[email protected]'},
{firstname: 'Louisa', email: '[email protected]'}
]
我能夠創建一個只允許 type 屬性的介面string,但我無法實作上面的示例。
export interface Data {
[keys: string]: string
}
更新(用例)
我需要在匯出資料的服務中進行此檢查。您應該能夠傳遞一個物件陣列,這些物件表示表中的行。
例如:
const data = [
{firstname: 'Jack', lastname: 'Sanders'},
{firstname: 'Susanna', lastname: 'Marsaglia'},
]
this.exportService.export(data);
此代碼將生成一個包含如下表格的檔案:
| 名 | 姓 |
|---|---|
| 杰克 | 桑德斯 |
| 蘇珊娜 | 馬薩利亞 |
The service should support any passed data, because it's used widely over our entire application. But to be sure that the service can export the data to a table, we need to ensure, that all passed objects have the same properties (e.g. columns).
uj5u.com熱心網友回復:
function sameKeys(input) {
if (!input || input.length === 0) return;
const keys = new Set(Object.keys(input[0]));
return input.every((item) => Object.keys(item).every((key) => keys.has(key)));
}
如果您想要編譯時檢查,那么在另一個答案中給出正確的型別定義是有意義的。但這只有在這些資料是硬編碼的情況下才有效。如果您從后端獲取它,它將無法作業,因為當代碼已經構建時型別會丟失,因為 javascript 沒有型別。
uj5u.com熱心網友回復:
您應該通過如下界面實作此目的
interface IStructure {
firstname: string;
lastname: string;
}
const correct: Array<IStructure> = [
{firstname: 'Jack', lastname: 'Sanders'},
{firstname: 'Susanna', lastname: 'Marsaglia'},
{firstname: 'Walter', lastname: 'Walker'}
];
//wrong will throw error
uj5u.com熱心網友回復:
const data = [
{firstname: 'Jack', lastname: 'Sanders'},
{firstname: 'Susanna', lastname: 'Marsaglia'},
{firstname: 'Walter', lastname: 'Walker'}
]
const dataReference : Required<typeof data[number]>[] = data
uj5u.com熱心網友回復:
您可以很好地使您的 exportservice 通用,即像這樣
class ExportService {
public export<T>(data: T[]) {
console.log(data);
}
}
或者您也可以{[key:string]:string}在匯出服務中用作元素型別
class ExportService {
public export(data: {[key:string]:string}[]) {
console.log(data);
}
}
這不會妨礙您data正確定義您的型別。
const data: { firstname: string, lastname: string}[] = [
{ firstname: "john", lastname: "foo"},
{ firstname: "jim", lastname: "bar"}
];
this.exportservice.export(data);
另見這個小提琴
轉載請註明出處,本文鏈接:https://www.uj5u.com/net/426083.html
標籤:javascript angular typescript generics types
上一篇:將文本檔案連接到一個字串
