# TypeScript: Dicas avançadas para desenvolvedores TypeScript oferece muitas funcionalidades avançadas que podem melhorar sua produtividade. Vamos explorar algumas dicas que todo desenvolvedor deveria conhecer. ## 1. Utility Types O TypeScript possui vários utility types que facilitam manipulações comuns: ```typescript interface User { id: string; name: string; email: string; password: string; } // Tornar todas as propriedades opcionais type PartialUser = Partial; // Selecionar apenas algumas propriedades type PublicUser = Pick; // Omitir propriedades específicas type SafeUser = Omit; // Tornar propriedades obrigatórias type RequiredUser = Required; ``` ## 2. Conditional Types Crie tipos que dependem de condições: ```typescript type NonNullable = T extends null | undefined ? never : T; type ApiResponse = T extends string ? { message: T } : T extends number ? { count: T } : { data: T }; // Exemplo de uso type StringResponse = ApiResponse; // { message: string } type NumberResponse = ApiResponse; // { count: number } type ObjectResponse = ApiResponse; // { data: User } ``` ## 3. Template Literal Types Combine strings de forma type-safe: ```typescript type EventName = 'click' | 'focus' | 'blur'; type ElementId = 'button' | 'input' | 'form'; type ElementEvent = `${ElementId}:${EventName}`; // Resultado: 'button:click' | 'button:focus' | 'button:blur' | 'input:click' | ... // Uso prático function addEventListener(event: ElementEvent, handler: () => void) { // implementação } addEventListener('button:click', () => {}); // ✅ Válido addEventListener('invalid:event', () => {}); // ❌ Erro de tipo ``` ## 4. Mapped Types Transforme tipos existentes: ```typescript type Readonly = { readonly [P in keyof T]: T[P]; }; type Optional = Omit & Partial>; type Getters = { [K in keyof T as `get${Capitalize}`]: () => T[K]; }; interface User { name: string; age: number; } type UserGetters = Getters; // Resultado: { getName: () => string; getAge: () => number; } ``` ## 5. Discriminated Unions Crie tipos seguros para diferentes estados: ```typescript type LoadingState = { status: 'loading'; }; type SuccessState = { status: 'success'; data: User[]; }; type ErrorState = { status: 'error'; error: string; }; type AsyncState = LoadingState | SuccessState | ErrorState; function handleState(state: AsyncState) { switch (state.status) { case 'loading': return 'Carregando...'; case 'success': return `${state.data.length} usuários encontrados`; case 'error': return `Erro: ${state.error}`; } } ``` ## 6. Assertion Functions Crie funções que fazem assertions: ```typescript function assertIsNumber(value: unknown): asserts value is number { if (typeof value !== 'number') { throw new Error('Expected number'); } } function processValue(input: unknown) { assertIsNumber(input); // TypeScript agora sabe que input é number return input.toFixed(2); } ``` ## 7. const assertions Preserve tipos literais: ```typescript // Sem const assertion const config = { apiUrl: 'https://api.example.com', timeout: 5000 }; // Tipo: { apiUrl: string; timeout: number; } // Com const assertion const configConst = { apiUrl: 'https://api.example.com', timeout: 5000 } as const; // Tipo: { readonly apiUrl: "https://api.example.com"; readonly timeout: 5000; } // Para arrays const fruits = ['apple', 'banana'] as const; // Tipo: readonly ["apple", "banana"] ``` ## 8. Namespace Patterns Organize código com namespaces: ```typescript namespace API { export interface User { id: string; name: string; } export namespace Users { export async function getAll(): Promise { // implementação } export async function getById(id: string): Promise { // implementação } } } // Uso const users = await API.Users.getAll(); ``` ## 9. Branded Types Crie tipos distintos para valores similares: ```typescript type UserId = string & { __brand: 'UserId' }; type ProductId = string & { __brand: 'ProductId' }; function createUserId(id: string): UserId { return id as UserId; } function getUser(id: UserId) { // implementação } const userId = createUserId('123'); const productId = '456' as ProductId; getUser(userId); // ✅ Válido getUser(productId); // ❌ Erro de tipo ``` ## 10. Configuração avançada do tsconfig.json Otimize seu projeto: ```json { "compilerOptions": { "strict": true, "noUncheckedIndexedAccess": true, "exactOptionalPropertyTypes": true, "noImplicitReturns": true, "noFallthroughCasesInSwitch": true, "noUncheckedIndexedAccess": true, "paths": { "@/*": ["./src/*"], "@/components/*": ["./src/components/*"], "@/utils/*": ["./src/utils/*"] } }, "include": ["src/**/*"], "exclude": ["node_modules", "dist"] } ``` ## Conclusão Essas dicas avançadas do TypeScript podem transformar a forma como você escreve código, oferecendo mais segurança, expressividade e produtividade. Pratique essas técnicas em seus projetos e veja a diferença! Lembre-se: TypeScript é uma ferramenta poderosa, mas use com moderação. Nem sempre a solução mais complexa é a melhor.

JavaScript ES2024: Novidades que vão mudar sua forma de programar

TypeScript: Dicas avançadas para desenvolvedores