PropTypes 在 Typescript React 中是否已过时？ [复制]

Question

我最近从基于 javascript 的 react 迁移到 Typescript-react。所以这对我来说是新的。

我注意到 Typescript 有自己的 props 验证方法，使用 interface。我的问题是：

1. 是否仍然需要使用 PropTypes（来自 prop-types 包）？
2. 如何为道具制作“isRequired”？如果没有定义道具，我想让它出错。
3. 如何为道具设置默认值？如果未定义道具，我想使用该默认值。

这是我的简单代码。下面的代码有效：

import * as React from "react";

// [Question 1] Create an object PropTypes, is this still necessary ?
import * as PropTypes from "prop-types";

// [Question 2] how to use isRequired for this prop ?
interface Props {
  text: String;
  active: Boolean;
}

const NavBarMenu = (props: Props) => {
  // [Question 3] How to make a default value for prop?
  return (
    <li className="nav-item">
      <a className={props.active ? "nav-link active" : "nav-link"} data-toggle="tab" href="#" role="tab">
        {props.text}
      </a>
    </li>
  );
};

NavBarMenu.propTypes = {
  text: PropTypes.string.isRequired,
  active: PropTypes.bool
};

export default NavBarMenu;

Answer 1

1. 是否仍然需要使用 PropTypes（来自 prop-types 包）？

基本上没有。如果传递的 props 类型不正确，TypeScript 会抛出编译错误。 （这更好，因为 PropTypes 会引发运行时错误，当像在 TS 中那样静态输入时，您甚至无法运行代码，因为它没有被编译。所以基本上你不能推送到生产环境，因此没有错误。这就是重点使用静态类型语言）

1. 如何为道具制作“isRequired”？如果没有定义道具，我想让它出错。

在接口中编写时默认需要属性（确保您在 tsconfig 中有 strict: true）。您希望active 是可选的吗？所以界面如下所示：

interface Props {
  text: string;
  active?: boolean;
}

（使用string 代替String 对所有其他基本类型相同，string 和String 不一样）

1. 如何为道具设置默认值？如果未定义道具，我想使用该默认值。

对于功能组件，它与您在任何其他普通功能中定义参数默认值的方式没有什么不同。示例：

const NavBarMenu = ({ text, active = false }: Props) => { ... }

TypeScript 也不能​​完全替代 PropTypes，在大多数情况下，TS 就足够了（而且更好）。

Answer 2

打字稿

• Typescript 在编译时验证类型。
• 由于 Typescript 提供了泛型类型，Typescript 类型可能更复杂
• 当您确定提供给组件道具的数据类型不会改变时很有用
• 要设置默认值，您可以在组件类上使用static defaultProps = {...props}

道具类型

• React 在运行时检查 ProTypes
• 不支持泛型类型检查
• 当您的组件需要在运行时进行严格的类型检查时很有用，例如您无法确定数据类型的 ajax 请求中的数据。

Answer 3

如果您在项目中使用 TypeScript，则不需要 PropTypes 包，只需使用接口即可实现。

你可以用接口定义 required/not required prop，例如：

interface MyProp {
 text: String; // This value is required
 active?: Boolean; // By adding ? the value becomes optional
}

为了使 props 具有默认值，您可以通过在组件上传播 prop 值来做到这一点，例如：

const NavBarMenu = ({text, active = false}: Props) => {
  // the value of active will default for false
  return (
    <li className="nav-item">
      <a className={active ? "nav-link active" : "nav-link"} data-toggle="tab" href="#" role="tab">
        {text}
      </a>
    </li>
  );
}; 

希望对你有帮助。