TypeScript es un lenguaje principal para el desarrollo de aplicaciones Angular. Es un superconjunto de JavaScript con soporte en tiempo de diseño para herramientas y seguridad de tipos.

Los navegadores no pueden ejecutar TypeScript directamente. El mecanografiado debe “transpilarse” a JavaScript mediante la tsc compilador, que requiere alguna configuración.

Esta página cubre algunos aspectos de la configuración de TypeScript y el entorno de TypeScript que son importantes para los desarrolladores de Angular, incluidos los detalles sobre los siguientes archivos:

  • tsconfig.json: configuración del compilador de TypeScript.
  • typings: archivos de declaración de TypeScript.

Archivos de configuración

Un espacio de trabajo de Angular determinado contiene varios archivos de configuración de TypeScript. En la raiz tsconfig.json file especifica las opciones básicas del compilador TypeScript y Angular que heredan todos los proyectos en el espacio de trabajo.

Consulte la guía de opciones del compilador Angular para obtener información sobre las opciones específicas de Angular disponibles.

TypeScript y Angular tienen una amplia gama de opciones que se pueden usar para configurar las funciones de verificación de tipo y la salida generada. Para obtener más información, consulte el Herencia de configuración con extensiones sección de la documentación de TypeScript.

Para obtener más información sobre los archivos de configuración de TypeScript, consulte el Wiki de TypeScript Para obtener detalles sobre la herencia de la configuración, consulte la Herencia de configuración con extensiones sección.

La inicial tsconfig.json para un espacio de trabajo angular normalmente se ve como el siguiente ejemplo.

  "compileOnSave": false,
  "compilerOptions": 
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2015",
    "module": "es2020",
    "lib": [
      "es2018",
      "dom"
    ]

noImplicitAny y suppressImplicitAnyIndexErrors

Los desarrolladores de TypeScript no están de acuerdo sobre si noImplicitAny la bandera debe ser true o false. No hay una respuesta correcta y puede cambiar la bandera más tarde. Pero su elección ahora puede marcar la diferencia en proyectos más grandes, por lo que merece una discusión.

Cuando el noImplicitAny bandera es false (el valor predeterminado), y si el compilador no puede inferir el tipo de variable en función de cómo se usa, el compilador predetermina silenciosamente el tipo a any. Eso es lo que significa implícito any.

Cuando el noImplicitAny bandera es true y el compilador de TypeScript no puede inferir el tipo, todavía genera los archivos JavaScript, pero también informa un error. Muchos desarrolladores experimentados prefieren esta configuración más estricta porque la verificación de tipos detecta más errores no intencionales en el momento de la compilación.

Puede establecer el tipo de una variable en any incluso cuando el noImplicitAny bandera es true.

Cuando el noImplicitAny bandera es true, puedes conseguir errores de índice implícitos también. La mayoría de los desarrolladores sienten que este error en particular es más molesto que útil. Puede suprimirlos con la siguiente bandera adicional:

"suppressImplicitAnyIndexErrors": true

Para obtener más información sobre cómo afecta la configuración de TypeScript a la compilación, consulte Opciones del compilador angular y Comprobación del tipo de plantilla.

Mecanografiado en TypeScript

Muchas bibliotecas de JavaScript, como jQuery, la biblioteca de pruebas de Jasmine y Angular, amplían el entorno de JavaScript con características y sintaxis que el compilador de TypeScript no reconoce de forma nativa. Cuando el compilador no reconoce algo, arroja un error.

Usar Archivos de definición de tipo TypeScript–d.ts files—Para informar al compilador sobre las bibliotecas que carga.

Los editores compatibles con TypeScript aprovechan estos mismos archivos de definición para mostrar información de tipo sobre las funciones de la biblioteca.

Muchas bibliotecas incluyen archivos de definición en sus paquetes npm donde tanto el compilador de TypeScript como los editores pueden encontrarlos. Angular es una de esas bibliotecas. El node_modules/@angular/core/ carpeta de cualquier aplicación Angular contiene varios d.ts archivos que describen partes de Angular.

No necesitas hacer nada para conseguir mecanografia archivos para paquetes de biblioteca que incluyen d.ts archivos. Los paquetes angulares ya los incluyen.

lib.d.ts

TypeScript incluye un archivo de declaración especial llamado lib.d.ts. Este archivo contiene las declaraciones ambientales para varias construcciones comunes de JavaScript presentes en los tiempos de ejecución de JavaScript y el DOM.

Basado en el --target, Agrega TypeScript adicional declaraciones ambientales como Promise si el objetivo es es6.

Por defecto, el objetivo es es2015. Si está apuntando es5, todavía tiene declaraciones de tipo más nuevas debido a la lista de archivos de declaración incluidos:

"lib": [
  "es2018",
  "dom"
]

Archivos de tipificación instalables

Muchas bibliotecas, entre ellas jQuery, Jasmine y Lodash, no no incluir d.ts archivos en sus paquetes npm. Afortunadamente, sus autores o colaboradores de la comunidad han creado d.ts archivos para estas bibliotecas y publicarlos en ubicaciones conocidas.

Puede instalar estos tipos a través de npm utilizando el @types/* paquete con alcance y Typecript, a partir de 2.0, los reconoce automáticamente.

Por ejemplo, para instalar tipificaciones para jasmine tu corres npm install @types/jasmine --save-dev.

target

Por defecto, el objetivo es es2015, que solo es compatible con los navegadores modernos. Puede configurar el objetivo para es5 para admitir específicamente navegadores heredados. Angular CLI también proporciona carga diferencial para admitir navegadores modernos y heredados con paquetes separados.