# TypeScript Tips That Will Make You a Better Developer TypeScript has transformed how I write JavaScript. Beyond just adding types, it enables patterns that make code more robust, self-documenting, and maintainable. ## 1. Use `as const` for Literal Types Instead of string arrays, use const assertions for better type inference: ```typescript // ❌ Type: string[] const roles = ['admin', 'user', 'guest']; // ✅ Type: readonly ['admin', 'user', 'guest'] const roles = ['admin', 'user', 'guest'] as const; // Now you can derive types from it type Role = typeof roles[number]; // 'admin' | 'user' | 'guest' ``` ## 2. Discriminated Unions for State Management Handle different states explicitly: ```typescript type AsyncState = | { status: 'idle' } | { status: 'loading' } | { status: 'success'; data: T } | { status: 'error'; error: Error }; function handleState(state: AsyncState) { switch (state.status) { case 'idle': return ; case 'loading': return ; case 'success': return ; // data is available case 'error': return ; // error is available } } ``` ## 3. Generic Constraints Make your generics more precise: ```typescript // ❌ Too broad function getProperty(obj: T, key: string) { return obj[key]; // Error! } // ✅ Constrained properly function getProperty(obj: T, key: K): T[K] { return obj[key]; // Works and returns correct type! } const user = { name: 'Ali', age: 25 }; const name = getProperty(user, 'name'); // string const age = getProperty(user, 'age'); // number ``` ## 4. Template Literal Types Create powerful string patterns: ```typescript type HTTPMethod = 'GET' | 'POST' | 'PUT' | 'DELETE'; type APIEndpoint = '/users' | '/products' | '/orders'; type APIRoute = `${HTTPMethod} ${APIEndpoint}`; // 'GET /users' | 'GET /products' | 'GET /orders' | 'POST /users' | ... // Useful for type-safe routing function createRoute(route: APIRoute) { const [method, endpoint] = route.split(' '); return { method, endpoint }; } createRoute('GET /users'); // ✅ Valid createRoute('PATCH /users'); // ❌ Error: not a valid HTTPMethod ``` ## 5. Utility Types You Should Know TypeScript provides powerful built-in utility types: ```typescript interface User { id: number; name: string; email: string; password: string; } // Make all properties optional type PartialUser = Partial; // Make all properties required type RequiredUser = Required; // Pick specific properties type UserPreview = Pick; // Exclude specific properties type PublicUser = Omit; // Make all properties readonly type ImmutableUser = Readonly; ``` ## 6. Infer Keyword Magic Extract types from complex structures: ```typescript // Extract array element type type ArrayElement = T extends (infer E)[] ? E : never; type Users = User[]; type SingleUser = ArrayElement; // User // Extract promise return type type PromiseResult = T extends Promise ? R : never; type UserPromise = Promise; type ResolvedUser = PromiseResult; // User ``` ## 7. Type Guards for Runtime Safety Create custom type guards for complex checks: ```typescript interface Admin { type: 'admin'; permissions: string[]; } interface User { type: 'user'; subscription: 'free' | 'premium'; } type Person = Admin | User; function isAdmin(person: Person): person is Admin { return person.type === 'admin'; } function handlePerson(person: Person) { if (isAdmin(person)) { // TypeScript knows person is Admin here console.log(person.permissions); } else { // TypeScript knows person is User here console.log(person.subscription); } } ``` ## Conclusion TypeScript is more than just "JavaScript with types." These advanced patterns help catch bugs at compile time, improve code documentation, and make refactoring safer. Start incorporating these techniques gradually - your codebase will thank you.

Ali Talebmoh

Ali Talebmoh