From f6ee3223f3e8348de7fb4ac5ac69d34bf611247e Mon Sep 17 00:00:00 2001 From: Mike Stay Date: Wed, 9 Jul 2025 23:42:06 -0600 Subject: [PATCH] Update Type Compatibility.md Demonstrates the sound way to implement the pattern wherein one parameter is a value constraining the type of another parameter. --- .../copy/en/reference/Type Compatibility.md | 23 ++++++++++++++++++- 1 file changed, 22 insertions(+), 1 deletion(-) diff --git a/packages/documentation/copy/en/reference/Type Compatibility.md b/packages/documentation/copy/en/reference/Type Compatibility.md index b8d4566db5cb..46365a7448a1 100644 --- a/packages/documentation/copy/en/reference/Type Compatibility.md +++ b/packages/documentation/copy/en/reference/Type Compatibility.md @@ -168,7 +168,28 @@ listenEvent(EventType.Mouse, ((e: MyMouseEvent) => listenEvent(EventType.Mouse, (e: number) => console.log(e)); ``` -You can have TypeScript raise errors when this happens via the compiler flag [`strictFunctionTypes`](/tsconfig#strictFunctionTypes). +You can have TypeScript raise errors when this happens via the compiler flag [`strictFunctionTypes`](/tsconfig#strictFunctionTypes). + +A sound approach that works with the `strictFunctionTypes` flag is to use conditional types: +``` +// Assuming EventType, Event, MyMouseEvent, and MyKeyEvent as above + +type GenericEvent = E extends EventType.Mouse ? MyMouseEvent : MyKeyEvent + +function listenEvent(eventType: E, handler: (n: GenericEvent) => void): void; +function listenEvent(eventType: EventType, handler: (n: GenericEvent) => void): void { + /* ... */ +} + +// Valid +listenEvent(EventType.Mouse, (e: MyMouseEvent) => console.log(e.x + "," + e.y)); +// Valid +listenEvent(EventType.Keyboard, (e: MyKeyEvent) => console.log(e.keyCode)); +// Invalid +listenEvent(EventType.Mouse, (e: MyKeyEvent) => console.log(e.keyCode)); +// Invalid +listenEvent(EventType.Mouse, (e: Event) => console.log(e.x + "," + e.y)); +``` ### Optional Parameters and Rest Parameters