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);
    ...

我有 props 作为这样的界面:

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; 
}

使用该界面很简单，只需将 TodoFilterItemProps 替换为 ITodoFilterItem。

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

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

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

关于任何的注释

尽量避免输入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[]; 
}