reactjs - React 生命周期方法的类型安全

Question

我正在为 React 项目使用 TypeScript。根据我在 type definitions 中看到的内容componentWillReceiveProps 的第一个参数应该与传递给 Component 类的通用类型相同。我以为 Component 已经实现了 ComponentLifecycle，但我也尝试过直接使用 implements ComponentLifecycle，但我仍然没有得到类型安全我希望。

interface Props {
  user: { login: string };
}

class Comp extends React.Component<Props> {
  componentWillReceiveProps({ user }) {
    // I think this should be two errors:
    // `Property `ogin` does not exist on type 
    // Type `string` is not assignable to type 'void';
    return user.ogin;
  }
}

但是我没有收到任何错误，似乎传递给 componentWillReceiveProps 的 Props 只将它们的类型保持在一个级别。为了让它工作，我可以这样写:

componentWillReceiveProps({ user }: Props): void {

有什么方法可以让 TypeScript 为已实现的接口(interface)正确键入通用参数？这是类型定义中的错误吗？

Answer 1

不，这不是错误。 React.Component的定义在打字中是:

class Component<P, S> {
    constructor(props?: P, context?: any);
    setState<K extends keyof S>(
        state: ((prevState: Readonly<S>, props: P) => (Pick<S, K> | S)) | (Pick<S, K> | S),
        callback?: () => any
    ): void;

    forceUpdate(callBack?: () => any): void;
    render(): JSX.Element | null | false;
    props: Readonly<{ children?: ReactNode }> & Readonly<P>;
    state: Readonly<S>;
    context: any;
    refs: {
        [key: string]: ReactInstance
    };
}

没有关于生命周期方法及其类型的内容。从 typescript 的角度来看，您只是用新方法扩展 React.Component ，它会尝试从函数中的用户代码推断参数的类型。当您显式添加类型时，Typescript 会理解您的意图并为您提供帮助。我现在只有一种方法可以精确地键入它 - 将组件类定义为抽象并将所有生命周期方法标记为 abstract。但是在这种情况下，您将不得不在子类定义中覆盖这些方法，但大部分时间您都不想使用 React。如果你只是在像 React.Component 这样的常规类定义上定义生命周期方法，你仍然可以用其他参数覆盖这个定义，所以 typescript 不会强制你保持相同的函数形状并阻止你使用未知参数.我认为它只能通过向 typescript 添加 sealed 函数属性来修复，这将禁止覆盖子函数类型。