[TypeScript] Collect Related Strings in a String Enum in TypeScript

As of TypeScript 2.4, it is now possible to define string enums, or more precisely, enums with string members. Just like any other numeric enum, string enums can be made constant using the const modifier so that they disappear entirely from the generated JavaScript; in this case, all enum values will be inlined into the output.json

 

For example,we  have the code:api

fetch("https://swapi.co/api/people/1/", { headers: { Accept: 'application/json' } }) .then((res) => res.json()) .then(response => { console.log(response.name) });

 

We want to replace 'application/json' to use Typescript enum.app

enum MediaTypes { JSON = "application/json" } fetch("https://swapi.co/api/people/1/", { headers: { Accept: MediaTypes.JSON } }) .then((res) => res.json()) .then(response => { console.log(response.name) });

 

From the compiled code, we can see the output:fetch

var MediaTypes; (function (MediaTypes) { MediaTypes["JSON"] = "application/json"; })(MediaTypes || (MediaTypes = {})); fetch("https://swapi.co/api/people/1/", { headers: { Accept: MediaTypes.JSON } }) .then(function (res) { return res.json(); }) .then(function (response) { console.log(response.name); });

The compile code, it add a IIFE define and set JSON code to 'application/json'.this

 

Sometime, we don't want this meta code goes into production code, the way to do this is add "const":spa

const enum MediaTypes { JSON = "application/json" } /*compiled code**/ fetch("https://swapi.co/api/people/1/", { headers: { Accept: "application/json" /* JSON */ } }) .then(function (res) { return res.json(); }) .then(function (response) { console.log(response.name); });

As we can see, the output code doesn't have IIFE anymore, the code is much smaller.code

 

You can get reverse mapping by using number:blog

enum Port { NUM = 412 } /**compiled code*/ (function (Port) { Port[Port["NUM"] = 412] = "NUM"; })(Port || (Port = {}));

 

Last thing, if you really want to use "const" keyword but still want to keep IIFE meta code, you can set up in tsconfig.json:ip

{ "preserveConstEnums": true }
相關文章
相關標籤/搜索