Question

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

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

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

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

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

打字稿

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

属性类型

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

Answer 2

如果您在项目中使用TypeScript，则不需要PropTypes包，只需使用接口即可达到相同的目的。

您可以通过界面定义必需/不需要的道具，例如：

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

为了使道具具有默认值，可以通过在组件上散布道具值来实现，例如：

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

希望有帮助。

Answer 3

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

多数不。如果传递的道具类型不正确，TypeScript将抛出编译错误。（这更好，因为PropTypes会引发运行时错误，因为像TS中那样静态类型化时，您甚至无法运行代码，因为它未经编译。因此，基本上，您无法推入生产阶段，因此没有错误。这就是重点使用静态类型语言的方法

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

默认情况下，在接口中写入属性是必需的（确保tsconfig中有strict: true）。您希望active是可选的吗？因此界面如下所示：

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

（对于其他所有原始类型，{string比String更受青睐）

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

对于功能组件，这与您为任何其他常规函数中的参数定义默认值的方式没有什么不同。示例：

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

TypeScript也不能完全替代PropType，在大多数情况下，TS足以（甚至更好）。

PropTypes在Typescript React中变得过时了吗？

3 个答案: