typescript - 如何在 typescript 中按类名选择元素？

Question

我正在尝试设计在小屏幕中折叠的响应式菜单栏，但是，我使用的是 typescript 。有什么线索相当于 typescript 中的这段代码

function myFunction() {
document.getElementsByClassName("topnav")[0].classList.toggle("responsive");}

我在 typescript 中改成了这段代码，但它从来没有用过

myFunction(): void {
(<HTMLScriptElement[]><any>document.getElementsByClassName("topnav"))[0].classList.toggle("responsive");
}

Answer 1

无需更改任何内容，因为 typescript 是 javascript 的超集，因此即使是常规 javascript 也可以是 typescript。

话虽如此，您可以添加一些 typescript 功能:

function myFunction(): boolean {
    let elements: NodeListOf<Element> = document.getElementsByClassName("topnav");
    let classes: DOMTokenList = elements[0].classList;
    return classes.toggle("responsive");
}

但是没有必要像那样把事情分开，所以你可以只拥有你的确切代码，但可能会在函数签名中添加一个返回类型:

function myFunction(): void {
    document.getElementsByClassName("topnav")[0].classList.toggle("responsive");
}

或者

function myFunction(): boolean {
    return document.getElementsByClassName("topnav")[0].classList.toggle("responsive");
}