Frontend Typescript Types Advanced

Frontend Typescript Types Advanced

When to use this skill

• Building type-safe libraries
• Creating complex type utilities
• Advanced type constraints

Workflow

• Use generics for reusable types
• Apply conditional types when needed
• Leverage mapped types
• Use template literal types
• Implement branded types for safety

Instructions

Conditional Types

type IsString<T> = T extends string ? true : false;

type A = IsString<string>; // true
type B = IsString<number>; // false

Mapped Types

type Readonly<T> = {
  readonly [P in keyof T]: T[P];
};

type Optional<T> = {
  [P in keyof T]?: T[P];
};

Template Literal Types

type EventName = 'click' | 'focus' | 'blur';
type Handler = `on${Capitalize<EventName>}`;
// 'onClick' | 'onFocus' | 'onBlur'

Utility Types

// Pick
type UserPreview = Pick<User, 'id' | 'name'>;

// Omit
type UserWithoutPassword = Omit<User, 'password'>;

// Partial
type PartialUser = Partial<User>;

// Required
type RequiredUser = Required<PartialUser>;

// Record
type Roles = Record<string, Permission[]>;

Branded Types

type UserId = string & { __brand: 'UserId' };
type ProductId = string & { __brand: 'ProductId' };

function getUser(id: UserId) { }
function getProduct(id: ProductId) { }

const userId = 'user-123' as UserId;
getUser(userId); // OK
// getProduct(userId); // Error

Resources

• Use generics for flexibility
• Conditional types for logic
• Mapped types for transformations