你好，StackOverflowers！
我已經嘗試了很長一段時間（使用更復雜的代碼）來實作一個通用型別安全的回呼系統，在該系統中可以注冊對某個事件的回呼，并將該回呼添加到特定事件型別的偵聽器陣列中。
當我不使用陣列時它作業正常，但每個事件只有一個回呼。但是當我嘗試使用陣列而不是將回呼推入時，打字稿丟失了。
enum MyEvent {
One,
Two
}
type Callback<T> = (arg: T) => void;
type CallbackTypes = {
[MyEvent.One]: number
[MyEvent.Two]: string
}
class CallbackContainer {
callbacksA: { [E in MyEvent]: Callback<CallbackTypes[E]> } = {
[MyEvent.One]: () => {},
[MyEvent.Two]: () => {}
};
callbacksB: { [E in MyEvent]: Callback<CallbackTypes[E]>[] } = {
[MyEvent.One]: [],
[MyEvent.Two]: []
};
constructor() {}
setListenerA<E extends MyEvent, C extends typeof this.callbacksA[E]>(this: CallbackContainer, event: E, callback: C) {
this.callbacksA[event] = callback; // =)
}
getListenerA<E extends MyEvent>(event: E) {
return this.callbacksA[event];
}
setListenerB<E extends MyEvent, C extends typeof this.callbacksB[E][number]>(this: CallbackContainer, event: E, callback: C) {
const callbacks = this.callbacksB[event]; // type of callbacks is still intact
callbacks.push(callback); // callbacks collapsed
}
getListenersB<E extends MyEvent>(event: E) {
return this.callbacksB[event];
}
}
const c = new CallbackContainer();
c.setListenerA(MyEvent.One, (a) => a 1); // Types resolve fine
c.getListenerA(MyEvent.One); // Types resolve fine
c.setListenerB(MyEvent.One, (a) => a 1); // Types resolve fine
c.getListenersB(MyEvent.One); // Types resolve fine
鏈接到 Typescript Playground
當將回呼推入陣列時，我得到：
Argument of type 'Callback<number> | Callback<string>' is not assignable to parameter of type 'Callback<number> & Callback<string>'.
Type 'Callback<number>' is not assignable to type 'Callback<number> & Callback<string>'.
Type 'Callback<number>' is not assignable to type 'Callback<string>'.
Type 'string' is not assignable to type 'number'.ts(2345)
在推送之前，編譯器非常清楚 C 的型別（回呼是）：
C extends {
0: Callback<number>[];
1: Callback<string>[];
}[E][number]>
回呼陣列的型別是：
const callbacks = {
0: Callback<number>[];
1: Callback<string>[];
}[E]
但是當push它們分別折疊到Callback<number> | Callback<string>和 時 Callback<number>[] | Callback<string>[]。我是否遇到了打字稿編譯器的限制，或者我是否遺漏了一些明顯的東西？如果這是一個限制，是否有任何解決方法？謝謝！
uj5u.com熱心網友回復：
為了便于討論，我將查看您的代碼的以下版本：
type Callbacks = { [E in MyEvent]: Callback<CallbackTypes[E]>[] };
class CallbackContainer {
callbacks: Callbacks = {
[MyEvent.One]: [],
[MyEvent.Two]: []
};
constructor() { }
setListener<E extends MyEvent>(event: E, callback: Callback<CallbackTypes[E]>) {
/* how to implement? */
}
}
這幾乎是一樣的，除了它callback是一個適當的泛型型別（在你的版本中它被擴展為聯合型別）。而且它在 TypeScript 4.5 及以下版本中仍然存在相同的問題：
// TS 4.5-
const callbacks = this.callbacks[event]
// const callbacks: Callbacks[E]
callbacks.push(callback); // error!
// const callbacks: Callback<number>[] | Callback<string>[]
當您呼叫 時callbacks.push()， 的型別callbacks失去了它的通用性（通用性？通用性？隨便）并且只被視為一個聯合。由于callbacks和callback要么是聯合型別，要么被限制為聯合型別，編譯器會忘記它們是相互關聯的。它擔心不可能的情況，例如 where callbacksis a Callback<number>[]while callbackis a Callback<string>。
至少在 TypeScript 4.5 之前，這是 TypeScript 中的一個設計限制（或缺失的功能）。有關詳細討論，請參閱microsoft/TypeScript#30581。
幸運的是，Microsoft/TypeScript#47109 上的修復應該隨 TypeScript 4.6 一起發布。除此之外，它保持了 的泛型性 (???♂?) callbacks.push()，你的問題就消失了：
// TS4.6
callbacks.push(callback); // okay
// const callbacks: Callbacks[E]
// (method) Array<Callback<CallbackTypes[E]>>.push(
// ...items: Callback<CallbackTypes[E]>[]): number
所以如果你可以升級typescript@next或者等到TS4.6發布，那么這個問題或多或少會自行解決（只要你callback像我這里那樣重新定義引數）。
在那之前，您所能做的就是使用型別斷言來告訴編譯器它自己無法弄清楚的事情。例如：
// TS4.5-
const callbacks = this.callbacks[event] as Callback<CallbackTypes[E]>[];
callbacks.push(callback); // okay
現在沒有錯誤，因為您已經從編譯器中取出了維護型別安全的作業。你說的callbacks是 a Callback<CallbackTypes[E]>[]，編譯器相信你。只要事實證明這是真的，你就不會有問題。但是，如果您對編譯器撒謊，無論是意外還是其他方式：
// TS4.5-
const callbacks = this.callbacks[MyEvent.One]
as Callback<CallbackTypes[E]>[]; // no compiler error
您仍然不會遇到編譯器錯誤，但您可能會在運行時遇到問題。
這意味著：如果您使用型別斷言，請格外小心以確保您負責任地這樣做。但希望您可以使用 ms/TS#47109 中的修復程式，它支持沒有型別斷言的相關聯合，并且會捕獲類似上面的錯誤：
// TS4.6
const callbacks = this.callbacks[MyEvent.One];
callbacks.push(callback); // error!
TS4.5 Playground 代碼鏈接
TS4.6 Playground 代碼鏈接
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/401137.html