我看谁还不会这几个 TypeScript 高级技巧

typescript 作为前端使用最多的框架之一，快来看看下面这些隐藏的高级技巧吧

Mapped Types

当我们在声明类型的时候，可以借助 Mapped Types 的方式对基础类进行扩展，这样就可以减少定义重复的基础类型

type Ev = {
   
    add: string;
    remove: string;
    move: string;
}

type OnEvents = {
   
    [k in keyof Ev as `on${
     Capitalize<Exclude<k, 'move'>>}`]: () => void
}

const userActions: OnEvents = {
   
    onAdd: () => {
    },
    onRemove: () => {
    },
}

上面的类型声明利用了 keyof 对原始的 基础类型 Ev 进行遍历形成行的 OnEvents 类型，这个类型的 key 的成员就是 Ev 类型中的 基础类型，同时这里使用了 as 对 重新的 map 的类型进行新的定义

as `on${
     Capitalize<Exclude<k, 'move'>>}`

我们可以将 key 的声明单独拎出来看，上面使用了 Exclude 将 move 字段排除，并且通过 Capitalize 工具类将剩余的 key 转换成 onAdd 和 onRemove

Template literals

Template literals 模板字面类型通过 模板字符串语法，借以字符串字面类型为基础，并能通过联合扩展到许多字符串

type GapType = "margin" | "padding"
type GapDirection = "top" | "right" | "bottom" | "left"

type GapCss = `${
     GapType}-${
     GapDirection}`

type SizeType = 'rem' | 'px' | '%';
type SizeCss = `${
     number}${
     SizeType}