CODEWITHSUNDEEP
typescripttypescript-typings
Freewind
Freewind

Reputation: 198238

How can I reference to a type which is part of a union type, in TypeScript?

I defined a union type for actions in TypeScript:

type Action = {
  type: 'reset',
} | {
  type: 'add',
  payload: number
} | {
  type: 'minus',
  payload: number
}

In some functions, I want to reference to a part of the union type, like:

function handleAdd(state: State, action: {
  type: 'add',
  payload: number
}): State => {
  // handle the add
}

Is there a way to simplify the typing of action so I don't need to repeat the full definition of

{
  type: 'add',
  payload: number
}

here?

Update:

I don't want to predefine each action type separately. Is there another solution, like Action[type='add']?

Upvotes: 5

Views: 1534

Answers (3)

Linda Paiste
Linda Paiste

Reputation: 42188

create a type which narrows your union:

type TypedAction<T extends Action['type']> = Extract<Action, {type: T}>

and then use like:

(action: TypedAction<"add">)

Playground Link

Upvotes: 3

Aleksey L.
Aleksey L.

Reputation: 37938

This can be achieved relying on distributive conditional types:

type ExtractType<T extends Action['type'], A = Action> =
    A extends { type: T } ? A : never;

type Add = ExtractType<'add'>; // { type: 'add'; payload: number; }

Playground

Distributive conditional types are automatically distributed over union types during instantiation. For example, an instantiation of T extends U ? X : Y with the type argument A | B | C for T is resolved as (A extends U ? X : Y) | (B extends U ? X : Y) | (C extends U ? X : Y)

Upvotes: 6

w08r
w08r

Reputation: 1804

Reactor the branches of the Union out, so

type Add = {
  type: 'add',
  payload: number
};
...
type Action = Add | ...;
...

Upvotes: 1

Related Questions