如何在 TypeScript 中獲取 Literal 而不是 Union 類型

Question

我創建了一個用於創建動態元素的函數。 但不是返回元素的文字類型，而是返回<HTMLElementTagNameMap>的並集。

function createElement(type: keyof HTMLElementTagNameMap) {
  return document.createElement(type)
}

如果我們只使用上面的函數，它會返回以下的聯合：

(HTMLElement | HTMLObjectElement | HTMLAnchorElement | HTMLAreaElement | HTMLAudioElement | ... 57 more ... | HTMLVideoElement).

到目前為止我嘗試了什么：

type valueOf<T> = T[keyof T]

function createElement<T extends valueOf<HTMLElementTagNameMap>>(type: keyof HTMLElementTagNameMap) {
  return document.createElement(type) as T
}

PS - 我也很困惑？ 上述功能是如何工作的？

而是以如下所述的方式使用上述功能：

const div = createElement<HTMLDivElement>('div')

我希望它像我們使用時一樣自動推斷類型的type ：

let li = document.createElement('li')

Answer 1

該代碼有效，因為您通過泛型類型T手動傳遞返回類型。

您可以通過以下代碼將其自動化：

const createElement = <K extends keyof HTMLElementTagNameMap>(name: K): HTMLElementTagNameMap[K]{
  return document.createElement(name)
}

const div = createElement('div')
console.log(div)
// [LOG]: HTMLDivElement: {} 

它和你寫的沒有什么不同。 我希望它有所幫助。 如果您有任何問題，歡迎在評論中提問

Answer 2

如果您想要與document.createElement相同的行為，您可以簡單地編寫

function createElement<K extends keyof HTMLElementTagNameMap>(type: K) {
  return document.createElement(type);
}

或者如果你想通過 HTML 元素選擇標簽名稱，你可以使用這樣的東西

type PickTagNameForHTMLElement<TargetElement> = {
  [K in keyof HTMLElementTagNameMap]: HTMLElementTagNameMap[K] extends TargetElement ? K : never;
}[keyof HTMLElementTagNameMap];

function createElement<TargetElement extends HTMLElement>(type: PickTagNameForHTMLElement<TargetElement>) {
  return document.createElement(type);
}