通过多种方式使用 TypeScript React 定义 Props

在 React 开发中，Props 是向组件传递数据的一种常用方式。TypeScript 可以加强 Props 的类型定义，帮助我们在开发中更加准确地使用 Props。本文将介绍几种使用 TypeScript 定义 Props 的方式。

方式一：使用 interface

我们可以使用 TypeScript 的 interface 来定义 Props 类型，如下：

interface MyProps {
  name: string;
  age: number;
}

const MyComponent: React.FC<MyProps> = (props: MyProps) => {
  // ...
};

这里的 MyProps 就是 Props 类型的 interface，里面定义了两个属性 name 和 age，分别是 string 和 number 类型。定义完后，我们可以像下面这样使用它：

<MyComponent name="Alice" age={20} />

方式二：使用类型别名

除了 interface，还可以使用类型别名来定义 Props 类型，如下：

type MyProps = {
  name: string;
  age: number;
};

const MyComponent: React.FC<MyProps> = (props: MyProps) => {
  // ...
};

这里的 MyProps 是 Props 类型的类型别名，里面定义了两个属性 name 和 age，分别是 string 和 number 类型。定义完后，我们可以像下面这样使用它：

<MyComponent name="Alice" age={20} />

方式三：使用 utility type Partial

有时候我们并不需要 Props 中的所有属性都是必须的，这时候就可以使用 Partial 工具类型。它可以把 Props 中的所有属性变成可选属性，如下：

type MyProps = {
  name: string;
  age: number;
};

const MyComponent: React.FC<Partial<MyProps>> = (props: MyProps) => {
  // ...
};

这里的 Partial 是 TypeScript 中的一个 utility type，它把 MyProps 中所有属性变成了可选属性。定义完后，我们可以像下面这样使用它：

<MyComponent name="Alice" />

方式四：使用默认 Props

我们还可以使用 defaultProps 来为 Props 设置默认值，如下：

interface MyProps {
  name: string;
  age: number;
}

const MyComponent: React.FC<MyProps> = (props: MyProps) => {
  // ...
};

MyComponent.defaultProps = {
  name: 'Bob',
  age: 30,
};

这里的 defaultProps 是 React 中的一个特殊属性，它可以为组件的 Props 设置默认值。定义完后，如果我们在使用组件时没有传入相应属性的值，那么就会使用默认值。

<MyComponent />

以上就是使用 TypeScript 定义 Props 的几种方式，根据不同情况选用不同方式，可以让 Props 类型定义更加清晰和准确。