10 TypeScript Tips Advanced

TypeScript jauh lebih dalam dari sekadar menambahkan tipe ke JavaScript. Mari explore fitur-fitur advanced-nya.

1. Template Literal Types

type Route = `/${string}`;
type EventName = `on${Capitalize<string>}`;

const route: Route = '/dashboard'; // ✓
const event: EventName = 'onClick'; // ✓

2. Conditional Types

type IsArray<T> = T extends any[] ? true : false;
type A = IsArray<string[]>; // true
type B = IsArray<string>;   // false

3. Infer Keyword

type UnpackPromise<T> = T extends Promise<infer U> ? U : T;
type Resolved = UnpackPromise<Promise<string>>; // string

4. Mapped Types dengan Remapping

type Getters<T> = {
  [K in keyof T as `get${Capitalize<string & K>}`]: () => T[K];
};

5. Satisfies Operator

const config = {
  port: 3000,
  host: 'localhost',
} satisfies Record<string, string | number>;

// config.port masih bertipe number, bukan string | number!

Kuasai fitur-fitur ini dan kode TypeScript-mu akan jauh lebih robust dan ekspresif.