[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.
For example,we have the code:
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.
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:
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'.
Sometime, we don't want this meta code goes into production code, the way to do this is add "const":
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.
You can get reverse mapping by using number:
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:
{ "preserveConstEnums": true }
相关文章
- long转string java_java中Long类型转换为String类型的两种方法及区别
- Typescript: Getting Started
- Getting Started: Ionic + Capacitor + React + Typescript + Android
- TypeScript中泛型及泛型函数、泛型类、泛型接口,泛型约束,一文读懂
- TypeScript学习笔记(四)—— TypeScript提高
- 「使用 webpack 5 从0到1搭建React+TypeScript 项目环境」2. 集成 css、less 与 sass
- 「使用 webpack 5 从0到1搭建React + TypeScript 项目环境」3. 资源模块
- integer转string java_Integer转换为String类型[通俗易懂]
- TypeScript系列教程《单例》
- 解释器模式举例-TypeScript 类型体操天花板,用类型运算写一个 Lisp 解释器
- Laravel + Vue 3(Vite、TypeScript)SPA 设置
- 一道 3 层的 TypeScript 面试题,你能答到第几层?
- 关于 2022 年 JavaScript 生态调查报告:TypeScript持续主导,Vite和Tauri大受欢迎
- 如何发布一个 TypeScript 编写的 npm 包
- 开心档之TypeScript 变量声明
- C#中String与string的区别分析