TypeScript: Create interface based on object

Question

I want to create file factory (eg JSON with translations in my case).

{
    "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. 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:

{
    "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).

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. 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,
    },
    ...
}

Answer 1

You could use the --resolveJsonModule compiler option introduced in TypeScript 2.9. 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 :

type Translation = typeof translationTemplate;

If all goes well, if you declare a variable to be of type Translation you should get IDE hints:

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

Hope that helps. Good luck!

Answer 2

I think that a good solution will be:

• First declare an interface (or interfaces) depending on your JSON data structure
• Second you can implement the interface and even add some methods if you want.

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:

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

Now you must implement your interface like the following: First implement the IGroup interface:

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):

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.

Answer 3

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

// 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"
  ]
}

Answer 4

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.