TypeScript 看不到功能组件的 defaultProps

Question

我知道这里已经解决了这个问题，但我似乎找不到对我有帮助的解决方案。

我的代码如下：

import * as React from "react";
import inject from "react-jss";

import styles from "./index.styles";

import * as JSS from "jss";

type Colors = "Red" | "White";

interface Props {
  onClick: () => void;
  disabled: boolean;
  classes: JSS.Classes;
  color: Colors;
}

const Button: React.StatelessComponent<Props> = (props): React.ReactElement<any> => {
  const { children, onClick, classes, disabled, color } = props;

  return (
    <button onClick={onClick} disabled={disabled} className={[classes.Main, classes[color]].join(" ")}>
      {children}
    </button>
  );
};

Button.defaultProps = {
  color: "Red",
  disabled: false,
  onClick: () => false,
};

export default inject(styles)(Button);

一切看起来都很好，但是当我在没有 color 或 onClick 道具的情况下使用这个组件时，我收到了一个错误：

错误:(14, 8) TS2322: Type '{ children: string; onClick: () => 无效； 禁用：布尔值； }' 不可分配给类型 'Pick'。类型 '{ children: 中缺少属性 'color' 细绳; onClick: () => 无效；禁用：布尔值； }'。

我能做什么？我在 TS3.1.1 上。

Answer 1

这是 3.1 上的 bug。下面的代码适用于 3.2（暂时未发布，您可以使用 npm install typescript@next 进行安装

interface Props {
  onClick: () => void;
  disabled: boolean;
  classes: string;
  color: string;
}
type StatelessComponentArgs<T> = T & { children?: React.ReactNode } // reusable type for the arguments of a stateless compontent
const Button = (props: StatelessComponentArgs<Props>): React.ReactElement<any> => {
  const { children, onClick, classes, disabled, color } = props;

  return (
    <button onClick={onClick} disabled={disabled} >
      {children}
    </button>
  );
};

Button.defaultProps = {
  color: "Red",
  disabled: false,
  onClick: () => false,
};

let d = <Button classes="" color="" onClick={() => { }} disabled={false}></Button>
let d3 = <Button classes="" color="" onClick={() => { }} ></Button>

您的代码也存在问题。如果您将Button 显式键入为React.StatelessComponent<Props>，则defaultProps 将隐含为Partial<Props>，无论您分配给它什么。您需要让编译器推断defaultProps 的类型，如上面的示例所示。

Answer 2

为了使defaultProps 起作用，defaultProps 对象的实际类型必须存在于Button 的类型上。从 TypeScript 3.1 开始，you can declare a function and assign to its properties 和分配的属性将自动添加到函数的类型中，除非您已经为函数注解了类型，就像您所做的那样。如果我删除类型注释，然后对代码进行必要的更改（指定props 参数的类型并将类型断言添加到默认color 以阻止它扩大），那么我可以成功调用组件：

const Button = (props: Props & { children?: React.ReactNode }): React.ReactElement<any> => {
  const { children, onClick, classes, disabled, color } = props;

  return (
    <button onClick={onClick} disabled={disabled} className={[classes.Main, classes[color]].join(" ")}>
      {children}
    </button>
  );
};
Button.defaultProps = {
  color: "Red" as Colors,
  disabled: false,
  onClick: () => false,
};

const WrappedButton = inject(styles)(Button);
<WrappedButton/>;

删除类型注释的另一种方法是使用包含 defaultProps 对象类型的自定义接口，我相信 Titian Cernicova-Dragomir 正在考虑：

interface Props {
  onClick: () => void;
  disabled: boolean;
  classes: JSS.Classes;
  color: Colors;
  // Something is broken with `inject` without this.
  children?: React.ReactNode;
}

const buttonDefaultProps = {
  color: "Red" as Colors,
  disabled: false,
  onClick: () => false,
};
interface ButtonSFC extends React.SFC<Props> {
  defaultProps: typeof buttonDefaultProps;
}

const Button: ButtonSFC = (props): React.ReactElement<any> => {
  const { children, onClick, classes, disabled, color } = props;

  return (
    <button onClick={onClick} disabled={disabled} className={[classes.Main, classes[color]].join(" ")}>
      {children}
    </button>
  );
};
Button.defaultProps = buttonDefaultProps;

const WrappedButton = inject(styles)(Button);
<WrappedButton/>;

请注意，<Button/> 在 TypeScript 3.1 中给出了一个错误：似乎defaultProps 没有被无状态函数组件所接受。在当前的master 版本的 TypeScript 中，不再出现这个问题（所以我认为不值得调查）（编辑：Titian Cernicova-Dragomir 的答案有错误报告的链接），但有一个不同的问题：@ 987654334@ 给出错误，因为支持调用React.ComponentType 一直是temporarily removed。正在进行修复工作。希望目前，只要您不需要直接调用 Button，您就可以继续使用 TypeScript 3.1。