TypeScript复制现有接口，但改变一个属性的类型

Question

我有这样一个接口:

interface IInternalListener {
element: HTMLElement,
id: string,
type: string,
listener: EventListenerOrEventListenerObject,
useCapture: boolean
}

我还想使用这个接口:

interface IListener {
element: HTMLElement,
id: string | number,
type: string,
listener: EventListenerOrEventListenerObject,
useCapture: boolean
}

唯一的区别是id的类型。我想使用DRY (Don't Repeat Yourself)

我如何创建这个没有复制粘贴。映射类型似乎是一种可行的方法，但在这个答案中，它们映射了所有的道具——Typescript:如何创建一个类型的副本，但改变属性类型

我只想改变一个道具。有人知道怎么做吗?我不需要使用映射类型，任何可行的解决方案都是可行的。TIA

Answer 1

有几种方法可以做到这一点。

1

方式将公共逻辑提取到其他两个扩展的第三个接口中:

interface IWhatever {
element: HTMLElement,
type: string,
listener: EventListenerOrEventListenerObject,
useCapture: boolean
}
interface IListener extends IWhatever {
id: string
}
interface IInternalListener extends IWhatever {
id: string | number
}

2

方式正如Robby Cornelissen在评论中指出的，你可以使用通用的:

interface IListener<T> {
id: T
element: HTMLElement,
type: string,
listener: EventListenerOrEventListenerObject,
useCapture: boolean
}

3

假设你不拥有侦听器接口，也无法更改它，但你想在其他接口中重用它:

interface IInternalListener extends Omit<IListener, 'id'> {
id: string | number
}

Answer 2

可以同时使用extends和Omit实用程序类型

例子

interface IInternalListener {
element: HTMLElement,
id: string,
type: string,
listener: EventListenerOrEventListenerObject,
useCapture: boolean
}
interface IListener extends Omit<IInternalListener, 'id'> {
id: string | number
}

基本上，我们将删除id属性，并将其添加回您需要的首选类型。