Acceder Keys or Values en TypeScript

Objects

Obtener el type de un valor

const User = {
  name: 'Juan',
  age: 26,
  isDev: true,
  id: null,
};

type Data = typeof User;
type Name = Data['name']; // string
type Age = Data['age']; // number
type Dev = Data['isDev']; // boolean
type Id = Data['id']; // null

Obtener el valor como type

const User = {
  name: 'Juan',
  age: 26,
  isDev: true,
  id: null,
} as const; // Nota el uso de -> as const

type Data = typeof User;
type Name = Data['name']; // Juan
type Age = Data['age']; // 26
type Dev = Data['isDev']; // true
type Id = Data['id']; // null
// Para Id, null es el value y el type al mismo tiempo

Convertir object a union

const User = {
  name: 'Juan',
  age: 26,
  isDev: true,
  id: null,
} as const;

// union de los keys
type KeysUnion = keyof typeof User;
// "name" | "age" | "isDev" | "id"

// union de los values
type ValuesUnion = (typeof User)[keyof typeof User];
// true | "Juan" | 26 | null

// Si no agregas "as const" obtienes los tipos de cada valor.
const User = {
  name: 'Juan',
  age: 26,
  isDev: true,
  id: null,
}; // as const

type ValuesUnion = (typeof User)[keyof typeof User];
// string | number | boolean | null

Crear union usando utilidades

const User = {
  name: 'Juan',
  age: 26,
  isDev: true,
  id: null,
} as const;

type DataUnion = (typeof User)[Exclude<keyof typeof User, 'age' | 'isDev'>];
// 'Juan' | null;
type DataUnion = (typeof User)[Extract<keyof typeof User, 'age' | 'isDev'>];
// true | 26;

// Opcionalmente, puedes usar types para mejorar la legibilidad

type TUser = typeof User;
type KeysUnion = keyof TUser;

type DataUnion = TUser[Exclude<KeysUnion, 'age' | 'isDev'>];
// 'Juan' | null;
type DataUnion = TUser[Extract<KeysUnion, 'age' | 'isDev'>];
// true | 26;

Arrays

const animals = ['🐶', '🐱', '🦄'] as const;

type DogOrCat = (typeof animals)[0 | 1]; // "🐶" | "🐱"
type Animals = (typeof animals)[number]; // "🐶" | "🐱" | "🦄"

Discriminated unions

Discriminated unions son unions con propiedades en común utilizadas para diferenciar cada miembro de la union

Convertir discriminated union

type Event =
  | {
      type: 'click';
      event: MouseEvent;
    }
  | {
      type: 'focus';
      event: FocusEvent;
    }
  | {
      type: 'keydown';
      event: KeyboardEvent;
    };

type ClickEvent = Event['type'];
// "click" | "focus" | "keydown"

type ClickEvent = Event['event'];
// MouseEvent | FocusEvent | KeyboardEvent

Convertir union usando utilidades

type Event =
  | {
      type: 'click';
      event: MouseEvent;
    }
  | {
      type: 'focus';
      event: FocusEvent;
    }
  | {
      type: 'keydown';
      event: KeyboardEvent;
    };

// Puedes usar tambien algo como: { event: MouseEvent }

type ClickEvent = Extract<Event, { type: 'click' }>;
//  { type: 'click'; event: MouseEvent; }

type FocustAndKeyboardEvent = Exclude<Event, { type: 'click' }>;
//  { type: 'focus'; event: FocusEvent; } | { type: 'keydown'; event: KeyboardEvent; }

PD: Estas son mis notas del curso de Total TypeScript. Si deseas profundizar, te recomiendo mucho el curso, es excelente.