Common Built‐in and Utility Types

Record<Keys, Type>

type Route = { path: string; name: string; component: string };

const routes: Record<string, Route> = {
    home: { path: '/', name: 'Home', component: 'HomeComponent' },
    about: { path: '/about', name: 'About', component: 'AboutComponent' },
    contact: { path: '/contact', name: 'Contact', component: 'ContactComponent' },
}

---

Required<Type>

type Product = { id: number; name: string; price: number; description?: string; };

declare function createProductOnAmazon(product: Required<Product>): void;

Partial<Type>

type Product = { id: number; name: string; price: number; description?: string; };

declare function updateProduct(product: Partial<Product>): void;

---

Exclude<UnionType, ExcludedMembers>

type Role = 'admin' | 'userPremium' | 'userBasic' | 'userTrial' | 'guest';

type UserRoles = Exclude<Role, 'guest'>;

Extract<Type, Union>

type State =
    | { status: "loading" }
    | { status: "success"; data: Array<{ id: number; name: string }> }
    | { status: "error"; error: Error };

type SuccessEvent = Extract<State, { status: "success" }>;

---

Pick<Type, Keys>

type Product = { id: number; name: string; amazonUrl: string; mercadoLibreUrl: string; };

declare function getProductUrlsById(id: number): Pick<Product, "amazonUrl" | "mercadoLibreUrl">;

Omit<Type, Keys>

type Product = { id: number; name: string; price: number; description?: string; };

type NewProduct = Omit<Product, "id">;

---

ReturnType<Type>

const getProductById = (id: number) => [
  { id: 1, name: "Product 1", price: 100 },
  { id: 2, name: "Product 2", price: 200 },
].find(product => product.id === id);

type Product = ReturnType<typeof getProductById>;

Parameters<Type>

declare function showCordOnMap(x: number, y: number, z: number): void;

type Cord = Parameters<typeof showCordOnMap>;

---

Promise<Type>

type Product = { id: number; name: string; price: number };

const getProducts: () => Promise<Product[]> = async () => [
  { id: 1, name: "Product 1", price: 100 },
  { id: 2, name: "Product 2", price: 200 },
];

Awaited<Type>

const getProductById = async (id: number) => [
  { id: 1, name: "Product 1", price: 100 },
  { id: 2, name: "Product 2", price: 200 },
].find(product => product.id === id);

type Product = Awaited<ReturnType<typeof getProductById>>;

NonNullable<Type>

const getProductById = (id: number) => [
  { id: 1, name: "Product 1", price: 100 },
  { id: 2, name: "Product 2", price: 200 },
].find(product => product.id === id);

type Product = NonNullable<ReturnType<typeof getProductById>>;

---

• TypeScript: Documentation - Utility Types
• YouTube / Matt Pocock: TypeScript's Utility Types... Blazing fast
• YouTube / Syntax: TypeScript Utilities You Should Know