带有类组件的默认props
使用static defaultProps是正确的。您还应该为 props 和 state 使用接口，而不是类。
2018 年 12 月 1 日更新：TypeScript 改进了与defaultProps时间相关的类型检查。继续阅读以了解最新和最常用的用法以及较旧的用法和问题。
对于 TypeScript 3.0 及更高版本
TypeScript 专门添加了defaultProps对使类型检查按您期望的方式工作的支持。例子：
interface PageProps {
foo: string;
bar: string;
}
export class PageComponent extends React.Component<PageProps, {}> {
public static defaultProps = {
foo: "default"
};
public render(): JSX.Element {
return (
<span>Hello, { this.props.foo.toUpperCase() }</span>
);
}
}
可以在不传递foo属性的情况下呈现和编译：
<PageComponent bar={ "hello" } />
注意：
foo在没有标记为可选（即foo?: string），即使它不是必需的JSX属性。标记为 optional 意味着它可能是undefined，但实际上它永远不会是，undefined因为defaultProps它提供了一个默认值。想想它类似于如何将函数参数标记为可选，或使用默认值，但不能两者兼而有之，但这两者都意味着调用不需要指定 value。TypeScript 3.0+ 也defaultProps有类似的处理方式，这对 React 用户来说真的很酷！- 在
defaultProps没有明确的类型注释。它的类型由编译器推断和使用，以确定需要哪些 JSX 属性。您可以使用defaultProps: Pick<PageProps, "foo">来确保defaultProps匹配PageProps. 此处解释了有关此警告的更多信息。
- 这需要
@types/react版本16.4.11才能正常工作。
对于 TypeScript 2.1 到 3.0
在 TypeScript 3.0 为defaultProps您实现编译器支持之前，您仍然可以使用它，并且它在运行时 100% 与 React 一起工作，但是由于 TypeScript 在检查 JSX 属性时只考虑 props，因此您必须将具有默认值的 props 标记为可选?。例子：
interface PageProps {
foo?: string;
bar: number;
}
export class PageComponent extends React.Component<PageProps, {}> {
public static defaultProps: Partial<PageProps> = {
foo: "default"
};
public render(): JSX.Element {
return (
<span>Hello, world</span>
);
}
}
注意：
- 注释是个好主意
defaultProps，Partial<>以便它根据您的props进行类型检查，但您不必为每个必需的属性提供默认值，这是没有意义的，因为必需的属性永远不需要默认值。
- 当使用will
strictNullChecks的值并需要非空断言（即）或类型保护（即）来删除. 这很烦人，因为默认的 prop 值意味着它实际上永远不会是未定义的，但是 TS 不理解这个流程。这是 TS 3.0 明确支持.this.props.foopossibly undefinedthis.props.foo!if (this.props.foo) ...undefineddefaultProps
在 TypeScript 2.1 之前
这工作相同，但您没有Partial类型，因此只需省略Partial<>并为所有必需的 props 提供默认值（即使这些默认值永远不会被使用）或完全省略显式类型注释。
您也可以defaultProps在函数组件上使用，但是您必须将您的函数输入到FunctionComponent（StatelessComponent在@types/react之前的版本中16.7.2）接口，以便 TypeScript 知道defaultProps该函数：
interface PageProps {
foo?: string;
bar: number;
}
const PageComponent: FunctionComponent<PageProps> = (props) => {
return (
<span>Hello, {props.foo}, {props.bar}</span>
);
};
PageComponent.defaultProps = {
foo: "default"
};
请注意，您不必在Partial<PageProps>任何地方使用，因为FunctionComponent.defaultProps已在 TS 2.1+ 中指定为部分。
另一个不错的选择（这是我使用的）是解构您的props参数并直接分配默认值：
const PageComponent: FunctionComponent<PageProps> = ({foo = "default", bar}) => {
return (
<span>Hello, {foo}, {bar}</span>
);
};
那你根本不需要defaultProps！请注意，如果您确实defaultProps在函数组件上提供，它将优先于默认参数值，因为 React 将始终显式传递defaultProps值（因此参数永远不会未定义，因此永远不会使用默认参数。）所以你会使用一个或另一个，而不是两者。