使用 TypeScript 泛型增强你的 React 组件并使其可重用

使用 TypeScript 泛型来增强您的 React 组件并使其可重复使用！

什么是 TypeScript 泛型？

泛型允许我们为组件提供动态类型。它使我们在构建组件时更加灵活，并为组件的使用者提供更好的可重用性。

让我们看一个泛型的简单例子：

function returnWhatItGets<Type>(arg: Type): Type => arg;

我们写的部分< Type>告诉 typescript，当我们使用这个函数时，我们将能够插入一个动态类型，该类型将作为我们的参数的类型（arg）和这个函数的返回值的类型。

它看起来是这样的：

const numberOutput = returnWhatItGets<number>(5);

const stringOutput = returnWhatItGets<string>("hi");

现在我们对泛型有了相同的认识，让我们在 React 组件中实现泛型吧！

1 import React from 'react';
2
3 export type GenericComponentProps<Type> = {
4 data: Type[];
5 };
6
7 export function GenericComponent<Type>({ data }: 8GenericComponentProps<Type>) {
9 return (
10 <>
11 {data?.map((item: Type, index: number) => (
12 <ul key={index}>
13 {(Object.keys(data[0]) as Array<keyof Type>).map((key) => (
14 <li key={key.toString()}>{item[key]}</li>
15 ))}
16 </ul>
17 ))}
</>
);
}

乍一看可能不太清楚，但其实很简单。让我们逐行看一下代码：

在第 3 行，我们为组件的 props（类型）定义了一个通用类型。

在第 4 行，我们假设 props 对象具有“data”属性。我们的数据类型是初始化组件时使用的动态类型的数组。

前进到第 7 行，我们使用通用类型定义我们的功能组件，该类型将传递给 props 对象的类型。

我们的数据是一个自定义类型的数组，因此在第 11 行开始映射该数组。对于每个对象，我们输出一个<ul>属性。

现在，我们需要输出给定对象的所有属性值，因此我们使用 Object.keys 方法将对象转换为其键的数组，并将其映射到打印每个属性的值。请注意，我们如何使用 keyof 语法动态定义此数组的类型。

现在让我们测试我们的组件：

  <GenericComponent
   data={[
    { name: 'Nitsan', city: 'Harish' },
    { name: 'Abraham', city: 'Beer Sheva' },
   ]}
  />

就是这样！我们获得了 TypeScript 的所有优点，例如自动完成和类型检查，同时创建了灵活且可重用的组件。

使用工具来跟踪和构建独立组件（例如Bit），我们的用户从这种灵活的设置中受益匪浅。

• 欲查看更多类似帖子，请关注我的 LinkedIn

• 我是Bit的前端和内容开发人员- Bit 是一个用于组件驱动开发的工具链（忘记单片应用程序并分发到组件驱动的软件）。