CODEWITHSUNDEEP
javascripttypescriptinterface
curious
curious

Reputation: 87

Interface in typescript and it's conversion into Javascript

Is it possible to convert interface of typescript into Javascript. If yes then how to convert the below mentioned typescript code into Javascript.

interface xyz{
  something? : string, 
  somethingStyle? : Textstyle
}

Upvotes: 1

Views: 1560

Answers (2)

casr
casr

Reputation: 1236

Although your question does not state this, I am assuming that you would like to convert the compile time check to a runtime one in some automatic way. With that in mind I have found these notes that I will use as a basis for this answer.

Starting with your example and embellishing what Textstyle might be, we create xyz.ts:

interface Textstyle {
  bold: boolean;
  font: string;
}

export interface xyz {
  something?: string;
  somethingStyle?: Textstyle;
}

then install the rest of the dependencies for our example (below is a shell session):

$ echo '{"private":true}' >package.json
$ npm install --save-dev typescript @tsconfig/recommended ts-json-schema-generator
$ echo '{"extends":"@tsconfig/recommended/tsconfig.json"}' >tsconfig.json
$ npx ts-json-schema-generator --path 'xyz.ts' >xyz_schema.json

If we look at the output from ts-json-schema-generator in xyz_schema.json we find:

{
  "$ref": "#/definitions/xyz",
  "$schema": "http://json-schema.org/draft-07/schema#",
  "definitions": {
    "xyz": {
      "additionalProperties": false,
      "properties": {
        "something": {
          "type": "string"
        },
        "somethingStyle": {
          "additionalProperties": false,
          "properties": {
            "bold": {
              "type": "boolean"
            },
            "font": {
              "type": "string"
            }
          },
          "required": [
            "bold",
            "font"
          ],
          "type": "object"
        }
      },
      "type": "object"
    }
  }
}

As JSON schema is a defined format we can use a number of tools to validate our objects against it. Here is something I put together with Ajv:

const Ajv = require("ajv");
const schema = require("./xyz_schema.json");

const ajv = new Ajv();
const validate = ajv.compile(schema);

const x1 = {
  something: "hello world",
  somethingStyle: {
    bold: true,
    font: "comic sans",
  },
};

const x2 = {
  wibbles: "wobble",
};

const testCases = [x1, x2];

testCases.forEach((x, i) => {
  const valid = validate(x);
  if (valid) {
    console.log(`test case ${i} is valid`);
  } else {
    console.error(`test case ${i} is invalid`);
    console.error(validate.errors);
  }
});

Which outputs:

test case 0 is valid
test case 1 is invalid
[
  {
    instancePath: '',
    schemaPath: '#/definitions/xyz/additionalProperties',
    keyword: 'additionalProperties',
    params: { additionalProperty: 'wibbles' },
    message: 'must NOT have additional properties'
  }
]

Upvotes: 1

funkizer
funkizer

Reputation: 4897

No, interfaces don't exist in Javascript at all. They are only for the compiler.

Upvotes: 1

Related Questions