javascript - 将 JS 转换为 TypeScript : Property 'selectorText' does not exist on type 'CSSRule'

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 规范的定义使得并非所有 rules必然是风格。

您必须确保 CSSRule 是 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 (见控制台)。尽可能避免转换。