keyof 列表为以逗号分隔的字符串

Question

我有这个例子

class Test {
  firstName: string;
  lastName:string;

}

现在我想要打字稿来验证这一点

let text = "firstName:aName lastName:bName"

我知道

keyof

，但我想把它继续下去，当我在字符串中写

fi

时，它将能够呈现

firstName

，并且与

lastName

相同，因为它被空格或逗号分隔。

这在打字稿中可能吗？

我正在构建一个库，一个

react-native

库，可以使样式设计更容易。

在

react-native

中你将风格写为

style={{color:"black", fontSize:12 etc}}

我正在构建一个库，它将可以缩短样式并使其更容易编写，因此它会是

css="co:black fos:12 bac:white etc.."

问题是我希望打字稿能够验证这一点，并且还能够包含用户主题中包含的一些随机用户类

css="co:black fos:12 bac:white container etc.."

container 是存在于用户主题中的用户定义样式，因此打字稿不需要验证它。仅验证预定义为

col

或

color

的名称

我可以构建一个动态生成类型的 cli，但我不知道如何，ts 部分如何而不是 cli

Answer 1

您可以拆分字符串并验证其各个部分，如果子字符串的格式为

key:value

，则根据您的验证对象验证密钥：

游乐场

type Split<T extends string, D extends string> = 
  T extends `${infer A}${D}${infer B}` ? [A, ...Split<B, D>] : [T]

type User = {
  firstName: string,
  lastName: string
}

type Validate<T extends object, S extends string> = (Split<Split<S, ' '>[number], ':'> extends infer A ? 
  A extends [infer B, string] ? B extends keyof T ? true : false : A extends [string] ? true : false : false) extends true ? S : never

function CSSMaker<T extends Record<string, string>>() {
  return <S extends string>(str: Validate<T, S>) => {
    return str;
  };
}

const maker = CSSMaker<User>();

const css = maker('firstName:aName lastName:bName container');
const css2 = maker('firstName2:aName lastName:bName container'); // error, invalid firstName2 key