zoukankan      html  css  js  c++  java
  • [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
    }
  • 相关阅读:
    IOS证书的申请和使用
    团队开发中如何共用证书
    IOS 开发文件操作——NSFileManager
    RxJava中的doOnSubscribe默认运行线程分析
    XMPP协议实现即时通讯底层书写 (一)--从RFC6121阅读開始
    ant 打批量渠道包,第三方项目作为library打包出错的问题
    hdu5289 2015多校联合第一场1002 Assignment
    【一步步学OpenGL 21】 -《聚光灯光源》
    Images.xcassets 的简单使用
    网易 2016 实习研发project师 3道 编程题
  • 原文地址:https://www.cnblogs.com/Answer1215/p/7801172.html
Copyright © 2011-2022 走看看