8 days ago

一个 Typescript 技巧提取字符串模板中的变量，实现注入类型安全

比如欢迎语：

const text = `hello, {name}! Welcome to {website}!`;

提取出占位变量 name 和 website，方便注入。可以使用 Typescript 的类型迭代 + infer：

type ExtractPlaceholders<T extends string> =
  T extends `${string}{${infer Placeholder}}${infer Rest}`
    ? Placeholder | ExtractPlaceholders<Rest>
    : never;

上面利用首次 infer 得到第一个结果 Placeholder 和后续的字付串 Rest，对 Rest 进行迭代就得到全部的 Placeholder。具体使用 ⬇️

const text = `hello, {name}! Welcome to {website}!`;
type Placeholders = ExtractPlaceholders<typeof text>;
type Params = Record<Placeholders, string>;

const params: Params = { name: 'HD_Superman', website: 'HackerTalk.net' };

这样 params 就类型安全了，如果字符串模板改变，Params 会自动改变，提示报错。

35 views