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

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)，他接受一个表述位置的字符串参数。

比如参数枚举值如下：

//   | "top-left"    | "top-center"    | "top-right"
//   | "middle-left" | "middle-center" | "middle-right"
//   | "bottom-left" | "bottom-center" | "bottom-right"

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

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! 

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

更多内容请参考官方文档