Question

我在React中使用typescrip 3.4，并且尝试使用此代码加载Youtube Iframe API

const tag = document.createElement("script");
tag.src = "www.youtube.com/player_api";
const firstScriptTag = document.querySelector("script");
if (firstScriptTag != null) {
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
}

即使我正在检查变量是否为null，但由于TS编译器会抛出 Object可能为'null'错误

，因此React将拒绝编译。

我还尝试过使用非空断言运算符（“！”），

firstScriptTag!.parentNode.insertBefore(tag, firstScriptTag);

问题仍然存在。

我知道可以通过在 tsconfig 文件中设置strict=false来摆脱它，但是我想强迫自己编写高质量的代码。

谢谢！

Answer 1

警告位于firstScriptTag.parentNode上。您必须先检查firstScriptTag和firstScriptTag.parentNode，然后才能安全地在firstScriptTag.parentNode上调用方法：

if (firstScriptTag && firstScriptTag.parentNode) {
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); // no error
}

希望有帮助。祝你好运。

当变量不为null时，如何使Typescript编译器知道？

1 个答案: