具有嵌套對象的對象數組的打字稿接口

Question

我有這樣的對象數組：

export const EXAMPLE_CONFIG: IExampleConfig = [
 {
  urlPath: '/test/test',
  page: 'test',
  fields: {
   fullName: 'a',
   mobilePhoneNumber: 'b',
   emailAddress: 'c',
   .......
  }
 },
 {
  ... same as above
 },
]

我創建了一個這樣的界面：

export interface IExampleConfig {
  path: string;
  pageTitle: string;
  fields: { [key: string]: string };
}

它給了我錯誤：類型 '({ path: string; pageTitle: string; fields: { fullName: string; mobilePhoneNumber: string; emailAddress: string; emailIsOwn: string; mediasource: string; }; } | { path: string; pageTitle : string; fields: { ...; }; } | ... 7 more ... | { ...; })[]' 缺少類型 'IExampleConfig' 中的以下屬性：path、pageTitle、fields

Answer 1

而不是寫這個：

export interface IExampleConfig {
  path: string;
  pageTitle: string;
  fields: { [key: string]: string };
}

嘗試這個：

export interface IExampleConfig {
  path?: string;
  pageTitle?: string;
  fields?: { [key: string]?: string };
}

? 是一個打字稿符號，它標志着接口屬性是可選的

Answer 2

好像你的類型不對。

做這個：

export const EXAMPLE_CONFIG: IExampleConfig[]

而不是這個：

export const EXAMPLE_CONFIG: IExampleConfig

另外，如果您想讓界面可選，而不是將整個界面變為可選，您可以使用 Typescript 實用程序類型 - Partial。 它接收接口並根據使用情況將其轉換為可選接口。

宣言：

export interface IExampleConfig {
  path: string;
  pageTitle: string;
  fields: { [key: string]: string };
}

用法

let example: Partial<IExampleConfig> = { path: 'path/to/file' }

您可以在此處閱讀更多相關信息：[ https://www.typescriptlang.org/docs/handbook/utility-types.html#partialt][1]