如何在TypeScript 中 判断 querySelector 返回的元素类型？

Question

定义了一个工具函数，预期用来选择不同元素。它推断返回类型为 Element, 不过这是个基类，很多具体类的方法和属性不能自动提示。

export const $ = (selector, scope = document) => scope.querySelector(selector);

我期望当选择 <input> 元素时，TS 能提示有 value 属性，或 <div> 时有 innerHTML 属性（或其它方法）。我尝试将返回类型定义为 HTMLElement | HTMLInputElement，不过 TS 总是推断为“HTMLElement 没有 value属性”。

export const $ = (selector, scope = document): HTMLElement | HTMLInputElement => scope.querySelector(selector);

请问，我该如何定义这个返回值类型，才能根据不同的元素，提示其具有的具体属性、方法呢？谢谢 <3

Answer 1

感谢回复，你的 as 语法给我提供了一个方向。现在改成了如下写法：

泛型定义：

export const $ = <T>(selector, scope = document): T =>
  scope.querySelector(selector);

调用：

const $account: HTMLInputElement = $("#login-account");

// 自动提示 .value
const account = $account.value

Answer 2

可以用泛型
const input = document.querySelector<HTMLInputElement>('input')

Answer 3

这个只能你手动提示ts

const input = scope.querySelector('#input') as HTMLInputElement;

const input = scope.querySelector('#input');
if(input instanceof HTMLInputElement){
    ...
}