[英]TypeScript: Create interface based on object
I want to create file factory (eg JSON with translations in my case).我想创建文件工厂(例如 JSON 与我的情况下的翻译)。
{
"field": "",
"group": {
"field_1": "",
"field_2": ""
},
...
}
I wish to create a template JSON with all fields that are present in my translations, and then instantiate it with some default values for each locale to allow my application not to miss any translation fields.我希望创建一个模板 JSON,其中包含我的翻译中存在的所有字段,然后使用每个语言环境的一些默认值对其进行实例化,以使我的应用程序不会错过任何翻译字段。 Well, that is pretty simple, at output I have couple of files (based on count of locales), named
<locale>.json
, eg en.json
with some content like this:好吧,这很简单,在 output 我有几个文件(基于语言环境的数量),名为
<locale>.json
,例如en.json
,其中包含以下内容:
{
"field": "en:field",
"group": {
"field_1": "en:group.field_1",
"field_2": "en:group.field_2",
},
...
}
Now I want to create a type or interface based on my JSON template to allow my translation fields to be displayed in quick suggests of my IDE (eg VS Code).现在我想基于我的 JSON 模板创建一个类型或接口,以允许我的翻译字段显示在我的 IDE(例如 VS Code)的快速建议中。
Is there any possibilities to do this in convenient way?有没有可能以方便的方式做到这一点? I know that I can dynamically create a
.ts
file with exported interface, but this is not so good because all ts
syntax will be provided through string, so there could be some mistakes during creation.我知道我可以动态创建一个导出接口的
.ts
文件,但这不是很好,因为所有ts
语法都将通过字符串提供,因此在创建过程中可能会出现一些错误。 May be there is any legal ways?可能有什么合法的途径吗?
To be clear, I want to get an interface like this说清楚,我想得到这样的界面
interface IMyCoolInterface {
field: string,
group: {
field_1: string,
field_2: string,
},
...
}
You could use the --resolveJsonModule
compiler option introduced in TypeScript 2.9.您可以使用 TypeScript 2.9 中引入的
--resolveJsonModule
编译器选项。 Then you could import the template file as a module:然后您可以将模板文件作为模块导入:
import * as translationTemplate from 'template.json';
and define a type for it using a typeof
type query :并使用
typeof
类型查询为其定义类型:
type Translation = typeof translationTemplate;
If all goes well, if you declare a variable to be of type Translation
you should get IDE hints:如果一切顺利,如果您将变量声明为
Translation
类型,您应该会得到 IDE 提示:
declare const t: Translation; // or whatever
t.field; // hinted at you
t.group.field_1; // likewise
Hope that helps.希望有帮助。 Good luck!
祝你好运!
I think that a good solution will be:我认为一个好的解决方案是:
An example of a simple implementation would be:一个简单实现的例子是:
interface IGroup{
field_1:string;
field_2:string;
}
interface IMyCoolInterface{
field:string;
group:IGroup;
}
if you want a JSON Array of groups:如果你想要一个 JSON 数组:
interface IMyCoolInterface{
field:string;
groups:Array<IGroup>;
}
Now you must implement your interface like the following: First implement the IGroup interface:现在你必须像下面这样实现你的接口:首先实现 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;
}
}
Now implement the IMyCoolInterface (supposing that you want a JSON Array of groups):现在实现 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)
}
}
This is a simple way to deal with JSON using interfaces.这是使用接口处理 JSON 的一种简单方法。
Yes it is possible in typescript,是的,在打字稿中是可能的,
type Tob = typeof ob;
var ob = {
a: 1,
b: 'string',
};
you don't need any extra flag, still I will paste below my tsconfig.json你不需要任何额外的标志,我仍然会粘贴在我的 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"
]
}
There are several IDE plugins based on the json2ts library that allow you to paste in a JSON object and get back a Typescript interface for that object. There are several IDE plugins based on the json2ts library that allow you to paste in a JSON object and get back a Typescript interface for that object.
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.