React中导出接口Props的目的是什么（Typescript ver）

Question

在React Typescript Starter示例创建组件的创建组件部分，Typescript 中有一个基本的 React 组件：

// src/components/Hello.tsx

import * as React from 'react';

export interface Props {
  name: string;
  enthusiasmLevel?: number;
}

function Hello({ name, enthusiasmLevel = 1 }: Props) {
  if (enthusiasmLevel <= 0) {
    throw new Error('You could be a little more enthusiastic. :D');
  }

  return (
    <div className="hello">
      <div className="greeting">
        Hello {name + getExclamationMarks(enthusiasmLevel)}
      </div>
    </div>
  );
}

export default Hello;

// helpers

function getExclamationMarks(numChars: number) {
  return Array(numChars + 1).join('!');
}

我是打字稿的新手。似乎 Typescript 使用接口 Props 来进行 props 类型检查（类似于Proptypes npm 包所做的）。所以问题是：

1. 如果我已经在使用这种 Typescript 接口语法来做 props 类型检查，我还需要在同一个组件中使用这样的 Proptypes 包吗？

    import PropTypes from 'prop-types';

    Hello.propTypes = {
      name: PropTypes.string,
      enthusiasmLevel: PropTypes.number
    };

2. 另外，这里为什么用export接口呢？导出接口Props的目的是什么？是强制性的吗？

Answer 1

首先，我建议以 ES6 方式声明您的组件

const Hello: React.FC<IHello> = ({ name, enthusiasmLevel = 1 }) => {}

你的接口定义了你的组件的契约/接受的参数

export interface IHello {
  name: string;
  enthusiasmLevel?: number;
}

您正在导出它，因此您可以从想要使用该Hello组件的其他文件/组件导入您的界面。例如，您可以Hello像这样从另一个组件中使用您的组件：

const props: IHello = {
    name: "John",
    enthusiamsLevel: 5
}

<Hello {...props} />

如果我已经在使用这种 Typescript 接口语法来做 props 类型检查，我还需要在同一个组件中使用 Proptypes 吗？

您总是希望在 TypeScript 中键入强定义。因此，当在另一个组件中声明您的 prop 变量时，您不想做const props: any = { 如果您决定稍后更改此组件的接口声明，您将被迫更新所有使用此接口的引用。- 您可能还需要 1 个 prop 变量，在这种情况下，您可能希望更新此接口的用法。如果您不习惯 TypeScript，这乍一看似乎很可怕——但随着时间的推移，始终拥有强类型定义的好处会显现出来。特别是当您更新类型定义时。