how fix typeguard for payload in this example | TypeScript Community | Page 1

proud cradle Jan 20, 2023, 7:23 AM

#

how to make a fix to be sure when we us typeguard here , payload should be boolean in this case ?
thanks

enum MSGTYPES {
  a,b,c,d,e,f
}


type MessageTypeObject<T extends MSGTYPES, V> = { type: T; payload: V; };

// a messages Maps entries where we define enumerations data type
type MessageTypeMap =[
    [[MSGTYPES.a, MSGTYPES.b, MSGTYPES.c], boolean],
    [[MSGTYPES.d, MSGTYPES.e], string],
    [[MSGTYPES.f], FormData],
]

type MessageType<T extends MSGTYPES[]> = {
    [K in T[number]]: K extends MessageTypeMap[number][0][number] ? MessageTypeObject<K, MessageTypeMap[number][1]> : never;
} [T[number]];


type testmsg = [MSGTYPES.a, MSGTYPES.f]

function onMessage( messageType: MessageType<testmsg> ): void {
    const { type, payload } = messageType;
    if ( type === MSGTYPES.a ) {
        payload; // should be boolean 🔴
    }
}

tawny pagodaBOT Jan 20, 2023, 7:23 AM

#

jonLepage#7984

Playground Link

Preview:```ts
enum MSGTYPES {
a,
b,
c,
d,
e,
f,
}

type MessageTypeObject<T extends MSGTYPES, V> = {
type: T
payload: V
}

// a messages Maps entries where we define enumerations data type
type MessageTypeMap = [
[[MSGTYPES.a, MSGTYPES.b, MSGTYPES.c], boolean],
[[MSGTYPES.d, MSGTYPES.e], string],
...```

thick gust Jan 20, 2023, 7:28 AM

#

!hb discriminated union

tawny pagodaBOT Jan 20, 2023, 7:28 AM

#

Get Started / TypeScript for Functional Programmers

Discriminated Unions

thick gust Jan 20, 2023, 7:28 AM

#

use that rather than, uh, any of this

#

if you really want MessageTypeMap, create a discriminated union by mapping over it

raven mountain Jan 20, 2023, 7:31 AM

#

rather

#

it's impossible by using any of that

#

ah actually it should be fine if it outputs a union

merry abyss Jan 20, 2023, 7:34 AM

#

make suer your TypeScript >= 4.6 https://www.typescriptlang.org/docs/handbook/release-notes/typescript-4-6.html#control-flow-analysis-for-destructured-discriminated-unions

you can check the playground URL below

enum MSGTYPES {
  a,
  b,
  c,
  d,
  e,
  f,
}

type MessageTypeObject<T extends MSGTYPES, V> = { type: T; payload: V };

type MessageTypes =
  | MessageTypeObject<MSGTYPES.a | MSGTYPES.b | MSGTYPES.c, boolean>
  | MessageTypeObject<MSGTYPES.d | MSGTYPES.e, string>
  | MessageTypeObject<MSGTYPES.f, FormData>;

function onMessage(messageType: MessageTypes): void {
  const { type, payload } = messageType;
  if (type === MSGTYPES.a) {
    console.log(payload);
  }
}

Documentation - TypeScript 4.6

TypeScript 4.6 Release Notes

tawny pagodaBOT Jan 20, 2023, 7:34 AM

#

homura#6897

Playground Link

Preview:```ts
enum MSGTYPES {
a,
b,
c,
d,
e,
f,
}

type MessageTypeObject<T extends MSGTYPES, V> = {
type: T
payload: V
}

raven mountain Jan 20, 2023, 7:35 AM

#

well...

#

<4.6 is fine if you don't destructure

#

note that the original approach is perfectly fine

#

after fixing it up:

tawny pagodaBOT Jan 20, 2023, 7:37 AM

#

n_n#2622

Playground Link

Preview:ts // 8< ...

raven mountain Jan 20, 2023, 7:37 AM

#

!ts

tawny pagodaBOT Jan 20, 2023, 7:37 AM

#

// 8<
enum MSGTYPES {
  a,b,c,d,e,f
}

type MessageTypeMap = {
	[MSGTYPES.a]: boolean;
	[MSGTYPES.b]: boolean;
	[MSGTYPES.c]: boolean;
	[MSGTYPES.d]: string;
	[MSGTYPES.e]: string;
	[MSGTYPES.f]: FormData;
}

type MessageType<T extends MSGTYPES[]> = {
	[K in T[number]]: { type: K; payload: MessageTypeMap[K]; };
}[T[number]];

function onMessage( messageType: MessageType<[MSGTYPES.a, MSGTYPES.f]> ): void {
	const { type, payload } = messageType;
	if ( type === MSGTYPES.a ) {
		payload; // should be boolean 🔴
//   ^? - const payload: boolean
	}
}```

raven mountain Jan 20, 2023, 7:38 AM

#

there are ways to keep a, b, and c together to reduce duplication, like homura's approach

tawny pagodaBOT Jan 20, 2023, 7:42 AM

#

n_n#2622

Playground Link

Preview:ts // 8< ...

raven mountain Jan 20, 2023, 7:42 AM

#

or something simpler like this maybe?

#

!ts

tawny pagodaBOT Jan 20, 2023, 7:42 AM

#

// 8<
enum MSGTYPES { a, b, c, d, e, f }

type MessageType<T extends MSGTYPES = MSGTYPES> = T extends T ? (
	| { type: MSGTYPES.a | MSGTYPES.b | MSGTYPES.c; payload: boolean; }
	| { type: MSGTYPES.d | MSGTYPES.e; payload: string }
	| { type: MSGTYPES.f; payload: FormData }
) & { type: T; } : never;

function onMessage(messageType: MessageType<MSGTYPES.a | MSGTYPES.e>): void {
	const { type, payload } = messageType;
	if (type === MSGTYPES.a) {
		payload;
//   ^? - const payload: boolean
	}
}```

proud cradle Jan 20, 2023, 7:53 AM

#

thanks you so much all example idea are awesome !
@raven mountain yes duplication was a big issue for me, my first try was so ugly !
thanks for your code , i think is the most clean way to avoid duplication and the structure is not so ugly for the eyes.

interface MessageTypeMap {
    [MSGTYPES.scene_change]: { type: MSGTYPES.scene_change; message: boolean; };
    [MSGTYPES.battle_fallAnimation]: { type: MSGTYPES.battle_fallAnimation; message: string; };
    [MSGTYPES.battle_poolGenerated]: { type: MSGTYPES.battle_poolGenerated; message: number; };
}

type MessageType<T extends MSGTYPES[]> = {
    [K in T[number]]: K extends keyof MessageTypeMap ? MessageTypeMap[K] : never;
}[T[number]];

type testmsg = [MSGTYPES.scene_change, MSGTYPES.battle_fallAnimation, MSGTYPES.worldTreeView_selectEntity]
function onMessage( messageType: MessageType<testmsg> ): void {

#

!resolved

raven mountain Jan 20, 2023, 7:56 AM

#

interface MessageTypeMap {
    [MSGTYPES.scene_change]: { type: MSGTYPES.scene_change; message: boolean; };
    [MSGTYPES.battle_fallAnimation]: { type: MSGTYPES.battle_fallAnimation; message: string; };
    [MSGTYPES.battle_poolGenerated]: { type: MSGTYPES.battle_poolGenerated; message: number; };
}

type MessageType<T extends keyof MessageTypeMap> = T extends T ? MessageTypeMap[T] : never;
function onMessage( messageType: MessageType<MSGTYPES.scene_change | MSGTYPES.battle_fallAnimation | MSGTYPES.worldTreeView_selectEntity> ): void {
}

#

👀

proud cradle Jan 20, 2023, 7:57 AM

#

raven mountain ```ts interface MessageTypeMap { [MSGTYPES.scene_change]: { type: MSGTYPES.s...

yes it was my first try, i can now remove this ugly thing and replace with your structure 🙂

raven mountain Jan 20, 2023, 7:57 AM

#

oh wait is that your first try

#

i mean, it doesn't look that bad

proud cradle Jan 20, 2023, 7:58 AM

#

raven mountain oh wait is that your first try

yes i was try few structure before ask for help 🙂

raven mountain Jan 20, 2023, 7:59 AM

#

tawny pagoda ```ts // 8< enum MSGTYPES { a, b, c, d, e, f } type MessageType<T extends MSGTY...

type MessageTypes =
| { type: MSGTYPES.a | MSGTYPES.b | MSGTYPES.c; payload: boolean; }
| { type: MSGTYPES.d | MSGTYPES.e; payload: string }
| { type: MSGTYPES.f; payload: FormData };

type MessageType<T extends MSGTYPES = MSGTYPES> = T extends T ? MessageType & { type: T; } : never;

#

you could extract the union out...
... i think it'd be mostly for maintainability though - since MessageTypes and MessageType (leaving out the generic argument T) should be the same type

#how fix typeguard for payload in this example