將屬性添加到接口打字稿

Question

所以我正在開發一個 Angular 項目並創建了這個界面來顯示一些數據：

export interface UserData {
  name: string,
  vorname: string,
  strasse: string,
  plz: string,
  ort: string,
  handynummer: string,
  telefonnummer: string,
}

如果我想在我的數據庫中顯示添加更多數據，我必須將這些數據點添加到這個接口，有沒有辦法動態創建接口，或者在組件構造函數中創建它？

Answer 1

您不能動態更改/創建接口，因為它只是一個靜態值，用於 Typescript 編譯器的結構類型檢查。

但是，如果您需要該接口上的所有屬性和一個附加屬性，則可以執行以下操作：

使用extends

您還可以使用extends為這種特定情況創建一個新接口。

interface ExtendedUserData extends UserData {
 someOtherProperty: string
}

使用Intersection types

這可能接近於您正在尋找的那種“動態”行為。 假設您有一個屬性，該屬性需要是一個具有UserData的所有屬性和一個額外的extraProperty的對象。

你可以這樣輸入。

fancyUserData: UserData & { extraProperty: string }

使用交叉點類型，您可以臨時添加屬性。

在 Angular 中的用法

為了在 Angular 中使用這些類型，您可以在組件上創建一個看起來像這樣的泛型類型：

@Component({
  selector: 'example'
  template: `<h1>example</h1>`
})
export class ExampleComponent<T extends UserData> {}

現在您可以擁有 T 類型的數據，它必須具有所有UserData屬性，然后添加您想要的任何其他屬性。

所以簡而言之，不，你不能真正構建動態類型，而且絕對不能在組件的構造函數中。 但是，您可以根據需要使用我上面提到的方法來擴展和塑造您的界面。

Answer 2

要添加屬性，您可以再次定義相同的接口並添加其他屬性：

interface SquareConfig {
  color?: string;
  width?: number;
}

interface SquareConfig {
  name: string;
}

let c: SquareConfig = {name:'jack', color:'blue'}
console.log(c) // {"name": "jack", "color": "blue"}