TypeScript 接口类似属性答案

【问题标题】：TypeScript interface similar propertiesTypeScript 接口类似属性
【发布时间】：2021-10-18 17:41:32
【问题描述】：

我正在从事 TS 项目，并且我有复杂的类结构（抽象工厂）。问题是我的界面看起来像：

export interface IProduct {
  customization: Customization;
  preparation: Preparation;

  make: () => void;

  setMilk?: (volume: number) => void;
  setWater?: (volume: number) => void;
  setSugar?: (volume: number) => void;
}

所以，我有很多类似的 setter 属性（最后 3 个），还需要更多，但模板是一样的。问题：有没有办法将它们缩短为一行？看起来像：

['set*': string]: (volume: number) => void;

（可能是索引签名等的一些技巧）

【问题讨论】：

您可以使用实际的索引签名like this，这将允许以set 开头的任何内容。如果您需要将其限制为一些键名的联合，您可以使用this I guess。如果您提到哪个更适合您，我很乐意将其中任何一个写下来作为答案。
如果您在接口上定义永远不会实现的字段，为什么还要有一个接口？
@jcalz 你太棒了，谢谢
@YuriiHrecheniuk 那么你想要哪种方法？两个都？我想我可以写两个。

标签： typescript interface

【解决方案1】：

如果您想接受以"set" 开头的任何可能的密钥，包括您未指定的内容，例如"setFlour" 或"setRandomThing" 或"settingSun" 或"set$$1234Blah"：

在 TypeScript 4.4 之前，无法对特定对象类型执行此操作。不过，现在支持template string pattern index signatures。索引签名的形式为{[dummyKeyName: KeyType]: ValueType}，其中KeyType 表示您希望签名应用到的键类型。传统上，您只能将string 或number 用于KeyType。 TS4.4 允许使用`set${string}` 形式的模式模板文字类型，由microsoft/TypeScript#40598 实现，其中string 是模板文字类型中的“模式”或“占位符” .

对于你的例子，这意味着你可以这样写：

export interface IProduct {
  customization: Customization;
  preparation: Preparation;
  make: () => void;
  [k: `set${string}`]: (volume: number) => void
}

并测试一下：

declare const p: IProduct;
p.setMilk(1);
p.setSugar(2);
p.setWater(3);
p.setFlour(4); //okay

另一方面，如果您只想接受"milk" 或"water" 或"sugar"，或特定字符串union 的其他一些枚举literal types，则可以通过扩展the Record<K, V> utility type 来代替使用适当的 K 和 V 类型：

命名空间 ListOfKeys { 类型 SetKeys = '牛奶' | '水' | '糖';

export interface IProduct extends Record<
  `set${Capitalize<SetKeys>}`, (volume: number) => void
> {
  customization: Customization;
  preparation: Preparation;
  make: () => void;
}

并测试一下：

declare const p: IProduct;
p.setMilk(1);
p.setSugar(2);
p.setWater(3);
p.setFlour(4); //error

Playground link to code

【讨论】：

再次 - 你太棒了，谢谢