Configuración de TypeScript tsconfig.json

tsconfig.json es el archivo de configuración del proyecto TypeScript, utilizado para especificar las opciones de compilación y la configuración del proyecto.

Configuración básica

El archivo tsconfig.json más básico.

Ejemplo

{
    "compilerOptions": {
        "target": "ES2020",
        "module": "commonjs",
        "strict": true,
        "outDir": "./dist"
    },
    "include": ["src/**/*"],
    "exclude": ["node_modules", "dist"]
}

Descripción de la configuración:

  • target：Versión de JavaScript objetivo de compilación
  • module：Sistema de módulos utilizado
  • strict：Habilitar todas las comprobaciones estrictas de tipos
  • outDir：Directorio de salida

Versión objetivo de compilación

Utilice target para especificar la versión de JavaScript a la que se compila.

Ejemplo

// tsconfig.json
{
    "compilerOptions": {
        // ES3, ES5, ES6/ES2015, ES2020, ESNext
        "target": "ES2020"
    }
}

Diferencias de salida entre distintos objetivos:

// target: ES5 - 使用 var
var greeting = "Hello";

// target: ES2020 - 使用 let/const
let greeting = "Hello";

Sistema de módulos

Configurar el esquema de modularización.

Ejemplo

{
    "compilerOptions": {
        "module": "commonjs",
        // Opcional: none, commonjs, amd, umd, es6, es2020, esnext
    }
}

Modo estricto

La opción strict habilita todas las comprobaciones estrictas de tipos.

Ejemplo

{
    "compilerOptions": {
        "strict": true,
        // Equivale a habilitar todas las siguientes opciones:
        // "strictNullChecks": true,
        // "noImplicitAny": true,
        // "strictFunctionTypes": true,
        // etc.
    }
}

Recomendación:Siempre habilite strict: true, es la mejor práctica.

Alias de rutas

Configurar alias de rutas para simplificar las importaciones.

Ejemplo

{
    "compilerOptions": {
        "baseUrl": ".",
        "paths": {
            "@/*": ["src/*"],
            "@components/*": ["src/components/*"]
        }
    }
}

Forma de uso:

import Button from "@components/Button";
import { Header } from "@/components";

Inclusión y exclusión de archivos

Controlar qué archivos se incluyen en la compilación.

Ejemplo

{
    "include": ["src/**/*"],
    "exclude": [
        "node_modules",
        "dist",
        "**/*.test.ts",
        "**/*.spec.ts"
    ]
}

Resumen de opciones de compilación comunes

Opción Descripción
target Versión objetivo de compilación
module Sistema de módulos
strict Modo estricto
outDir Directorio de salida
rootDir Directorio raíz del código fuente
esModuleInterop Permitir interoperabilidad de módulos ES
skipLibCheck Omitir verificación de bibliotecas
declaration Generar archivos de declaración .d.ts

Resumen

  • tsconfig.json：Archivo de configuración del proyecto TypeScript
  • compilerOptions：Configuración central de las opciones de compilación
  • include/exclude：Controlar el alcance de los archivos
  • Alias de rutas:Simplificar las rutas de importación
  • strict: true：Habilitar siempre el modo estricto
Otras extensiones