TypeScript 使用泛型进行索引是否有困难？

Question

扩展来自 Effective Typescript 的示例，我不知道我是否遇到了类型检查器或我的理解的限制。

这是第 33 页的原始示例

interface Point {
  x: number
  y: number
}

function sortBy<K extends keyof T, T>(vals: T[], key: K): T[] {
  // ...
}

const pts: Point[] = [
  { x: 1, y: 1 },
  { x: 2, y: 0 },
]

console.log(sortBy(pts, "x"))

这是我尝试用有用的东西替换 //...

interface Point {
  x: number
  y: number
}

function sortBy<K extends keyof T, T>(vals: T[], key: K): T[] {
  // my solution
  return vals.sort((a, b) => {
    return b[key] - a[key] // Error: The left-hand side of an arithmetic operation must be of type 'any', 'number', 'bigint' or an enum type.ts(2362)
  })
  // end my solution
}

const pts: Point[] = [
  { x: 1, y: 1 },
  { x: 2, y: 0 },
]

console.log(sortBy(pts, "x"))

但如果我替换为

return (b[key] as any) - (a[key] as any)

有效

我想不通的是，为什么类型检查器认为 a[key] 或 b[key] 可能不是数字，因为 a 和 b 必须是 Point 类型，而 key 必须是 keyof Point。

如果我在没有泛型的情况下编写它，它工作正常，这让我觉得这里发生了一些奇怪的事情。

function sortBy(vals: Point[], key: "x" | "y"): Point[] {
  return vals.sort((a, b) => {
    return b[key] - a[key]
  })
}

Answer 1

无论如何调用或使用，泛型函数或类型必须在内部有效。换句话说，sortBy 不知道Point 是否存在，或者它最终可能会被该类型调用。它需要处理您可能想要传入的任何对象形状数组，而不仅仅是Point[]。

如果你看这个函数类型：

function sortBy<K extends keyof T, T>(vals: T[], key: K): T[] {
  return vals.sort((a, b) => {
    return b[key] - a[key]
  })
}

number 类型没有出现，但您正在执行需要个数字的操作。

这是它抱怨的情况：

sortBy([{ a: 'a string' }], 'a')

上述函数签名类型中没有任何内容表明这是无效的。但是当函数运行时它会崩溃，因为string - string 不是一个有效的操作。

您仅向它传递带有数字属性的对象这一事实并不重要，因为您可以告诉它也查找其他类型。

---

解决方案是将K 泛型限制为仅允许产生number 类型的键。

function sortBy<K extends string, T extends Record<K, number>>(vals: T[], key: K): T[] {
  return vals.sort((a, b) => {
    return b[key] - a[key];
  })
}

console.log(sortBy([{a: 'asd', b: 123}], "b")) // works

console.log(sortBy([{a: 'asd', b: 123}], "a")) // type error
// Type 'string' is not assignable to type 'number'.(2322)

现在为了满足调用此函数的要求，K 可以是任何 string，但对象必须有一个属性，该属性在命名属性上具有 number。

Playground