reactjs - 将类型不兼容的函数分配给 ref 属性

Question

为什么下面的代码不会导致编译时错误？

import * as React from 'react';

export class Test extends React.Component {
  private _onReferenceUpdated = (ref: HTMLCanvasElement) => {
    ref.width = 4; // This could throw, when ref is null
  };

  render(): JSX.Element {
    return (
      <canvas ref={this._onReferenceUpdated} />
    );
  }
}

ref属性被推断为

(JSX attribute) React.ClassAttributes<HTMLCanvasElement>.ref?: string | ((instance: HTMLCanvasElement | null) => void) | React.RefObject<HTMLCanvasElement> | null | undefined

这似乎是正确的(string 有点奇怪，但我想这只是一般的属性)。 (ref: HTMLCanvasElement) => void如何可分配给 (instance: HTMLCanvasElement | null) => void ？

Answer 1

答案就在您的问题中。

如您所述，ref 的类型推断为:

(JSX attribute) React.ClassAttributes<HTMLCanvasElement>.ref?: string | ((instance: HTMLCanvasElement | null) => void) | React.RefObject<HTMLCanvasElement> | null | undefined

这是一个“联合”类型，意味着任何由管道 (|) 分隔的类型在这里都是有效的。所以ref可以是以下任何一项:

• (JSX attribute) React.ClassAttributes<HTMLCanvasElement>.ref?: string
• ((instance: HTMLCanvasElement | null) => void)
• React.RefObject<HTMLCanvasElement>
• null
• undefined

好了，您已经定义了 _onReferenceUpdated属性(property)，你传递给 ref ，如下:

  private _onReferenceUpdated = (ref: HTMLCanvasElement) => {
    ref.width = 4; // This could throw, when ref is null
  };

所以 _onReferenceUpdated 的类型是(ref: HTMLCanvasElement) => void ，它很容易匹配我们的有效 ref 之一以上类型:((instance: HTMLCanvasElement | null) => void) .

请注意，圆括号没有意义，它们只是为了提高可读性。另请注意，参数名称在一种类型中为“ref”而在另一种类型中为“instance”并不重要。重要的是函数参数的顺序和类型，以及返回类型。

在 TypeScript 中，做这样的事情是完全有效的:

let Foo = (a: string) => {}; // inferred type of Foo is "(a: string) => void"

Foo = (b: string) => {}; // no error; order and type of args and return type match
Foo = (c: number) => {}; // error! type of arguments don't match