TypeScript4.1新增模板字符串类型

r囧r小猫 2022-12-23 06:44 130阅读 0赞

TypeScript支持字符串字面量类型（String literal types），用以限定只有指定的字符串才被允许，使用起来和枚举类型很相似，但前者更轻量一些。

function setVerticalAlignment(pos: "top" | "middle" | "bottom") { 
        // ...
    }
    
    setVerticalAlignment("middel");
    // ~~~~~~~~
    // error: Argument of type '"middel"' is not assignable to
    // parameter of type '"top" | "middle" | "bottom"'.

TypeScript 4.1 引入了模板字符串类型，简单来说，就是你可以这样定义类型

type World = "world";
    
    type Greeting = `hello ${ World}`;
    // same as
    // type Greeting = "hello world";

这个功能在某个场景下是非常有用的。比如以下是element-ui的tooltip组件，那么假设有这样一个函数设置tooltip的位置：`setToolTipPosition(position)`，他接受一个表述位置的字符串参数。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzQ1OTg2Ng_size_16_color_FFFFFF_t_70]  
比如参数枚举值如下：

如果仍然按照之前全量的写法，就略显繁琐，尤其是当值有更多的时候。此时模板字符串类型就派上用场了。假设我们定义如下的字符串类型

type VerticalAlignment = "top" | "middle" | "bottom";
    type HorizontalAlignment = "left" | "center" | "right";

那么就可以这样使用：

declare function setToolTipPosition(value: `${ VerticalAlignment}-${ HorizontalAlignment}`): void;
    
    setToolTipPosition("top-left");   // ok!
    setToolTipPosition("top-middel"); // error!
    setToolTipPosition("top-pot");    // error!

怎么样，这样看起来是不是就很简洁。

更多内容请参考官方文档

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzQ1OTg2Ng_size_16_color_FFFFFF_t_70]: /images/20221120/8c218ea04802470cb83521f69adea08d.png