打字稿：类型'null'不可分配给类型错误答案

【问题标题】：Typescript: Type 'null' is not assignable to type error打字稿：类型'null'不可分配给类型错误
【发布时间】：2018-02-02 02:24:20
【问题描述】：

将以下代码转换为打字稿时出现错误。

const element = document.querySelector('#launcher');
if (element && element.style && element.style.display) {
    element.style.display = '';
}

错误 TS2339：“元素”类型上不存在属性“样式”。

当我分配所需的值时，如下所示

const element: { style: any } = document.querySelector('#launcher');

那么错误就在元素上，那就是

错误 TS2322：类型“元素 | null' 不能分配给类型 '{ style: any; }'。类型 'null' 不能分配给类型 '{ style: any; }'。

【问题讨论】：

尝试使用 var or let 代替 const
querySelector in Typescript的可能重复

标签： node.js reactjs typescript

【解决方案1】：

document.querySelector 返回Element 的实例。在它的打字中没有太多declared。为了修复错误 - 将其转换为更具体的类型，例如：

const element = document.querySelector('#launcher') as HTMLInputElement;
if (element && element.style && element.style.display)
{
    element.style.display = '';
}

基本上从HTMLElement 继承的所有东西都可以完成这项工作。

【讨论】：

【解决方案2】：

我建议在声明变量时提供特定类型。

例如：在您的情况下，querySelector 返回 'Element|null' 类型的值所以，你可以像这样定义你的元素变量

const element: Element = document.querySelector('#launcher');

希望这会有所帮助。

【讨论】：