获取组件的 TypeScript Props

在 TypeScript 中，我们需要明确知道每个组件的 props 的类型定义，以便在使用该组件时正确传递参数，避免运行时出现类型错误。本文介绍了如何获取组件的 TypeScript Props。

方法一：使用 React.FC 接口

通过使用 React.FC 接口并定义泛型，我们可以获取到组件的 props 类型定义。例如，对于一个简单的按钮组件，我们可以这样定义：

import React from 'react';

type ButtonProps = {
  label: string;
  onClick: () => void;
};

const Button: React.FC<ButtonProps> = ({ label, onClick }) => (
  <button onClick={onClick}>{label}</button>
);

export default Button;

在这个例子中，我们定义了一个 ButtonProps 类型，它具有 label 和 onClick 两个属性，并且使用 React.FC 对 Button 组件进行了类型定义。当我们在其他地方使用该组件时，编译器将会强制检查我们传递的参数是否符合 ButtonProps 的类型定义。

方法二：使用 React.ComponentProps 类型

React 原生提供了一个 React.ComponentProps 类型，它可以帮助我们获取组件的 props 类型定义。我们可以对组件类型进行继承，并使用 React.ComponentProps<typeof 组件名> 来获取它的 props 类型。例如，对于上面定义的 Button 组件，我们可以这样获取它的 props 类型：

import React from 'react';

type ButtonProps = {
  label: string;
  onClick: () => void;
};

const Button = ({ label, onClick }: React.ComponentProps<typeof Button>) => (
  <button onClick={onClick}>{label}</button>
);

export default Button;

这个例子中，我们使用了 typeof Button 来获取 Button 组件的类型，然后使用 React.ComponentProps 获取它的 props 类型，从而达到了与方法一相同的目的。

结论

以上两种方法都可以使用 TypeScript 获取组件的 props 类型定义，并避免在运行时出现类型错误。自己选择一种适合自己的方法即可。