Question

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

created

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

如果我已经在使用这种Typescript 接口语法对道具类型做检查，我还需要使用 Proptypes包是否在同一组件中？

// 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('!');
}

此外，为什么这里使用 export 界面？目的是什么界面道具的输出？是强制性的吗？

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接口语法来进行道具类型检查，那么我是否仍需要在同一组件中使用道具类型？

您始终希望在TypeScript中键入强定义。因此，在其他组件中声明prop变量时，您不想执行const props: any = { 如果以后决定更改此组件的接口声明，则将被迫更新所有使用此接口的引用。 -您可能需要再增加1个prop变量，在这种情况下，您需要更新此接口的用法。如果您不习惯TypeScript，一开始看起来似乎很丑陋-但是随着时间的流逝，始终拥有强类型定义的好处就会显现出来。尤其是在更新类型定义时。

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

1 个答案: