React（Typescript版本）中导出接口道具的目的是什么

Question

在React-Typescript初学者示例“创建组件”的“创建组件”部分中，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使用接口道具来执行道具类型检查（类似于Proptypes npm包所做的）。因此，问题是：

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

    import PropTypes from 'prop-types';

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

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接口语法do to props type check，那么我还需要在同一个组件中使用Proptypes吗？

您总是希望在TypeScript中使用类型强定义。因此，在另一个组件中声明prop变量时，您不想执行const-props:any={如果您决定稍后更改此组件的接口声明，您将被迫更新使用此接口的所有引用。-您可能需要多使用一个prop变量，在这种情况下，您将需要更新此接口的用法。如果您不习惯键入脚本，这可能看起来非常可怕一开始-但始终具有强类型定义的好处将随着时间的推移而显现。尤其是在更新类型定义时。