H5W3
当前位置:H5W3 > 其他技术问题 > 正文

【前端问题精选】如何在TypeScript 中 判断 querySelector 返回的元素类型?

定义了一个工具函数,预期用来选择不同元素。它推断返回类型为 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

回答:

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

泛型定义:

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

调用:

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

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

回答:

这个只能你手动提示ts

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

回答:

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

本文地址:H5W3 » 【前端问题精选】如何在TypeScript 中 判断 querySelector 返回的元素类型?

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址