# TypeScript en 2024: Nuevas características y mejores prácticas TypeScript continúa evolucionando rápidamente, y 2024 ha traído características emocionantes que mejoran significativamente la experiencia de desarrollo. En este artículo, exploraremos las novedades más importantes y las mejores prácticas actuales. ## Nuevas características destacadas ### 1. Satisfies Operator (mejorado) El operador `satisfies` se ha vuelto más potente, permitiendo validaciones de tipo más precisas: ```typescript // Validar que un objeto cumple con una estructura sin perder tipos específicos type Colors = "red" | "green" | "blue"; const palette = { primary: "red", secondary: "green", accent: "blue" } satisfies Record; // TypeScript infiere el tipo exacto de cada propiedad type PrimaryColor = typeof palette.primary; // "red", no Colors ``` ### 2. Import Attributes Para metadatos de importación, especialmente útil con JSON y assets: ```typescript // Importar JSON con validación de tipo import config from "./config.json" with { type: "json" }; // Importar CSS modules con atributos import styles from "./component.module.css" with { type: "css" }; // Importar assets con metadatos import logo from "./logo.png" with { type: "asset", width: 100, height: 100 }; ``` ### 3. Template Literal Pattern Matching Mejoras en el pattern matching con template literals: ```typescript // Extractar información de strings con patrones type ExtractVersion = T extends `v${infer Version}` ? Version : never; type Version = ExtractVersion<"v1.2.3">; // "1.2.3" // Validación de formatos type EmailPattern = T extends `${string}@${string}.${string}` ? T : never; function sendEmail( email: EmailPattern ): void { // Email validado en compile time console.log(`Enviando email a: ${email}`); } sendEmail("user@example.com"); // ✅ Válido // sendEmail("invalid-email"); // ❌ Error de tipo ``` ### 4. Decorators Mejorados Los decorators estándar de JavaScript con mejor soporte de TypeScript: ```typescript // Decorator para logging function log(target: any, propertyKey: string, descriptor: PropertyDescriptor) { const originalMethod = descriptor.value; descriptor.value = function(...args: any[]) { console.log(`Calling ${propertyKey} with:`, args); const result = originalMethod.apply(this, args); console.log(`Result:`, result); return result; }; } // Decorator para validación function validate(rules: Record boolean>) { return function(target: any, propertyKey: string, descriptor: PropertyDescriptor) { const originalMethod = descriptor.value; descriptor.value = function(...args: any[]) { // Validar argumentos según las reglas Object.entries(rules).forEach(([param, rule], index) => { if (!rule(args[index])) { throw new Error(`Validation failed for ${param}`); } }); return originalMethod.apply(this, args); }; }; } class UserService { @log @validate({ email: (value) => typeof value === 'string' && value.includes('@'), age: (value) => typeof value === 'number' && value >= 18 }) createUser(email: string, age: number) { return { email, age, id: Math.random() }; } } ``` ## Mejores prácticas actualizadas ### 1. Utility Types Avanzados Crea utility types reutilizables para casos comunes: ```typescript // Hacer propiedades opcionales excepto las especificadas type RequireOnly = Partial & Pick; interface User { id: string; name: string; email: string; age: number; } // Solo 'id' es requerido, el resto opcional type CreateUser = RequireOnly; // Deep readonly para objetos anidados type DeepReadonly = { readonly [P in keyof T]: T[P] extends object ? DeepReadonly : T[P]; }; // Extraer tipos de arrays type ArrayElement = T extends (infer U)[] ? U : never; type NumberArray = number[]; type NumberType = ArrayElement; // number // Crear uniones desde objetos type ValueOf = T[keyof T]; const STATUS = { PENDING: 'pending', COMPLETED: 'completed', FAILED: 'failed' } as const; type Status = ValueOf; // 'pending' | 'completed' | 'failed' ``` ### 2. Type Guards y Predicates Mejora la seguridad de tipos con guards más sofisticados: ```typescript // Type guard genérico para arrays function isNonEmptyArray(arr: T[]): arr is [T, ...T[]] { return arr.length > 0; } // Type guard para propiedades opcionales function hasProperty( obj: T, key: K ): obj is T & Record { return obj !== null && typeof obj === 'object' && key in obj; } // Predicate para filtrar nulls function isNotNull(value: T | null): value is T { return value !== null; } // Uso práctico function processUsers(users: (User | null)[]) { const validUsers = users.filter(isNotNull); // validUsers es ahora User[], no (User | null)[] if (isNonEmptyArray(validUsers)) { // validUsers es [User, ...User[]] const firstUser = validUsers[0]; // Garantizado que existe } } // Type guard para APIs interface ApiSuccess { success: true; data: T; } interface ApiError { success: false; error: string; } type ApiResponse = ApiSuccess | ApiError; function isApiSuccess(response: ApiResponse): response is ApiSuccess { return response.success; } async function fetchUser(id: string): Promise { const response: ApiResponse = await fetch(`/api/users/${id}`).then(r => r.json()); if (isApiSuccess(response)) { return response.data; // TypeScript sabe que esto es User } console.error(response.error); return null; } ``` ### 3. Configuración moderna de tsconfig.json ```json { "compilerOptions": { // Strict mode completo "strict": true, "noUncheckedIndexedAccess": true, "exactOptionalPropertyTypes": true, // Imports modernos "moduleResolution": "bundler", "allowImportingTsExtensions": true, "noEmit": true, // Características nuevas "target": "ES2022", "lib": ["ES2022", "DOM", "DOM.Iterable"], "module": "ESNext", // Mejor experiencia de desarrollo "incremental": true, "skipLibCheck": true, "forceConsistentCasingInFileNames": true, // Path mapping "baseUrl": ".", "paths": { "@/*": ["./src/*"], "@/components/*": ["./src/components/*"], "@/utils/*": ["./src/utils/*"] } }, "include": ["src/**/*"], "exclude": ["node_modules", "dist"] } ``` ### 4. Manejo de errores tipado ```typescript // Result type para manejo de errores type Result = | { success: true; data: T } | { success: false; error: E }; // Función utilitaria para crear resultados function success(data: T): Result { return { success: true, data }; } function failure(error: E): Result { return { success: false, error }; } // Uso en funciones async async function safeParseJSON(json: string): Promise> { try { const data = JSON.parse(json); return success(data); } catch (error) { return failure(`Invalid JSON: ${error.message}`); } } // Chain de operaciones seguras async function processUserData(jsonString: string) { const parseResult = await safeParseJSON(jsonString); if (!parseResult.success) { console.error("Parse error:", parseResult.error); return; } const user = parseResult.data; // Procesar usuario con seguridad de tipos } // Option type para valores que pueden no existir type Option = T | null; function some(value: T): Option { return value; } function none(): Option { return null; } function isSome(option: Option): option is T { return option !== null; } ``` ### 5. Branded Types para mayor seguridad ```typescript // Crear tipos "marcados" para evitar confusiones type Brand = K & { __brand: T }; type UserId = Brand; type Email = Brand; type Age = Brand; // Funciones constructoras function createUserId(id: string): UserId { return id as UserId; } function createEmail(email: string): Email { if (!email.includes('@')) { throw new Error('Invalid email format'); } return email as Email; } function createAge(age: number): Age { if (age < 0 || age > 150) { throw new Error('Invalid age'); } return age as Age; } // Uso seguro function getUser(id: UserId): Promise { // Solo acepta UserId, no cualquier string return fetch(`/api/users/${id}`).then(r => r.json()); } function sendEmail(to: Email, subject: string): void { // Solo acepta Email válido console.log(`Sending email to ${to}: ${subject}`); } // Uso const userId = createUserId("user_123"); const email = createEmail("user@example.com"); getUser(userId); // ✅ Correcto sendEmail(email, "Welcome!"); // ✅ Correcto // getUser("invalid"); // ❌ Error: string no es UserId // sendEmail("invalid", "Test"); // ❌ Error: string no es Email ``` ## Testing con TypeScript ```typescript // Tipos de testing más robustos interface MockFunction any> { (...args: Parameters): ReturnType; mockReturnValue(value: ReturnType): void; mockResolvedValue(value: Awaited>): void; } function createMock any>(): MockFunction { const mock = jest.fn() as MockFunction; return mock; } // Test con tipos seguros describe('UserService', () => { let userService: UserService; let apiMock: MockFunction; beforeEach(() => { apiMock = createMock(); userService = new UserService(apiMock); }); it('should fetch user correctly', async () => { const expectedUser: User = { id: createUserId('123'), name: 'John Doe', email: createEmail('john@example.com'), age: createAge(30) }; apiMock.mockResolvedValue({ ok: true, json: () => Promise.resolve(expectedUser) } as Response); const result = await userService.getUser(createUserId('123')); expect(result).toEqual(expectedUser); expect(apiMock).toHaveBeenCalledWith('/api/users/123'); }); }); ``` ## Conclusión TypeScript en 2024 ofrece herramientas más poderosas que nunca para escribir código JavaScript robusto y mantenible. Las nuevas características como import attributes, mejores template literals y decorators mejorados, combinadas con patrones como branded types y manejo de errores tipado, nos permiten crear aplicaciones más seguras y expresivas. ### Recursos recomendados - [TypeScript Handbook](https://www.typescriptlang.org/docs/) - [TypeScript Deep Dive](https://basarat.gitbook.io/typescript/) - [Type Challenges](https://github.com/type-challenges/type-challenges) ¿Qué característica de TypeScript te emociona más para este año? ¡Comparte tu experiencia en los comentarios!

Artículos relacionados

Cómo crear componentes reutilizables en React

Next.js 14 App Router: Guía completa