TypeScript Skill

Quick Start

// Basic type annotations const name: string = "John"; const age: number = 25; const isActive: boolean = true;

// Array types const numbers: number[] = [1, 2, 3]; const users: Array<User> = [user1, user2];

// Object types interface User { id: number; name: string; email?: string; // optional }

// Function types const greet = (name: string): string => Hello, ${name}!; const add = (a: number, b: number): number => a + b;

Common Patterns

Interface Definitions

// Basic interface interface Product { id: string; name: string; price: number; }

// Interface with optional properties interface UserProfile { id: number; username: string; avatar?: string; bio?: string; }

// Interface extending another interface AdminUser extends UserProfile { permissions: string[]; role: "admin" | "super_admin"; }

// Generic interface interface ApiResponse<T> { data: T; status: number; message: string; }

// Usage const userResponse: ApiResponse<User> = { data: { id: 1, username: "john", email: "john@example.com" }, status: 200, message: "Success", };

Generic Types and Functions

// Generic function function identity<T>(arg: T): T { return arg; }

// Generic function with constraints interface Lengthwise { length: number; }

function getLength<T extends Lengthwise>(arg: T): number { return arg.length; }

// Generic class class Box<T> { private contents: T;

constructor(value: T) { this.contents = value; }

getValue(): T { return this.contents; } }

// Generic utility function function createApiResponse<T>(data: T, status = 200): ApiResponse<T> { return { data, status, message: status >= 400 ? "Error" : "Success", }; }

Utility Types

// Pick - select specific properties type UserContactInfo = Pick<User, "email" | "phone">;

// Omit - remove specific properties type CreateUserRequest = Omit<User, "id" | "createdAt">;

// Partial - make all properties optional type PartialUser = Partial<User>;

// Required - make all properties required type RequiredUser = Required<UserProfile>;

// Record - create object type with specific keys type StatusMap = Record<"pending" | "approved" | "rejected", string>;

// Extract properties that match a condition type StringProperties<T> = { [K in keyof T]: T[K] extends string ? K : never; }[keyof T];

// Function property extraction type FunctionPropertyNames<T> = { [K in keyof T]: T[K] extends Function ? K : never; }[keyof T];

type FunctionProperties<T> = Pick<T, FunctionPropertyNames<T>>;

Type Guards and Discriminated Unions

// Discriminated union interface LoadingState { status: "loading"; }

interface SuccessState<T> { status: "success"; data: T; }

interface ErrorState { status: "error"; error: string; }

type DataState<T> = LoadingState | SuccessState<T> | ErrorState;

// Type guard function function isLoading<T>(state: DataState<T>): state is LoadingState { return state.status === "loading"; }

function isSuccess<T>(state: DataState<T>): state is SuccessState<T> { return state.status === "success"; }

// Usage function handleDataState<T>(state: DataState<T>) { if (isLoading(state)) { console.log("Loading..."); } else if (isSuccess(state)) { console.log("Data:", state.data); } else { console.log("Error:", state.error); } }

Advanced Type Patterns

// Conditional types type NonNullable<T> = T extends null | undefined ? never : T;

// Mapped types type OptionalFields<T> = { [K in keyof T]?: T[K]; };

// Readonly mapped type type ReadonlyUser = { readonly [K in keyof User]: User[K]; };

// Template literal types type EventName = on${Capitalize<string>}; type EventHandler = Record<EventName, Function>;

// Recursive utility types type DeepPartial<T> = { [P in keyof T]?: T[P] extends object ? DeepPartial<T[P]> : T[P]; };

API Response Patterns

// Standard API response interface PaginatedResponse<T> { data: T[]; pagination: { page: number; limit: number; total: number; totalPages: number; }; }

// Error response interface ApiError { code: string; message: string; details?: Record<string, any>; }

// Union of success and error responses type ApiResult<T> = | { success: true; data: T } | { success: false; error: ApiError };

// Type-safe API client class ApiClient { async get<T>(url: string): Promise<ApiResult<T>> { try { const response = await fetch(url); const data = await response.json(); return { success: true, data }; } catch (error) { return { success: false, error: { code: "NETWORK_ERROR", message: error.message }, }; } } }

React/Component Patterns

// Component props with generics interface ListProps<T> { items: T[]; renderItem: (item: T) => React.ReactNode; keyExtractor: (item: T) => string; }

function List<T>({ items, renderItem, keyExtractor }: ListProps<T>) { return ( <div> {items.map(item => ( <div key={keyExtractor(item)}> {renderItem(item)} </div> ))} </div> ); }

// Hook with generic state interface State<T> { data: T | null; loading: boolean; error: string | null; }

function useApi<T>(url: string): State<T> { const [state, setState] = useState<State<T>>({ data: null, loading: true, error: null });

useEffect(() => { fetch(url) .then(res => res.json()) .then(data => setState({ data, loading: false, error: null })) .catch(error => setState({ data: null, loading: false, error: error.message })); }, [url]);

return state; }

Requirements

• TypeScript 4.5+ (for latest utility types and template literal types)

• Understanding of basic JavaScript concepts

• Familiarity with object-oriented programming concepts

• Knowledge of async/await patterns for API work

Best Practices

• Use interface for object shapes unless you need union types, then use type aliases

• Prefer generic types over any for better type safety

• Use utility types (Pick, Omit, Partial) to transform existing types

• Create type guards for discriminated unions

• Leverage conditional types for advanced type transformations

• Use readonly for immutable data structures

• Prefer const assertions for literal types and readonly arrays

Common Gotchas

• any vs unknown : Use unknown when you need type checking before usage

• [] as any[] : Avoid, use proper typing instead

• Function overload ordering: Most specific signatures first

• Generic constraints: Use extends to limit generic types

• Type inference: Let TypeScript infer when possible, provide explicit types when needed