# TypeScript Best Practices for Large Projects TypeScript is powerful, but it's easy to write TypeScript that's hard to maintain. Here's how to keep your types manageable as your project grows. ## Type vs Interface Both work, but be consistent: ```typescript // Use interface for objects interface User { id: number; name: string; email: string; } // Use type for unions, intersections, tuples type Status = 'pending' | 'approved' | 'rejected'; type Point = [number, number]; type UserWithProfile = User & { profile: Profile }; ``` ## Strict Configuration Always enable strict mode: ```json { "compilerOptions": { "strict": true, "noImplicitAny": true, "strictNullChecks": true, "strictFunctionTypes": true, "strictBindCallApply": true, "strictPropertyInitialization": true, "noImplicitThis": true, "alwaysStrict": true } } ``` ## Utility Types Use built-in utilities: ```typescript interface User { id: number; name: string; email: string; password: string; } // Pick specific properties type PublicUser = Pick; // Omit specific properties type UserWithoutPassword = Omit; // Make all properties optional type PartialUser = Partial; // Make all properties required type RequiredUser = Required; // Make all properties readonly type ImmutableUser = Readonly; ``` ## Generic Functions Write reusable functions: ```typescript // Bad: Specific to one type function getFirstUser(array: User[]): User | undefined { return array[0]; } // Good: Works with any type function getFirst(array: T[]): T | undefined { return array[0]; } // Usage const firstUser = getFirst(users); const firstPost = getFirst(posts); ``` ## Discriminated Unions Type-safe state management: ```typescript type ApiResponse = | { status: 'loading' } | { status: 'error'; error: string } | { status: 'success'; data: T }; function handleResponse(response: ApiResponse) { switch (response.status) { case 'loading': return 'Loading...'; case 'error': return `Error: ${response.error}`; case 'success': return response.data; // TypeScript knows data exists } } ``` ## Type Guards Runtime type checking: ```typescript function isUser(value: unknown): value is User { return ( typeof value === 'object' && value !== null && 'id' in value && 'name' in value && 'email' in value ); } // Usage if (isUser(data)) { console.log(data.name); // TypeScript knows it's a User } ``` ## Avoid Any ```typescript // Bad function process(data: any) { return data.something; } // Better: Use unknown function process(data: unknown) { if (isValidData(data)) { return data.something; } } // Best: Use generic function process(data: T) { return data.something; } ``` ## Const Assertions Create readonly types: ```typescript // Without const const colors = ['red', 'green', 'blue']; // Type: string[] // With const const colors = ['red', 'green', 'blue'] as const; // Type: readonly ['red', 'green', 'blue'] type Color = typeof colors[number]; // Type: 'red' | 'green' | 'blue' ``` ## Branded Types Prevent mixing similar types: ```typescript type UserId = string & { readonly brand: unique symbol }; type PostId = string & { readonly brand: unique symbol }; function getUserId(id: string): UserId { return id as UserId; } function getUser(userId: UserId) { // ... } const userId = getUserId('123'); const postId = '456' as PostId; getUser(userId); // ✅ OK getUser(postId); // ❌ Error: PostId is not assignable to UserId ``` ## Template Literal Types Type-safe string patterns: ```typescript type HTTPMethod = 'GET' | 'POST' | 'PUT' | 'DELETE'; type Route = `/api/${string}`; type APIEndpoint = `${HTTPMethod} ${Route}`; // Valid const endpoint1: APIEndpoint = 'GET /api/users'; const endpoint2: APIEndpoint = 'POST /api/posts'; // Invalid const endpoint3: APIEndpoint = 'GET /users'; // Error ``` ## Conditional Types Dynamic type logic: ```typescript type IsArray = T extends any[] ? true : false; type A = IsArray; // true type B = IsArray; // false // Practical example type Flatten = T extends Array ? U : T; type Str = Flatten; // string type Num = Flatten; // number ``` ## Mapped Types Transform existing types: ```typescript type Nullable = { [K in keyof T]: T[K] | null; }; interface User { id: number; name: string; } type NullableUser = Nullable; // { id: number | null; name: string | null } ``` ## Function Overloads Multiple function signatures: ```typescript function createElement(tag: 'div'): HTMLDivElement; function createElement(tag: 'span'): HTMLSpanElement; function createElement(tag: 'button'): HTMLButtonElement; function createElement(tag: string): HTMLElement { return document.createElement(tag); } const div = createElement('div'); // Type: HTMLDivElement const span = createElement('span'); // Type: HTMLSpanElement ``` ## Namespace Pattern Organize related types: ```typescript namespace API { export interface Request { method: string; url: string; } export interface Response { status: number; data: T; } export type Error = { message: string; code: number; }; } // Usage function handleRequest(req: API.Request): Promise> { // ... } ``` ## Error Handling Type-safe errors: ```typescript class AppError extends Error { constructor( message: string, public code: string, public statusCode: number ) { super(message); this.name = 'AppError'; } } function assertNever(x: never): never { throw new Error(`Unexpected value: ${x}`); } type Result = | { success: true; value: T } | { success: false; error: E }; async function fetchUser(id: string): Promise> { try { const user = await db.users.findOne(id); return { success: true, value: user }; } catch (error) { return { success: false, error: error instanceof Error ? error : new Error('Unknown error') }; } } ``` ## Testing Types Test your types: ```typescript // Type test utilities type Equals = (() => G extends T ? 1 : 2) extends (() => G extends U ? 1 : 2) ? true : false; // Usage type Test1 = Equals; // true type Test2 = Equals; // false ``` ## Common Pitfalls ### 1. Type Assertions ```typescript // Avoid const user = data as User; // Better const user = isUser(data) ? data : null; ``` ### 2. Non-null Assertions ```typescript // Avoid const name = user!.name; // Better const name = user?.name ?? 'Unknown'; ``` ### 3. Index Signatures ```typescript // Avoid interface Config { [key: string]: any; } // Better interface Config { port: number; host: string; [key: string]: string | number; } ``` ## Conclusion Good TypeScript is about: - Leveraging the type system - Avoiding escape hatches (any, as) - Using utility types - Writing type-safe code - Making illegal states unrepresentable Type safety is a journey, not a destination. Improve gradually.

#TypeScript

TypeScript Best Practices for Large Projects