Header Ads Widget

Ticker

6/recent/ticker-posts

Versión TypeScript de Angular 10

 En este tutorial, aprenderemos cómo verificar y actualizar la versión de TypeScript en su proyecto de Angular 10.

Angular se basa en TypeScript en lugar de JavaScript simple. TS proporciona tipos y construcciones OOP además de JS, pero no se ejecuta en el navegador, sino que se compila en la máquina del desarrollador para JS antes de que pueda enviarse a producción y ejecutarse en un navegador web.

Angular 9 se envió con TypeScript 3.7, mientras que Angular 10 vino con TypeScript 3.8.

TS requiere algunos archivos de configuración, como el tsconfig.jsonarchivo que contiene varias configuraciones para configurar el compilador, pero gracias a Angular CLI, puede crear un nuevo proyecto con TS preconfigurado y comenzar a escribir su código sin lidiar con las complejidades relacionadas con el front-end. herramientas de desarrollo.

Cada nueva versión de TypeScript viene con muchas características nuevas que puede utilizar para simplificar su viaje de codificación y desarrollo.

¿Qué es TypeScript?

TypeScript es un superconjunto de JavaScript desarrollado y mantenido por Microsoft. Agrega tipos sólidos, mejor verificación de errores, seguridad de tipos e integraciones con editores de código e IDE que facilitan la vida de los desarrolladores al desarrollar grandes aplicaciones JS que escalan.

TS es el lenguaje principal para el desarrollo de aplicaciones Angular 2+, lo que hace que escribir aplicaciones grandes sea más fácil que Angular.JS, la versión anterior que se basaba en JS.

Dado que los navegadores web no pueden ejecutar TypeScript directamente. Debe "transpilarse" a JavaScript mediante el compilador tsc , que debe configurarse primero. Este paso se realiza en la máquina del desarrollador antes de que la aplicación se ejecute en el entorno de producción.

Incluso si TypeScript está configurado de forma predeterminada en sus proyectos de Angular generados con Angular CLI, es importante comprender algunos aspectos de la configuración de TypeScript y los archivos de configuración de TypeScript, como:

  • tsconfig.json que contiene opciones de configuración para el compilador TypeScript en formato JSON.
  • typings que son archivos de declaración de TypeScript.

Archivo de configuración de TypeScript

Antes de usar TypeScript en sus proyectos de Angular, deberá agregar un archivo de configuración llamado tsconfig.jsonque le dice al compilador de TypeScript cómo debe generar los archivos JavaScript.

Por ejemplo, el marco Angular hace un uso extensivo de decoradores, para varios artefactos como componentes, servicios y módulos, que aún son una característica experimental de TS, por lo tanto, debemos decirle al compilador que haga uso de esta característica experimental en nuestro proyecto.

Si usó la CLI de Angular para generar su proyecto, el tsconfig.jsonarchivo debe crearse en la carpeta raíz del proyecto.

Puede obtener más información sobre el tsconfig.jsonarchivo en los documentos oficiales de TypeScript .

Este es un tsconfig.jsonarchivo típico para un proyecto Angular 10:

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

Puede ver que Angular agrega algunas opciones de configuración, debajo de la angularCompilerOptionsentrada, diseñadas para su propio compilador Ahead-Of-Time. Este no es del archivo de configuración estándar de TypeScript.

La angularCompilerOptionsentrada está diseñada para proporcionar opciones de configuración cuando usa la compilación AOT . Puede controlar cómo se compila su aplicación especificando las opciones del compilador de plantilla en el tsconfig.jsonarchivo.

El objeto de opciones de plantilla`` angularCompilerOptionses un hermano del compilerOptionsobjeto que proporciona opciones estándar al compilador de TypeScript.

¿Cómo obtener la versión de TypeScript utilizada en su proyecto angular?

Veamos ahora cómo instalar la versión de TypeScript en su proyecto de Angular 10 y actualizarla a la última versión.

Tiene muchas formas de verificar la versión de mecanografiado.

Puede abrir el package.jsonarchivo de su proyecto Angular y verificar el devDependenciesnodo. Debe contener la versión mecanografiada utilizada:

"typescript": "^3.8.0",

También puede verificar la versión del terminal usando el siguiente comando:

tsc -v

Esto mostrará la versión de mecanografiado instalada globalmente.

También puede verificar la versión de mecanografiado utilizada en la versión de su proyecto, navegando a la node_modules\.bin\carpeta y ejecutando el siguiente comando:

./tsc -v

Finalmente, también puede usar Angular CLI para verificar la versión de Typecript, de la siguiente manera:

ng -v

Esto sacará la versión mecanografiada y las versiones de las otras dependencias:

Angular CLI: 10.0.5
Node: 12.14.0
OS: linux x64

Angular: 10.0.8
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
Ivy Workspace: Yes

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.1000.5
@angular-devkit/build-angular     0.1000.5
@angular-devkit/build-optimizer   0.1000.5
@angular-devkit/build-webpack     0.1000.5
@angular-devkit/core              10.0.5
@angular-devkit/schematics        10.0.5
@angular/cli                      10.0.5
@ngtools/webpack                  10.0.5
@schematics/angular               10.0.5
@schematics/update                0.1000.5
rxjs                              6.5.5
typescript                        3.9.7
webpack                           4.43.0

Publicar un comentario

0 Comentarios