鍍金池/ 問答/HTML/ 如何在TypeScript 中 判斷 querySelector 返回的元素類型

如何在TypeScript 中 判斷 querySelector 返回的元素類型？

定義了一個(gè)工具函數(shù)，預(yù)期用來選擇不同元素。它推斷返回類型為 Element, 不過這是個(gè)基類，很多具體類的方法和屬性不能自動(dòng)提示。

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

我期望當(dāng)選擇 <input> 元素時(shí)，TS 能提示有 value 屬性，或 <div> 時(shí)有 innerHTML 屬性（或其它方法）。我嘗試將返回類型定義為 HTMLElement | HTMLInputElement，不過 TS 總是推斷為“HTMLElement 沒有 value屬性”。

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

請問，我該如何定義這個(gè)返回值類型，才能根據(jù)不同的元素，提示其具有的具體屬性、方法呢？謝謝 <3

回答
編輯回答
涼薄

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

2017年11月11日 22:31
編輯回答
單眼皮

感謝回復(fù)，你的 as 語法給我提供了一個(gè)方向?，F(xiàn)在改成了如下寫法：

泛型定義：

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

調(diào)用：

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

// 自動(dòng)提示 .value
const account = $account.value
2018年5月26日 06:37
編輯回答
妖妖

這個(gè)只能你手動(dòng)提示ts

const input = scope.querySelector('#input') as HTMLInputElement;
const input = scope.querySelector('#input');
if(input instanceof HTMLInputElement){
    ...
}
2017年3月1日 14:37