Typescript union string literal in another union type

Question

type Status = 'Active' | 'Pending' | 'Failed';

type User = {
  name: string;
  age: number;
  status: 'active' // how to get autocomplete, it's lowercase??
} | {
  error: string;
  id: string;
  status: 'failed' // can it be something like Status['Failed']
} |
{
  id: string;
  status: 'pending'
}

Given Status as string union type, sometimes there is need to use the type in another complex object type. Different field structure for each status values.

How to make sure type safety when creating the User with status field?

I would like to reuse same type, something like below

const fooBarFn(status: Status) {
  if (status === 'Pending') {
    return {
      id: '123',
      status
    }
  }
  // rest of fn
}

Are there any other patterns or best practices for the above?

some solution

type RecordX<K extends keyof any> = {
  [P in K]: P;
};

type Status = 'Active' | 'Pending' | 'Failed';

type User<T extends RecordX<Status>> = {   // how to default assign
  name: string;
  age: number;
  status: T['Active']
} | {
    error: string;
    id: string;
    status: T['Failed']
  } |
{
  status: T['Pending']
}

const user: User = {   // need the template type parameter
  name: 'foobar';
  age: 99,
  status: 'NotWorking'  // not working
}

How to default the first generic parameter, so that user doesn't need to provide the type

Answer 1

You can achieve this by using enum keyword like this:

enum Status {
  ACTIVE = 'ACTIVE',
  PENDING = 'PENDING',
  FAILED = 'FAILED',
}

type User = {
  name: string;
  age: number;
  status: Status.ACTIVE;
} | {
  error: string;
  id: string;
  status: Status.FAILED;
} |
{
  id: string;
  status: Status.PENDING;
}

Later on you can do this to check the User typing.

const user: User = { ... }

if (user.status === Status.PENDING) {
  // Do something if status is pending
}

Answer 2

One possible approach is to define Status in terms of User , instead of doing it the other way around. That way you don't have to repeat yourself very much, and you don't have to try to get the compiler to autocomplete the individual statuses. It looks like this:

type User = {
    name: string;
    age: number;
    status: 'Active'
} | {
    error: string;
    id: string;
    status: 'Failed'
} | {
    id: string;
    status: 'Pending'
}

type Status = User['status'];
// type Status = "Active" | "Failed" | "Pending"

By indexing into the discriminanted union type User with the "status" key, we get the desired union type for Status .

Playground link to code

Answer 3

First converted literal Status to object format

type Intermediate = {
  Active: 'Active';
  Pending: 'Pending';
  Failed: 'Failed';
}

Then assigned as generic type for Status

type RecordX<K extends keyof any> = {
  [P in K]: P;
};

type Status = 'Active' | 'Pending' | 'Failed';

type User<T extends RecordX<Status> = RecordX<Status>> = {
  name: string;
  age: number;
  status: T['Active']
} | {
  error: string;
  id: string;
  status: T['Failed']
} |
{
  status: T['Pending']
}

const user: User = {
  name: 'foobar';
  age: 99,
  status: 'Active' // autocomplete works
}