在 typescript 中创建字符串文字联合类型时替换字符串

Question

我有一个字符串文字联合类型，如下所示：

type LowerCaseNames = 'youku-frame' | 'youku' | 'mini-program' | 'tiktok-frame';

这只是一个示例，因为我的联合类型是 100 多个案例的列表。

我需要的是一种新类型，其中我将具有以下类型的“值”：

type UpperCaseNames = 'YOUKU_FRAME' | 'YOUKU' | 'MINI_PROGRAM' | 'TIKTOK_FRAME';

到目前为止，我使用的是 TypeScript 的 Uppercase 类型，以便将其大写。

type UpperCaseNames = `${Uppercase<LowerCaseNames>}`;

这返回的是大写联合类型，但我仍然在其中-而不是_ 。 有没有办法让我创建一个我可以像这样使用的类型${Replace<Uppercase<LowerCaseNames>>}以便用_替换- ？ 我正在使用 Typescript v4.4.4。

Answer 1

您可以编写一个自定义Replace<T, S, D>实用程序类型，它采用字符串文字类型T并生成一个新版本，其中出现的源字符串S被替换为目标字符串D 。 这是一种方法：

type Replace<T extends string, S extends string, D extends string,
  A extends string = ""> = T extends `${infer L}${S}${infer R}` ?
  Replace<R, S, D, `${A}${L}${D}`> : `${A}${T}`

这是一个尾递归模板文字类型，它使用类型参数A来累积结果。 如果T的形式为L + S + R对于一些（可能为空）“左部分” L和一些（可能为空）“右部分” R ，那么你想按原样使用L ，用D替换S ，并且然后继续对R进行Replace 。 否则， T不包含S ，您只想按原样使用T

---

让我们试试看：

type LowerCaseNames = 'youku-frame' | 'youku' | 'mini-program' | 'tiktok-frame';


type UpperCaseNames = Uppercase<Replace<LowerCaseNames, "-", "_">>
// type UpperCaseNames = "YOUKU" | "YOUKU_FRAME" | "MINI_PROGRAM" | "TIKTOK_FRAME"

看起来挺好的！

游乐场代码链接

Answer 2

这是我们如何为单一类型执行此操作的示例

type B = 'youku-frame';
type Replace<S extends string> = S extends `${infer A}-${infer B}`
  ? `${Uppercase<A>}_${Uppercase<B>}`
  : ${Uppercase<B>};

type C = Replace<B>;

参考

1. https://github.com/microsoft/TypeScript/pull/40336
2. https://github.com/microsoft/TypeScript/pull/40580#issuecomment-731124971
3. https://devblogs.microsoft.com/typescript/announcing-typescript-4-1-beta/#template-literal-types