Typescript Union Merging

Zemnmez
2 min readOct 19, 2020

Typescript has a concept called ‘Declaration Merging’. The idea is that some kinds of declarations can be specified multiple times, and the ‘final’ or ‘actual’ value is the result of those combined declarations:

interface A { name: string }
interface A { age: number }

Here, we declare using declaration merging to define an interface that is the same as:

interface A { name: string; age: number }

This is really useful for writing code along with contextual, but global type information. Consider this example of defining Action types in the common reducer pattern of event handling / dispatch:

enum ActionKind { }enum ActionKind { AddFile = 0 }
interface ActionAddFile {
type: ActionKind.AddFile
file: File
}
enum ActionKind { DeleteFile = 1 }
interface ActionDeleteFile {
type: ActionKind.DeleteFile
file: File
}

We’ve nicely defined two action types: one, AddFile adds a file, while the other DeleteFile deletes a file. These can be uniquely identified by their ActionKind.

Writing the actions this way avoids having to have a big enum ActionKind{ AddFile, DeleteFile, Something, SomethingElse } which would have to be maintained separately to the actions themselves.

Almost always, however, we also want an Action type that contains a union, to be discriminated on Action.type , i.e:

type Action = ActionAddFile |…

--

--

No responses yet