PropTypes 在 Typescript React 中过时了吗？

Question

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

我注意到 Typescript 使用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 中一样静态键入时，您甚至无法运行代码，因为它没有被编译。所以基本上你不能推送到生产环境，因此没有错误。这就是重点使用静态类型语言）

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

默认情况下，在接口中编写时需要属性（确保您strict: true在 tsconfig 中有）。你想active成为可选的吗？所以界面如下所示：

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

（使用string，而不是String对所有其他基本类型相同，string并且String不相同）

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

对于函数组件，它与您在任何其他普通函数中为参数定义默认值的方式没有区别。例子：

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

此外，TypeScript 并不是 PropTypes 的完全替代品，在大多数情况下，TS 就足够了（并且更好）。