如何为包含键/值对以及嵌套对象的对象/数组定义接口?

时间:2019-07-30 08:32:33

标签: typescript interface

我正在键入一个本地化库,我的目标是对其进行强类型化(因为它将在多个角度应用程序中重复使用),并且同时向后兼容,以便我们赢得不必重写所有现有的本地化文件。

但是,这些本地化文件的结构让我有些头疼。例如:

{
  'any-random-key': 'This is a string',
  'another-random-key': {
    'random-key': 'This is a string'
  },
  'yet-another-random-key': {
    'random-key-2': 'This is a string',
    'random-key-3': {
      'random-key-4': 'This is a string',
      'random-key-5': {
        'random-key-6': 'This is a string'
      }
    }
  },
  'and-yet-another-random-key': {
    'random-key-6': {
      'random-key-7': {
        'random-key-8': 'This is a string'
      },
      'random-key-9': 'This is a string'
    }
  }
}

现在-我想我可以说该服务接受translations: anytranslations: object-但这对我来说有点太随意了(没有双关语)。

所以我尝试使用两个不同的接口:

export interface ITranslation {
  [s: string]: string;
}

export interface ITranslations {
  [s: string]: ITranslation;
}

然而,在any-random-key上这样说失败:Type 'string' is not assignable to type 'ITranslation'

所以我调整了ITranslations接口,使其变为

export interface ITranslations {
  [s: string]: ITranslation | string;
}

解决了上述错误,但在'and-yet-another-random-key'上引入了一个新错误,说Property ''and-yet-another-random-key'' is incompatible with index signature.

在这一点上,我有些困惑。我试图实现的目标(对旧结构的强类型输入)根本就不合理吗?

2 个答案:

答案 0 :(得分:2)

对于任意嵌套级别(换句话说,您的数据对象可以具有所需的任意深度),您可以像这样简单地自引用接口:

/** @interface */
export interface ITranslations {
  [s: string]: ITranslations | string;
}

See the above example on TypeScript playground


如果您只想允许3级深度嵌套,则界面必须冗长:TypeScript不允许您定义“深度”的方式(即嵌套程度):

/** @interface */
export interface ITranslations<T = string> {
  [s: string]: T | string;
}

/** @type */
export type ITranslationsMax3Levels = ITranslations<ITranslations<ITranslations<ITranslations>>>;

const data: ITranslationsMax3Levels = { ... }

See the above example on TypeScript playground

答案 1 :(得分:0)

似乎解决方案比我不敢希望的要简单:

export interface ITranslations {
  [s: string]: ITranslations | ITranslation | string;
}