Typescript 中的forwardRef 和defaultProps

我正在尝试在forwardRef 中使用defaultProps。 当我使用没有forwardRef的MessageBox时，它与defaultProps配合得很好。 但是，当我使用forwardRef 时，会发生错误。怎么解决呢？

打字稿：3.4.5“反应”：“^16.8.6”，

import React, { forwardRef } from "react";

export interface MessageBoxProps {
  test: string;
  children: any;
}

const defaultProps: Partial<MessageBoxProps> = {
  test: "test"
};

const MessageBox = forwardRef<HTMLDivElement, MessageBoxProps>((props, ref) => {
  return <p>{props.test}</p>;
});

MessageBox.defaultProps = defaultProps;

export default MessageBox;

export default function App() {
  const ref = React.useRef<HTMLDivElement>(null);
  return (
    <div className="App">
      <Test ref={ref} />
    </div>
  );
}

Type '{ ref: RefObject<HTMLDivElement>; }' is missing the following properties from type 'MessageBoxProps': test, children

https://codesandbox.io/s/forwardref-with-typescript-knhu3?file=/src/App.tsx:83-244 https://codesandbox.io/s/forwardref-with-typescript-knhu3?file=/src/App.tsx:83-244

简短的答案似乎是：您不能将 defaultProps 与前向引用一起使用。 您应该使用 ES2015 默认初始值设定项，如下所述here https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-0.html#explicit-types-on-defaultprops

这是我在 @types/react 源中的发现，也许其他人可以帮助进一步理解这一点。

1. 在将组件提供给 React.forwardRef 之前，您无法在组件上定义默认属性，这绝对是故意的forwardRef 参数类型一 github ： https://github.com/DefinitelyTyped/DefinitelyTyped/blob/ef99180a81bea833ccb9e80631636fa4a959f17c/types/react/index.d.ts#L546-L559

    interface ForwardRefRenderFunction<T, P = {}> {
        (props: P, ref: ForwardedRef<T>): ReactElement | null;
        displayName?: string | undefined;
        // explicit rejected with `never` required due to
        // https://github.com/microsoft/TypeScript/issues/36826
        /**
         * defaultProps are not supported on render functions
         */
        defaultProps?: never | undefined;
        /**
         * propTypes are not supported on render functions
         */
        propTypes?: never | undefined;
    }
   

2. React.forwardRef 的返回类型有一个默认的 prop 字段，表明它在 jsx 中使用时应该正确输入github上的forwardRef类型和返回类型： https://github.com/DefinitelyTyped/DefinitelyTyped/blob/ef99180a81bea833ccb9e80631636fa4a959f17c/types/react/index.d.ts#L776-L781

    interface ForwardRefExoticComponent<P> extends NamedExoticComponent<P> {
        defaultProps?: Partial<P> | undefined;
        propTypes?: WeakValidationMap<P> | undefined;
    }
   
    function forwardRef<T, P = {}>(render: ForwardRefRenderFunction<T, P>): ForwardRefExoticComponent<PropsWithoutRef<P> & RefAttributes<T>>;
   

3. Typescript 文档明确指出，他们在库端添加了对 prop 类型转换的支持，以便允许 React defaultProp 正确键入来自 typescript 3 的新功能：“支持 JSX 中的 defaultProps” https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-0.html#support-for-defaultprops-in-jsx:

TypeScript 3.0 在 JSX 命名空间中添加了对新类型别名的支持，称为库管理属性。该辅助类型定义了组件 Props 类型的转换，然后用于检查针对它的 JSX 表达式；因此允许自定义，例如：如何处理提供的 props 和推断的 props 之间的冲突、如何映射推论、如何处理可选性以及如何组合来自不同位置的推论。

However该页面还提到了以下功能组件：

对于功能组件（以前称为 SFC），请使用 ES2015 默认初始值设定项：

function Greet({ name = "world" }: Props) {
  return <div>Hello {name.toUpperCase()}!</div>;
}

但我们还不止于此。如果我们真的想使用defaultProp怎么办？我需要知道为什么它不起作用。

4. 在 @types/react 中搜索 LibraryManagedAttributes 仅给出一次命中：来自github的代码： https://github.com/DefinitelyTyped/DefinitelyTyped/blob/ef99180a81bea833ccb9e80631636fa4a959f17c/types/react/index.d.ts#L3135-L3139

    type LibraryManagedAttributes<C, P> = C extends React.MemoExoticComponent<infer T> | React.LazyExoticComponent<infer T>
        ? T extends React.MemoExoticComponent<infer U> | React.LazyExoticComponent<infer U>
            ? ReactManagedAttributes<U, P>
            : ReactManagedAttributes<T, P>
        : ReactManagedAttributes<C, P>;
   

是这个吗 ？我不会假装完全理解最后一段代码，但没有提到ForwardRefExotic组件那里。这是一个错误吗？如果在这个类型定义中添加一些东西，它可以工作吗？我应该打开一个问题吗？

让我知道你们的想法！