1

举个例子，这个问题很容易理解。我想为https://npmjs.com/package/classnames实现一个严格类型保护的包装器，以检查我们的应用程序使用的 Tailwind 类名。

到目前为止，最接近的解决方案是这个例子：

// Credits to https://dev.to/virtualkirill/make-your-css-safer-by-type-checking-tailwind-css-classes-2l14
type Colors = "red" | "purple" | "blue" | "green";
type Luminance = 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;
type BgColor = `bg-${Colors}-${Luminance}`;
type Layout = "block" | "w-1" | "h-1";
type TailwindClass = BgColor | Layout;

type ValidTailwindClassSeparatedBySpace<S> = S extends `${infer Class} ${infer Rest}`
  ? Class extends TailwindClass
    ? `${Class} ${ValidTailwindClassSeparatedBySpace<Rest>}`
    : never
  : S extends `${infer Class}`
  ? Class extends TailwindClass
    ? S
    : never
  : never;

type ValidTailwind<T> = T extends ValidTailwindClassSeparatedBySpace<T> ? T : never;
type ClassNames<R> = keyof R extends ValidTailwind<keyof R> ? R : never;

function classNamesWrapper<R>(obj: ClassNames<R>): string {
  // All arguments would be passed to npmjs.com/package/classnames
  // For the example, just return empty string.
  return '';
}

classNamesWrapper({ 
  "bg-red-100": true, 
  "block w-1": true 
});

classNamesWrapper({ 
  "bad-class": false,  // only this key should be invalid
  "block h-1": true
});

此处提供的示例代码：游乐场链接

这可行，但错误与对象的特定键无关，而是与所有对象键相关。TypeScript 也会突出显示"block h-1"相同的错误：Type 'boolean' is not assignable to type 'never'..

如何进行输入以便 TS 能够检测到只有“bad-class”键是无效的 Tailwind 类字符串，但不能将“block h-1”突出显示为无效？

4

1 回答 1

2

要解决您看到的特定问题，我将更ClassNames改为：

type ClassNames<R> = { [K in keyof R]: K extends ValidTailwind<K> ? R[K] : never };

它不ClassNames<R>返回Ror never，而是将每个属性名称映射K到or （已经存在的属性）R或。因此，错误应该只出现在有问题的属性上：R[K]never

classNamesWrapper({
  "bad-class": false,  // error!
  //~~~~~~~~~ <-- Type 'boolean' is not assignable to type 'never'
  "block h-1": true // okay
});

（请注意，我没有花任何时间查看示例代码的其余部分，看看它是否合理；我已经特别关注所提出的问题。）

Playground 代码链接

于 2021-01-15T14:44:23.430 回答