将 JS 转换为 TypeScript：类型“CSSRule”上不存在属性“selectorText”

Question

我正在尝试将我在这里找到的一些 JS 转换为 Typescript

http://bl.ocks.org/Rokotyan/0556f8facbaf344507cdc45dc3622177

部分问题在于这段代码

// Extract CSS Rules
    var extractedCSSText = "";
    for (var i = 0; i < document.styleSheets.length; i++) {
        var s = document.styleSheets[i];

        try {
            if(!s.cssRules) continue;
        } catch( e ) {
                if(e.name !== 'SecurityError') throw e; // for Firefox
                continue;
            }

        var cssRules = s.cssRules;
        for (var r = 0; r < cssRules.length; r++) {
            if ( contains( cssRules[r].selectorText, selectorTextArr ) )
                extractedCSSText += cssRules[r].cssText;
        }
    }

我尝试以这种方式将其转换为 Typescript：

// Extract CSS Rules
let extractedCSSText = '';
for (let i = 0; i < document.styleSheets.length; i++) {
    const s = <CSSStyleSheet> document.styleSheets[i];

    try {
        if (!s.cssRules) {
            continue;
        }
    } catch (e) {
        if (e.name !== 'SecurityError') {
            throw e; // for Firefox
        }
        continue;

    }

    const cssRules = s.cssRules;
    for (let r = 0; r < cssRules.length; r++) {
        if (contains(cssRules[r].selectorText, selectorTextArr)) {
            extractedCSSText += cssRules[r].cssText;
        }
    }
}

我收到的错误是

类型“CSSRule”上不存在属性“selectorText”。

不知道如何解决这个问题。有人有什么想法吗？

谢谢，乌韦

Answer 1

问题在于 CSS 规范的定义使得并非所有规则都一定是样式。

您必须确保 是CSSRulea CSSStyleRule（因为可以有不同类型的 CSS 规则，但它们不是样式）。也可以是导入规则、关键帧规则、媒体规则等。

考虑一下关键帧规则，关键帧没有选择器，因此您不会拥有selectorText该规则的属性。所以，错误是 TypeScript 做了它应该做的事情。确保您不会访问无效的属性。

尝试比较CSStyleRule属性和CSSMediaRule属性。他们是不同的。

尝试这个：

 const cssRules = s.cssRules;
 for (let r = 0; r < cssRules.length; r++) {
    const rule = cssRules[r];
    if (!( rule instanceof CSSStyleRule)) {
        continue;
    }
    if (contains(rule.selectorText, selectorTextArr)) {
        extractedCSSText += rule.cssText;
    }
}

下面是一个示例，简单地转换会导致稍后抛出错误，因为selectorText可能是未定义的： https: //codepen.io/anon/pen/EoBJeM（请参阅控制台）。尽可能避免铸造。