如何检查字符串是否是Interface的属性之一？ （打字稿）

Question

var attributeStr = 'scaleX'

interface CSSTransformsAttr{
   scaleX: number,
   scaleY: number,
   skewX: number,
   skewY: number,
   translateX: number,
   translateY: number
}

如何检查attributeStr的值是否等于CSSTransformsAttr中的键？

我为什么要问这个？

我想用CSSStyleDeclaration扩展CSSTransformsAttr。 如果k是CSSTransformsAttr的{​​{1}}的键，我想做不同于第（1）行的操作。见下文。

'scaleX' | 'scaleY' | 'skewX' | 'skewY' | 'translateX' | 'translateY'

Answer 1

仅检查2, 3, 4, 5, 6, 7仅在编译时有效，而不在运行时有效。您需要将所有键存储在数组中，并检查其中是否存在您的值。这可以手动完成：

keyof

或者，您可以创建一个实现您的接口的“虚拟”对象，然后在其上调用Object.keys。

interface CSSMatrixTransforms{
   scaleX: number,
   scaleY: number,
   skewX: number,
   skewY: number,
   translateX: number,
   translateY: number
};
type CSSMatrixTransformsKey = keyof CSSMatrixTransforms;
const matrixKeys: CSSMatrixTransformsKey[] = [
   'scaleX',
   'scaleY',
   'skewX',
   'skewY',
   'translateX',
   'translateY'
];

最后，在代码中，检查interface CSSMatrixTransforms{ scaleX: number, scaleY: number, skewX: number, skewY: number, translateX: number, translateY: number } type CSSMatrixTransformsKey = keyof CSSMatrixTransforms; const dummy: CSSMatrixTransforms = { scaleX: 0, scaleY: 0, skewX: 0, skewY: 0, translateX: 0, translateY: 0 } const matrixKeys: CSSMatrixTransformsKey[] = Object.keys(dummy) as CSSMatrixTransformsKey[]; 是否存在于key数组中：

matrixKeys

也请检出this。

Answer 2

例如，使用keyof运算符

var attributeStr: keyof CSSMatrixTransforms = 'scaleX' // ok

var attributeStr: keyof CSSMatrixTransforms = 'scaleX1' // wrong