打字稿中的函数重载抛出错误

Question

我试图了解打字稿中的函数重载是如何工作的。

type CreateElement = {
  (tag: 'a'): HTMLAnchorElement
  (tag: 'canvas'): HTMLCanvasElement
  (tag: 'table'): HTMLTableElement
}

let createElement: CreateElement = (tag: 'a' | 'canvas' | 'table') => {
  if (tag === 'a') return new HTMLAnchorElement()
  if (tag === 'canvas') return new HTMLCanvasElement()
  if (tag === 'table') return new HTMLTableElement()
  throw new Error('wrong tag');
}

上面的代码抛出错误：

Type 'HTMLAnchorElement | HTMLCanvasElement | HTMLTableElement' is not assignable to type 'HTMLAnchorElement'.
    Type 'HTMLCanvasElement' is missing the following properties from type 'HTMLAnchorElement': charset, coords, download, hreflang, and 21 more.

我已确保在为给定的tag 类型返回适当的类型之前解析参数tag。任何想法为什么这不起作用？

Answer 1

Function overloads 只能与函数声明一起使用。

带有“重载”（箭头）函数表达式的变通方法可能适用于limited, weak typed way。但与前者不同的是，编译器对这些表达式没有特殊处理。所以他们不会按照你期望的方式行事（你的代码错误已经是一个很好的例子）。

您使用适当的函数重载重写的示例如下所示：

function createElement(tag: 'a'): HTMLAnchorElement // overload 1
function createElement(tag: 'canvas'): HTMLCanvasElement // 2
function createElement(tag: 'table'): HTMLTableElement // 3 
function createElement(tag: 'a' | 'canvas' | 'table') { // fn implementation
    if (tag === 'a') return new HTMLAnchorElement()
    if (tag === 'canvas') return new HTMLCanvasElement()
    if (tag === 'table') return new HTMLTableElement()
    throw new Error('wrong tag');
}

const ret = createElement("a") // HTMLAnchorElement