1 reply

Help me understanding how a type works

I'm currently trying to understand how Tiptap 's

CommandManager

CommandManager

works and especially how the commands are strongly typed.
I have extracted the type declarations required to have the strong and dynamic typing of the commands handled by the

CommandManager

CommandManager

. I understand all but one of the types involved and it's the

UnionToIntersection

UnionToIntersection

type (see attached typescript playground).

While I see what this type does, I don't understand how it does it, if anyone can help me crack this code it would be great.

Basically this type turns Unions of types like this one :

{
    doStuff: (arg1: string) => T;
    command: (type: "bob") => void;
} | {
    doStuff: (arg1: number, arg2: string) => T;
}

{
    doStuff: (arg1: string) => T;
    command: (type: "bob") => void;
} | {
    doStuff: (arg1: number, arg2: string) => T;
}

into Intersections of types like this one :

{
    doStuff: (arg1: string) => T;
    command: (type: "bob") => void;
} & { // notice this simbole changing ?
    doStuff: (arg1: number, arg2: string) => T;
}

{
    doStuff: (arg1: string) => T;
    command: (type: "bob") => void;
} & { // notice this simbole changing ?
    doStuff: (arg1: number, arg2: string) => T;
}

GitHub

GitHub - ueberdosis/tiptap at main

The headless rich text editor framework for web artisans. - GitHub - ueberdosis/tiptap at main

GitHub

tiptap/packages/core/src/CommandManager.ts at develop · ueberdosis/...

The headless rich text editor framework for web artisans. - ueberdosis/tiptap

KP-C

Kevin Powell - Community•2y ago•

1 reply

Rägnar O'ock

Help me understanding how a type works

I'm currently trying to understand how Tiptap 's

CommandManager

CommandManager

works and especially how the commands are strongly typed.
I have extracted the type declarations required to have the strong and dynamic typing of the commands handled by the

CommandManager

CommandManager

. I understand all but one of the types involved and it's the

UnionToIntersection

UnionToIntersection

{
    doStuff: (arg1: string) => T;
    command: (type: "bob") => void;
} | {
    doStuff: (arg1: number, arg2: string) => T;
}

{
    doStuff: (arg1: string) => T;
    command: (type: "bob") => void;
} | {
    doStuff: (arg1: number, arg2: string) => T;
}

into Intersections of types like this one :

{
    doStuff: (arg1: string) => T;
    command: (type: "bob") => void;
} & { // notice this simbole changing ?
    doStuff: (arg1: number, arg2: string) => T;
}

{
    doStuff: (arg1: string) => T;
    command: (type: "bob") => void;
} & { // notice this simbole changing ?
    doStuff: (arg1: number, arg2: string) => T;
}

GitHub

GitHub - ueberdosis/tiptap at main

The headless rich text editor framework for web artisans. - GitHub - ueberdosis/tiptap at main

GitHub

tiptap/packages/core/src/CommandManager.ts at develop · ueberdosis/...

The headless rich text editor framework for web artisans. - ueberdosis/tiptap

Help me understanding how a type works

Help me understanding how a type works

Similar Threads

Similar Threads

Similar Threads