javascript - Typescript 约束模板

Question

我创建了这个HashMap接口(interface):

export interface HashMap<K, V> {
    [name: K]: V;
}

我可以将它用作:

const map: HashMap<String, String>;

但是，现在我收到一条错误消息，指出 name 只能是 string 或 number 类型。

如何在此处应用 K 模板的约束？

Answer 1

首先，不要使用大写的原始类型名称。也就是说使用string而不是String。

关于您问题的实质，TypeScript 索引签名的参数类型必须是 string、number 或 symbol 之一。最后一个仅在 --target es2015 或更高版本下可用。

但是，您可以将键的类型限制为字符串值的子集。在这种情况下，您必须使用type别名声明，而不是interface。

export type HashMap<K extends string, V> = {
  [P in K]?: V;
}

[P in K] 语法的意思是“枚举用于实例化 K 的字符串类型子集中的每个字符串文字类型”。

这很有用，因为我们可以通过指定以字符串文字类型作为其组成部分的联合类型来限制映射的内容。

例如:

const map: HashMap<'firstName' | 'lastName', string> = {
  firstName: 'John', // OK
  nickname: 'Johnny' // Error
};

基本上，出于所有意图和目的，您必须使用字符串，但您可以使用联合类型将键类型限制为特定字符串或一组特定字符串。

实际上，字符串联合类型通常是另一种类型的函数。

例如:

interface Item {
  name: string;
  id: number;
}


interface PropertyMetadata {
  kind: 'data' | 'accessor';
}

type LazyItem = {
  [P in keyof Item]: PropertyDescriptor
};

keyof 是一个类型运算符，它接受一个类型并返回一个类型，该类型是其属性键的字符串并集。

<小时/>

现在，这可能不是您正在寻找的。如果您想使用任意键类型，并受到某种约束，您将需要使用 ES2015 Map 对象。在 JavaScript 中添加此类型之前，不可能以干净的方式执行此映射，并且 string 本质上是唯一可行的键类型。

通过将 ES2015 映射与 TypeScript 泛型(您称之为模板)的强大功能相结合，我们可以近似您正在寻找的内容。

例如:

interface Category {
  name: string;
  products: Product[];
}

interface Product {
  name: string;
  category: Category;
}

const categoriesToProducts = new Map<Category, Product[]>();

declare function getProducts(): Product[];

const products = getProducts();

products.forEach(product => {
  const mapped = categoriesToProducts.get(product.category);
  if (mapped) {
    mapped.push(product);
  } 
  else {
    categoriesToProducts.add(product.category, [product]);
  }
});