reactjs - 如何在 React 中使用 PropTypes 和 Typescript

Question

我正在尝试将 PropTypes 与 Typescript 一起使用，但出现错误:

没有 typescript 我可以使用:

class TodoFilterItem extends Component {
  constructor (props) {
    super(props);

然后在底部

TodoFilterItem.propTypes = {
  name: PropTypes.string,
  filter: PropTypes.string,
  filterTodos: PropTypes.any
}

这只适用于 PropTypes(即没有 typescript )。

但是，当我添加 Typescript 时，我有

class TodoFilterItem extends Component<ITodoFilterItem> {
  constructor (props:ITodoFilterItem) {
    super(props);
    ...

我有像这样的界面 Prop :

interface ITodoFilterItem  {
  filter: string,
  name: string,
  filterTodos: any
}

我使用相同的 propTypes:

TodoFilterItem.propTypes = {
  filter: PropTypes.string,
  name: PropTypes.string,
  filterTodos: PropTypes.any
}

我得到一个错误

Property 'propTypes' does not exist on type 'typeof import("/my_adrs/node_modules/@types/prop-types/index")'.  

如何解决这个问题并能够在 React 中将 PropTypes 与 Typescript 一起使用？

Answer 1

PropTypes 与 Typescript 是分开的。要重用您的 propTypes，您必须将其转换为接口(interface)或类型。

这个

TodoFilterItem.propTypes = {
  filter: PropTypes.string,
  name: PropTypes.string,
  filterTodos: PropTypes.any
}

成为

interface ITodoFilterItem {
  filter: string;
  name: string;
  filterTodos: any; 
}

使用该接口(interface)很简单，将 TodoFilterItemProps 替换为 ITodoFilterItem。

惯例是将您的组件 Prop 命名为IProps。将它们放在一起你的组件现在看起来像:

interface IProps { 
 name: string;
 filter: string;
 filterTodos: any; 
}

class TodoFilterItem extends Component<IProps> {
  constructor (props:IProps) {
    super(props);
    ...

注意any

尽量避免输入any。 any 类型是相同的有无类型。我想 filterTodos 是一个 todos 数组。如果是这种情况，您可以为 todo 创建一个类型并调用它

type Todo = { ...properties of a todo } 

然后键入 filterTodos 成为 Todo 的数组，如下所示:

type Todo = { 
  name: string,
  status: 'not started' | 'in progress' | 'done'
}

interface IProps { 
  filter: string;
  name: string;
  filterTodos: Todo[]; 
}