Question

我创建了一个带有一些道具的简单类组件。由于Typescript 3及更高版本，它们声明defaultProps默认情况下将使用与组件props本身相同的Interface。 reference

在下面的代码示例中，您可以看到我创建了一个组件，并使用给定的接口扩展了React.PureComponent。一种道具称为boolean，类型为boolean。

然后我得到了static defaultProps作业，在其中进行了一个“偶然的”错字，并在其中放置了字符串而不是布尔值。

import React from "react";

export interface ExampleClassProps {
  string: string;
  arrayOfStrings: { test: string };
  boolean: boolean;
}

class ExampleClass extends React.PureComponent<ExampleClassProps> {
  static defaultProps = {
    string: "asd",
    arrayOfStrings: { test: "asd" },
    boolean: "true" //this should throw an error, since I'm assigning a string to type boolean
  };
  render() {
    return <div>{this.props.string}</div>;
  }
}
export default ExampleClass;

据我所知，Typescript现在应该抛出一个错误，说不能将类型字符串分配给布尔型，但是不能。

我正在使用Typescript 3.5.3，并且安装了@ types / react。

另外，编写与功能组件相似的组件确实可以工作，所以我只遇到类的问题：

import React from "react";

export interface ExampleFCProps {
  stringProp?: string;
}

const ExampleFC: React.FC<ExampleFCProps> = ({ stringProp }) => {
  return <div>{stringProp}</div>;
};

ExampleFC.defaultProps = { stringProp: 1 }; //this throws an error, since number is not type string

export default ExampleFC;

Answer 1

我不认为documentation you referenced就是这个意思。它说：

从defaultProps属性类型中推断出默认版本的属性。

我认为这意味着它会查看defaultProps属性，并根据其值推断类型：它不会查看广告资源props的类型零件。这是有道理的，因为如果假设defaultProps与props具有相同的类型，那么默认情况下您永远不会只提供部分道具：defaultProps总是必须提供props中的所有内容的值。

文档针对这种情况的建议是这样的：

使用static defaultProps: Pick<Props, "name">;作为显式类型注解，或者不要像上面的例子。

在您的示例中，如果您想为每个道具提供默认值并进行类型检查，请明确告诉编译器defaultProps的类型为ExampleClassProps：

class ExampleClass extends React.PureComponent<ExampleClassProps> {
    static defaultProps: ExampleClassProps = { // <-- explicitly state the type
        string: "asd",
        arrayOfStrings: { test: "asd" },
        boolean: "true" //this now does not compile, since you're assigning a string to type boolean
    };

顺便说一下，这里有一个有趣的提示：https://medium.com/@martin_hotell/10-typescript-pro-tips-patterns-with-or-without-react-5799488d6680。请参阅“ 9.使用类型推断来定义组件状态或DefaultProps”一节。

React Typescript类组件默认道具界面

1 个答案: