TS泛型-实际使用案例

品广项目：

 <SearchTable<(typeof data1)[number], any>
        title="结算中心"
        // 为了解决类型报错
        rowKey={(record) => `${record?.account_ID}`}
        // 定义展示列表的每一列
        columns={columns}
        // 定义搜索表单
        searchOptions={searchOptions}
        // 自定义列不展示 - 记得检查
        customColumns={false}
        operations={operations}
        namespace={'aaa' as any}
        ref={tableRef}
        pageQuery={pageQuery}
        shownCount={6}
      />

在 TypeScript 中，<SearchTable<(typeof data1)[number], any> 是一个使用了泛型（Generics）的类型注解，用于约束 SearchTable 组件的类型或属性。让我们分解一下这个类型注解的各个部分：

1. 泛型（Generics）

泛型是在定义函数、接口或类的时候，不预先指定具体的类型，而在使用的时候再指定类型的一种特性。在这里 <...> 包裹的部分就是泛型的实参（具体类型或值）。

2. SearchTable<T, U>

假设 SearchTable 是一个 React 组件或类，并且它接收两个泛型参数，分别记为 T 和 U。泛型参数允许 SearchTable 组件在内部使用这些类型作为其状态或属性等的类型，或者用于约束函数的参数或返回值的类型，增加组件的复用性。

3. (typeof data1)[number]

• typeof data1: 这是 TypeScript 的类型查询（Type Query），它产生了 data1 变量的类型。
• [number]: 这用于获取数组中元素的类型。如果 data1 是一个数组，(typeof data1)[number] 就表示 data1 数组中元素的类型。

所以，(typeof data1)[number] 获取的是 data1 数组单个元素的类型。

4. any

any 是 TypeScript 中的一个特殊类型，它允许在编程时跳过类型检查器的检查。通常，你可能希望尽可能地避免使用 any，因为使用 any 会导致你失去 TypeScript 提供的类型安全的一些优势。

总结：

<SearchTable<(typeof data1)[number], any> 的意思是：SearchTable 是一个接收两个泛型参数的组件或类。其中：

• 第一个泛型参数是 data1 数组中元素的类型。
• 第二个泛型参数是 any，这意味着在这个位置的类型是任意的，没有被约束。

这样的定义方式能够让 SearchTable 组件在内部利用这两种类型进行安全的类型检查，增加代码的健壮性和复用性。