TypeScript，终于在实际项目中用到了泛型。

ATWLee

已于 2023-01-06 07:53:06 修改

阅读量200

点赞数

分类专栏： TypeScript 文章标签： typescript reactjs

于 2023-01-05 16:42:59 首次发布

本文链接：https://blog.csdn.net/bwater_monster/article/details/128565441

版权

TypeScript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

文章讲述了在实际项目中，作者从使用any类型转向使用泛型来提高代码的类型安全性。通过定义Data<T>和ButtonsGroupProps<T>接口，以及使用泛型函数Index<T>，确保了clickButtonCallback接收到的数据类型与预期相符，从而避免了类型转换的不必要操作，提升了代码质量。

摘要由CSDN通过智能技术生成

终于在实际项目中用到了泛型

里程碑式的纪录，终于不是anyScript了，代码写完只有一个any

应用

项目中组件化了这么一个东西
在这里插入图片描述
功能描述：

传进去一个数组，有个名，有个key，渲染成上图的div样式
点击之后，回调函数吐出点击的是哪一项

看下代码⬇️

import { useState } from 'react';
import styles from './index.less';

type Data = {
  key: string;
  name: string;
};

interface ButtonsGroupProps {
  data: Data[];
  defaultActive?: number;
  clickButtonCallback: (data: Data) => void;
}

const Index = (props: ButtonsGroupProps) => {
  const { data, defaultActive = 0, clickButtonCallback } = props;
  const [activeButton, setActiveButton] = useState(defaultActive);
  return (
    <div className={styles.buttonGroupWrapper}>
      {data.map((i, index) => (
        <div
          className={`${
            activeButton === index ? styles.buttonItemActive : ''
          } ${styles.buttonItem}`}
          key={i.key}
          onClick={(e) => {
            e.stopPropagation();
            setActiveButton(index);
            clickButtonCallback(i);
          }}
        >
          {i.name}
        </div>
      ))}
    </div>
  );
};

export default Index;

再看下外面怎么用：

type TypeKey = 'zj' | 'zh';
const buttonGroup = useMemo<{ key: TypeKey; name: string }[]>(
 () => [
   {
     key: 'zj',
     name: '资金',
   },
   {
     key: 'zh',
     name: '账户',
   },
 ],
 [],
);
 <ButtonGroup
   data={buttonGroup}
   clickButtonCallback={(data) => {
     setCurrentType(data.key as TypeKey);
   }}
 />

问题出现了

setCurrentType(data.key as TypeKey);
在这里插入图片描述
原因：

返回的key在是string，而用的时候定义了TypeKey

在这里插入图片描述

为啥要定义TypeKey而不直接string呢？
外面的key定义了文字字符串类型，因为不多，所以定死感觉比较好。
在这里插入图片描述
然后又来一个type TypeKey = 'ys' | 'yf';

虽然as也没有问题，肯定会是TypeKey。但是强迫症感觉有点难受

这时候就想到了泛型

组件内进行改造⬇️
首先Key的类型

type Data<T> = {
  key: T;
  name: string;
};

然后props的类型

interface ButtonsGroupProps<T> {
  data: Data<T>[];
  defaultActive?: number;
  clickButtonCallback: (data: Data<T>) => void;
}

最后函数接受一下T，

const Index = <T extends React.Key>(props: ButtonsGroupProps<T>) => {
  const { data, defaultActive = 0, clickButtonCallback } = props;
  const [activeButton, setActiveButton] = useState(defaultActive);
  return (
    <div className={styles.buttonGroupWrapper}>
      {data.map((i, index) => (
        <div
          className={`${
            activeButton === index ? styles.buttonItemActive : ''
          } ${styles.buttonItem}`}
          key={i.key}
          onClick={(e) => {
            e.stopPropagation();
            setActiveButton(index);
            clickButtonCallback(i);
          }}
        >
          {i.name}
        </div>
      ))}
    </div>
  );
};

export default Index;