tsconfig Avanzado y Tooling
tsconfig.json es el archivo de configuración de TypeScript y su correcta configuración marca la diferencia entre una experiencia de desarrollo fluida y una frustrante.
La opción "strict": true activa un conjunto de verificaciones adicionales que detectan más errores: strictNullChecks (null y undefined no son asignables a otros tipos), noImplicitAny (variables sin tipo inferible son error), strictFunctionTypes (verificación más estricta de compatibilidad entre funciones), entre otras. Actívalo desde el principio del proyecto.
Los path aliases eliminan los imports relativos largos como "../../../components/Button" y los reemplazan por "@/components/Button". Esto hace el código más limpio y resistente a cambios de estructura de carpetas.
La opción "noUncheckedIndexedAccess" hace que array[0] devuelva T | undefined en lugar de T, lo que parece molesto al principio pero refleja la realidad: acceder a un índice de un array podría devolver undefined si el array está vacío. Esta opción previene muchos runtime errors.
{
"compilerOptions": {
"target": "ES2022",
"module": "ESNext",
"moduleResolution": "bundler",
"lib": ["ES2022", "DOM", "DOM.Iterable"],
"strict": true,
"noUncheckedIndexedAccess": true,
"exactOptionalPropertyTypes": true,
"noImplicitOverride": true,
"outDir": "./dist",
"rootDir": "./src",
"declaration": true,
"declarationMap": true,
"sourceMap": true,
"incremental": true,
"paths": {
"@/*": ["./src/*"],
"@components/*": ["./src/components/*"],
"@hooks/*": ["./src/hooks/*"],
"@types/*": ["./src/types/*"]
}
},
"include": ["src/**/*.ts", "src/**/*.tsx"],
"exclude": ["node_modules", "dist"]
}
// package.json scripts
// "type:check": "tsc --noEmit"
// "build": "tsc"
// "dev": "ts-node-esm src/index.ts"
// tsconfig.eslint.json para ESLint + TypeScript
// {
// "extends": "./tsconfig.json",
// "include": ["src/**/*.ts", "*.config.ts", "*.config.js"]
// }
Practica esta lección
Resuelve los ejercicios del curso de TypeScript en la app, gratis y con corrección automática.
Empezar a practicar