TypeScript：基于对象创建接口

Question

我想创建文件工厂（例如，在我的情况下为带有翻译的JSON）。

{
    "field": "",
    "group": {
        "field_1": "",
        "field_2": ""
    },
    ...
}

我希望创建一个模板JSON，其中包含翻译中存在的所有字段，然后使用每个语言环境的一些默认值实例化它，以使我的应用程序不会丢失任何翻译字段。嗯，这很简单，在输出时，我有几个文件（基于语言环境的数量），名为<locale>.json，例如en.json，内容如下：

{
    "field": "en:field",
    "group": {
        "field_1": "en:group.field_1",
        "field_2": "en:group.field_2",
    },
    ...
}

现在，我想基于JSON模板创建类型或接口，以使我的翻译字段以我的IDE的快速建议（例如VS代码）显示。

是否有可能以方便的方式执行此操作？我知道我可以使用导出的接口动态创建一个.ts文件，但这不是很好，因为所有ts语法都将通过字符串提供，因此在创建过程中可能会出现一些错误。可能有任何合法的方法吗？

要清楚，我想要一个这样的界面

interface IMyCoolInterface {
    field: string,
    group: {
        field_1: string,
        field_2: string,
    },
    ...
}

Answer 1

您可以使用TypeScript 2.9中引入的--resolveJsonModule compiler option。然后，您可以将模板文件作为模块导入：

import * as translationTemplate from 'template.json';

并使用typeof type query为其定义类型：

type Translation = typeof translationTemplate;

如果一切顺利，如果您将变量声明为Translation类型，则应该获得IDE提示：

declare const t: Translation; // or whatever
t.field; // hinted at you
t.group.field_1; // likewise

希望有帮助。祝好运！

Answer 2

我认为一个好的解决方案是：

• 首先根据您的JSON数据结构声明一个或多个接口
• 第二，您可以实现该接口，甚至可以根据需要添加一些方法。

一个简单的实现示例是：

interface IGroup{
 field_1:string;
 field_2:string;
}

interface IMyCoolInterface{
 field:string;
 group:IGroup;
}

如果要组的JSON数组：

interface IMyCoolInterface{
 field:string;
 groups:Array<IGroup>;
}

现在，您必须像下面那样实现您的接口： 首先实现IGroup接口：

class Group implements IGroup{
 field_1:string;
 field_2:string;
 construdtor(field_1:string,field_2:string)
 {
  this.field_1=field_1;
  this.field_2=field_2;
 }
}

现在实现IMyCoolInterface（假设您需要组的JSON数组）：

class MyCoolClass implements IMyCoolInterface
{
 field:string;
 groups:Array<IGroup>;
 constructor(field:string,groups?:Array<IGroup>)
 {
  this.field=field;
  this.groups=groups || [];
 }
 //add some methods
 addGroup(group:IGroup)
 {
  this.groups.push(group)
 }
}

这是使用接口处理JSON的简单方法。

Answer 3

是的，在打字稿中是可能的，

type Tob = typeof ob;

var ob = {
  a: 1,
  b: 'string',
};

你不需要任何额外的标志，我仍然会粘贴在我的 tsconfig.json 下方

// my tsconfig.json
{
  "compilerOptions": {
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "isolatedModules": true,
    "jsx": "react",
    "lib": ["es6"],
    "moduleResolution": "node",
    "noEmit": true,
    "strict": true,
    "target": "esnext"
  },
  "exclude": [
    "node_modules",
    "babel.config.js",
    "metro.config.js",
    "jest.config.js"
  ]
}