En la entrada anterior creamos nuestra primera aplicación de TypeScript. Simplemente creamos una carpeta vacía y metimos dentro nuestros ficheros.
Pero (ya lo adelantamos) lo normal es inicializar el proyecto de TypeScript. Para ello, usaremos la propia herramienta tsc. Simplemente tenemos que hacer.
tsc --initCuando ejecutamos el comando tsc --init en la terminal, en el directorio de tu proyecto, el compilador de TypeScript genera automáticamente un archivo de configuración preconfigurado llamado tsconfig.json.
Y dirás: “pero bueno, ¿seguro que hace muchas más cosas?”. No… sólo crea ese archivo. En eso consiste “inicializar un proyecto” en TypeScript 😅.
En realidad, es un fichero importante y bastante largo. Así que, no está mal que nos lo cree por nosotros
El fichero tsconfig.json
El archivo tsconfig.json es el archivo de configuración principal de un proyecto TypeScript. Es un fichero JSON que contiene opciones y parámetros que controlan el comportamiento de TypeScript en nuestro proyecto.
La pinta que tiene el fichero tsconfig.json es, más o menos, la siguiente:
{
"compilerOptions": {
"target": "es2016",
"module": "commonjs",
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true,
"strict": true,
"skipLibCheck": true
},
"include": [
"src"
]
}Este archivo le indica al compilador cómo debe manejar los archivos TypeScript. Por ejemplo, qué archivos incluir, cuáles excluir, a qué versión de ECMAScript compilar, entre otras configuraciones importantes.
Parámetros habituales tsconfig-json
Configuración general
| Parámetro | Descripción |
|---|---|
target | Especifica la versión de ECMAScript a utilizar (ej. "ES6", "ES2020", "ESNext") |
module | Define el sistema de módulos ("CommonJS", "ES6", "ESNext") |
strict | Activa todas las verificaciones estrictas (true o false) |
lib | Lista de bibliotecas a incluir (ej. "ES6", "DOM") |
allowJs | Permite compilar archivos .js |
jsx | Especifica cómo transformar el código JSX ("preserve", "react") |
esModuleInterop | Habilita la interoperabilidad con módulos ES |
Opciones de salida
| Parámetro | Descripción |
|---|---|
outDir | Especifica el directorio de salida para los archivos compilados |
rootDir | Define el directorio raíz de los archivos fuente |
declaration | Genera archivos de declaración .d.ts |
sourceMap | Crea archivos .map para facilitar la depuración |
incremental | Habilita la compilación incremental para mejorar el rendimiento |
Resolución de Módulos
| Parámetro | Descripción |
|---|---|
moduleResolution | Configura la resolución de módulos ("node", "classic") |
baseUrl | Establece la base para rutas relativas de módulos |
paths | Define alias para rutas de módulos específicos |
resolveJsonModule | Permite importar archivos .json |
Tipos y comprobaciones
| Parámetro | Descripción |
|---|---|
skipLibCheck | Omite la verificación de tipos en archivos de definición (.d.ts) |
types | Especifica archivos de declaración a incluir en el proyecto |
typeRoots | Define directorios para buscar archivos de declaración |
Características avanzadas
| Parámetro | Descripción |
|---|---|
emitDecoratorMetadata | Emite metadatos para decoradores, útil para bibliotecas como Angular |
experimentalDecorators | Habilita el uso de decoradores, una característica experimental de TypeScript |
Estructura de un proyecto
Un proyecto TypeScript no tiene una estructura determinada. Es decir, podemos ser flexibles, y adoptar la organización que nosotros queramos.
Pero, más o menos, todos seguimos unas convenciones parecidas. Puedes hacer tus propias variaciones (según lo que necesite tu proyecto). Pero así es un ejemplo de estructura típica de un proyecto TypeScript:
/mi-proyecto
│
├── /src
│ ├── /services
│ ├── ...
│ ├── /utils
│ ├── /config
│ └── app.ts
│
├── /dist
│
├── /tests
│
├── tsconfig.json
├── package.json
├── .gitignore
└── README.md/src: Contiene todo el código fuente del proyecto/dist: Directorio de salida donde se generan los archivos compilados/tests: Contiene los archivos de testingtsconfig.json: Archivo de configuración del compilador de TypeScriptpackage.json: Archivo de configuración de Node.js.gitignore: Archivo de configuración de por GitREADME.md: Documentación básica del proyecto
Carpeta “src”
La carpeta src es donde guardamos todos nuestros archivos fuente de TypeScript. Aquí es donde escribiremos nuestro código TypeScript y crearemos la lógica de nuestra aplicación.
El archivo principal de nuestra aplicación, se encuentra en esta carpeta. Generalmente llamamos al fichero principal index.ts o app.ts o main.ts. Pero podemos ponerle el nombre que queramos.
Además del archivo principal, también podemos tener carpetas adicionales dentro de “src” para organizar nuestro código en módulos o componentes. En este ejemplo, hemos creado una carpeta llamada services, utils, config… etc.
Carpeta “dist”
La carpeta “dist” es donde se almacenan los archivos generados después de compilar nuestro código TypeScript. Después de ejecutar el compilador de TypeScript, los archivos JavaScript resultantes se colocarán en esta carpeta.
Estos archivos JavaScript son los que se ejecutan en el navegador o en el entorno de Node.js.