声明一个 HTMLElement Typescript

发布于02月07日

在visual studio的默认TypeScript HTML应用程序中，我添加了

HTMLElement

到窗口的第一行.onload事件处理程序，认为我可以为"el"提供一个类型.

因此:

class Greeter {
    element: HTMLElement;
    span: HTMLElement;
    timerToken: number;

    constructor (element: HTMLElement) { 
        this.element = element;
        this.element.innerText += "The time is: ";
        this.span = document.createElement('span');
        this.element.appendChild(this.span);
        this.span.innerText = new Date().toUTCString();
    }

    start() {
        this.timerToken = setInterval(() => this.span.innerText = new Date().toUTCString(), 500);
    }

    stop() {
        clearTimeout(this.timerToken);
    }

}

window.onload = () => {
    HTMLElement el = document.getElementById('content');
    var greeter = new Greeter(el);
    greeter.start();
};

我犯了个错误

编译错误.有关详细信息，请参阅错误列表/应用程序.ts(25,17):

知道为什么吗？我怀疑我错过了一些明显的东西.

推荐答案

类型以TypeScript命名，部分原因是类型是可选的.

所以你的台词是:

HTMLElement el = document.getElementById('content');

需要更改为:

const el: HTMLElement = document.getElementById('content');

早在2013年，类型HTMLElement应该是从返回值getElementById推断出来的，但情况仍然是if you aren't using strict null checks(但您可能需要在TypeScript中使用严格模式).如果强制执行严格的空判断，您会发现getElementById的返回类型已从HTMLElement更改为HTMLElement | null.这种更改使类型更加正确，因为您并不总能找到元素.

因此，当使用类型模式时，编译器会鼓励您使用类型断言来确保找到元素.这样地:

const el: HTMLElement | null = document.getElementById('content');

if (el) {
  const definitelyAnElement: HTMLElement = el;
}

我已经包含了一些类型来演示运行代码时会发生什么.有趣的是，el在if语句中具有更窄的HTMLElement类型，这是因为消除了它为null的可能性.

你可以做完全相同的事情，使用相同的结果类型，而不需要任何类型注释.它们将由编译器推断，从而节省所有额外的输入:

const el = document.getElementById('content');

if (el) {
  const definitelyAnElement = el;
}

Typescript相关问答推荐

如何根据服务响应构建子路由

Angular 垫页分类和垫排序不起作用

如何修复VueJS中的val类型不能赋给函数

如何获取数组所有可能的索引作为数字联合类型？

类型脚本强制泛型类型安全

基于键的值的打字动态类型；种类；

类型脚本`Return；`vs`Return unfined；`

为什么在回调函数的参数中不使用类型保护？

类型脚本满足将布尔类型转换为文字.这正常吗？

Vue3 Uncaught SyntaxError：每当我重新加载页面时，浏览器控制台中会出现无效或意外的令牌

为什么在leetcode问题的测试用例中，即使我确实得到了比预期更好的解决方案，这段代码也失败了？

如何通过TypeScrip中的函数防止映射类型中未能通过复杂推理的any值

ANGLE NumberValueAccessor表单控件值更改订阅两次

NPM使用Vite Reaction应用程序运行预览有效，但我无法将其部署到Netlify

在类型脚本中创建显式不安全的私有类成员访问函数

作为参数的KeyOf变量的类型

使用&reaction测试库&如何使用提供程序包装我的所有测试组件

我的类型谓词函数不能像我预期的那样工作.需要帮助了解原因

如何填写Partial的一些属性并让类型系统知道它？

覆盖高阶组件中的 prop 时的泛型推理

实用课程推荐