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;
        }
    }
}

我收到的错误是

属性'selectorText'在'CSSRule'类型中不存在。

不确定如何解决这个问题。有什么想法吗？

谢谢，Uwe

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（请参阅控制台）。尽可能避免施法。

Answer 2

到目前为止，您无法访问public static void fplay() { Runnable fplay = new Runnable() { @Override public void run() { // TODO Auto-generated method stub if(!songs.isEmpty()) { for(int j=0;j<songs.size();j++) { System.out.println(path+"\\"+songs.get(j)); file = new File(path+"\\"+songs.get(j)); try { fis = new FileInputStream(file); player = new AdvancedPlayer(fis); graphics.label.setText(songs.get(j).toString()); player.play(); }catch(Exception e) { } } }else JOptionPane.showMessageDialog(null, "No directory selected","Error", JOptionPane.ERROR_MESSAGE); }}; SwingUtilities.invokeLater(fplay); }类型的定义，但您无法真正避免它。要摆脱这个错误，请尝试像：

CSSRule

根据Cristys的评论，这可能也有效（如果有效，请使用这个）：

if (contains((cssRules[r] as any).selectorText, selectorTextArr)) {...

注意：你应该总是尽量不要使用if (contains((cssRules[r] as CSSStyleRule).selectorText, selectorTextArr)) {...类型，但我想在这种情况下它是可以的。

Answer 3

在没有更多上下文和工作代码示例的情况下进行调试有点困难，但我相信您只需将第4行的分配更改为：

const s: CSSStyleSheet = document.styleSheets[i];

将JS转换为TypeScript：'CSSRule'类型中不存在属性'selectorText'

3 个答案: