javascript - 如何检查字符串是否是接口(interface)的属性之一？ ( typescript )

Question

var attributeStr = 'scaleX'

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

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

我为什么要问这个？

我想用 CSSTransformsAttr 扩展 CSSStyleDeclaration。如果 k 是 CSSTransformsAttr 的键，即 'scaleX' | '规模' | '偏斜' | '倾斜' | '翻译X' | 'translateY'，我想做一些与第 (1) 行不同的事情。见下文。

function setStyleAttributes(attrs: { [ k in keyof ( CSSStyleDeclaration & CSSTransformsAttr )]?: any }): void {
    if (attrs !== undefined) {
            Object.keys(attrs).forEach((key: string) => {
                /// how to check if 'key' is from the CSSTransfomsAttr not CSSStyleDeclaration ?
                /// ...
            this.htmlElement.style[key]=  attrs[key]; // (1) if key in keyof CSSStyleDeclaration
        });
    }
}

Answer 1

简单地检查 keyof 只会在编译时起作用，而不是运行时。您需要将所有键存储在一个数组中并检查您的值是否存在于其中。这可以手动完成:

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)的“虚拟”对象，然后调用 Object.keys在上面。

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 数组中:

function setStyleAttributes(attrs: { [ k in keyof ( CSSStyleDeclaration & CSSTransformsAttr )]?: any }): void {
    if (attrs !== undefined) {
            Object.keys(attrs).forEach((key: string) => {
                if(matrixKeys.includes(key)) {
                    this.htmlElement.style[key] = attrs[key];
                }

        });
    }
}

检查 this也出来了。