我可以在打字稿中使用什么而不是通配符

Question

我有一个接口ColumnDef。我需要创建 2 个方法：getValue 将返回 C 类型，getComponent 将输入 arg 类型为 C。而且效果很好！

interface ColumnDef<R, C> {
  getValue: (rowData: R) => C;
  getComponent: (cellData: C) => ReactElement
}

然后我创建了一个数组ColumnDef。我不需要为每一列说第二种类型。 （我想使用泛型类型，比如在 java 中：ColumnDef<R, ?>[]）我只需要在getValue 和getComponent 中匹配每一列的类型。我尝试使用“任何”类型，例如 ColumnDef<R, any>[];，但它破坏了类型匹配，例如以下代码：

interface ColumnDef<R> {
  getValue: (rowData: R) => any;
  getComponent: (cellData: any) => ReactElement
}

我想这样使用它：

const columns: ColumnDef<R, any>[] = [
    { getValue: (rowData: R) => rowData.name, getComponent: (name: string) => Label(name)},
    { getValue: (rowData: R) => rowData.size, getComponent: (size: number) => NumberBox(size)}  
  ]

附加的最小可重现示例：

import * as React from 'react';
import { ReactElement } from 'react';

interface TestData {
  name: string,
  size: number
}

interface ColumnDef<R, C> {
  getValue: (rowData: R) => C;
  getComponent: (cellData: C) => ReactElement
}
function NumberBox(size: number): ReactElement {
  return <div>{size}</div>
}

const columns: ColumnDef<TestData, any>[] = [
  { getValue: (rowData: TestData) => rowData.name, getComponent: (name: number) => NumberBox(name)},  // It is incorrect: name is not number!
  { getValue: (rowData: TestData) => rowData.size, getComponent: (size: number) => NumberBox(size)}  // It is correct: size is number!
]

console.log(columns)

Answer 1

TypeScript 不直接支持 existential types，这就是 Java 泛型中通配符的本质。存在类型是不同于 TypeScript 中可用的泛型类型参数。

在 TypeScript 中，如果您说 interface ColumnDef<R, C> {...}，则表示此定义适用于 R 和 C 的所有规范。要有意义地谈论ColumnDef<R, C> 的实例，您需要同时指定R 和C。

但是您正在寻找的是像interface ColumnDef<R, exists C> {...} 这样的类型，它适用于R 的所有 规范，但适用于C 的一些未知 规范.要谈论ColumnDef<R, exists C> 的实例，您需要指定 R，但您只需要知道C 有一个实例。

由于 TypeScript 对此没有直接支持，因此您必须采取各种变通方法。

---

为了具体谈谈这个，我将制作几个ColumnDef<R, C> 对象和一个失败的对象：

const cd1: ColumnDef<number, string> = {
  getValue(r) { return r.toFixed(0) },
  getComponent(c) { c.toUpperCase(); return reactElement; }
}
const cd2: ColumnDef<number, boolean> = {
  getValue(r) { return r > 3 },
  getComponent(c) { (c === true); return reactElement; }
}
const cdBad = {
  getValue(r: number) { return r.toFixed(0) },
  getComponent(c: boolean) { (c === true); return reactElement; }
}

---

最简单的解决方法是使用any 代替exists C。这将允许您需要允许的任何内容，但不会禁止一些错误。类似cdBad 的内容将被接受：

const columnDefArray: ColumnDef<number, any>[] = 
  [cd1, cd2, cdBad]; // oops, no error, but ?‍♂️

作为一种解决方法，您可以确保所有 ColumnDef<R, C> 实例都是通过辅助函数或类构造函数创建的：

class ColumnDefClass<R, C> {
  private onlyWayToMakeItIsWithTheCtor = true;
  constructor(
    public getValue: (rowData: R) => C,
    public getComponent: (cellData: C) => ReactElement) {
  }
}

const columnDefClassArray: ColumnDefClass<number, any>[] = [
  new ColumnDefClass(cd1.getValue, cd1.getComponent),
  new ColumnDefClass(cd2.getValue, cd2.getComponent),
  new ColumnDefClass(cdBad.getValue, cdBad.getComponent) // error!
]

这里因为ColumnDefClass 有一个private 属性，所以如果不调用构造函数，您将无法轻松创建它的实例。这将使您更难违反您的约束。

然后，一旦你有一个 ColumnDef<R, any> 数组，你就可以很容易地映射它：

const numToElements = (n: number) => columnDefClassArray.map(
  <C>(cd: ColumnDef<number, C>) => cd.getComponent(cd.getValue(n))
);
// const numToElements: (n: number) => ReactElement[]

我建议使用上面带有C 的通用回调，以使该回调比any 给您的类型更安全。

---

如果您愿意，您实际上可以使用 curried 泛型函数在 TypeScript 中对存在类型进行编码（如 in this comment 所示）：

type SomeColumnDef<R> = <T>(cb: <C>(columnDef: ColumnDef<R, C>) => T) => T;

这里，SomeColumnDef<R> 是一个通用函数，它为某些C 在ColumnDef<R, C> 上调用回调。直观地说，由于泛型函数的调用者是必须指定泛型参数的调用者，因此通过将值表示为 Promise 类似的事物，它调用采用该值的回调，您正在更改指定参数的人。

您可以轻松地将有效的ColumnDef<R, C> 转换为SomeColumnDef<R>：

const toSomeColumnDef = <R, C>(columnDef: ColumnDef<R, C>): SomeColumnDef<R> =>
  cb => (cb(columnDef));

并以这种方式获取您的数组：

const columnDefArray = [toSomeColumnDef(cd1), toSomeColumnDef(cd2)];
// const columnDefArray: SomeColumnDef<number>[]

同时也禁止不良行为：

const badColumnDefArray = 
  [toSomeColumnDef(cd1), toSomeColumnDef(cd2), toSomeColumnDef(cdBad)] // error!

然后，map-ping 该数组有点模糊，因为您必须有一个额外的嵌套回调层，但它确实有效：

const numToElements = (n: number) => columnDefArray.map(someColumnDef => someColumnDef(
  <C>(cd: ColumnDef<number, C>) => cd.getComponent(cd.getValue(n))
));
// const numToElements: (n: number) => ReactElement[]

---

最后，您可以尝试依靠 TypeScript 的类型推断将C 视为类型本身的数组，并为C 中的每个索引I 生成相应的数组类型以ColumnDef<R, C[I]> 为元素。这是由mapping over array/tuple types 启用的。

但这开始越来越接近 TypeScript 中类型推断的限制。柯里化很奇怪，但推断还可以：

const curriedArray = <R>() => <C extends readonly any[]>(
  ...columnDefs: { [I in keyof C]: ColumnDef<R, C[I]> }
) => columnDefs;

const curriedColumnDefArray = curriedArray<number>()(cd1, cd2);
const badCurriedColumnDefArray = curriedArray<number>()(cd1, cd2, cdBad); // error!

试图使用更直接的东西是令人难以置信的丑陋陷入困境，我不打算解释太多：

type GetR<T extends ColumnDef<any, any>[]> = { [K in keyof T]: T[K] extends ColumnDef<infer R, any> ? R : never }[number];
type GetCs<T extends ColumnDef<any, any>[]> = Extract<{ [K in keyof T]: T[K] extends ColumnDef<any, infer C> ? C : never }, any[]>;
type _ValidateCDA<R, Cs extends any[]> = Extract<{ [K in keyof Cs]: ColumnDef<R, Cs[K]> }, ColumnDef<any, any>[]>;
type ValidateColumnDefArray<T extends ColumnDef<any, any>[]> = _ValidateCDA<GetR<T>, GetCs<T>>;

const asColumnDefArray = <T extends ValidateColumnDefArray<T>>(...arr: T) => arr;
const columnDefArray = asColumnDefArray(cd1, cd2);
const badColumnDefArray = asColumnDefArray(cd1, cd2, cdBad); // error!

呸。

但即使这样可行，对数组进行迭代也很糟糕，因为在元组上的 map() 回调最终需要大量的事物联合。首先将其扩大到ColumnDef<R, any>[] 会更容易：

const numToElements = (n: number) => (columnDefArray as ColumnDef<number, any>[]).map(
  <C>(cd: ColumnDef<number, C>) => cd.getComponent(cd.getValue(n))
);

---

所以你去。有不同的方法可以进行，但没有一个是完美的。就我个人而言，我可能会坚持使用any，因为生命很短暂。但这取决于你。

Playground link to code