Cómo iniciar un nuevo proyecto de TypeScript

Introducción

Quizás ya hayas trabajado con TypeScript al usar un proyecto de inicio o una herramienta como Angular CLI. En este tutorial, aprenderás a configurar un proyecto de TypeScript sin un proyecto de inicio. También aprenderás cómo funciona la compilación en TypeScript y cómo usar un linter en tu proyecto.

Requisitos previos

La última versión de Node instalada en su dispositivo.
Conociendo npm

Paso 1: Iniciar un proyecto TypeScript

Para iniciar su proyecto TypeScript, necesita crear un directorio para su proyecto:

mkdir typescript-project

Ahora cambia al directorio de tu proyecto:

cd typescript-project

Puede instalar TypeScript configurando el directorio de su proyecto:

npm i typescript --save-dev

Es importante que la bandera --guardar-dev Añade TypeScript, ya que lo almacena como una dependencia de desarrollo. Esto significa que TypeScript es necesario para el desarrollo de tu proyecto.

Con TypeScript instalado, puedes inicializar tu proyecto TypeScript usando el siguiente comando:

npx tsc --init

npm También tiene una herramienta llamada npx que ejecuta paquetes ejecutables. npx Nos permite ejecutar paquetes sin necesidad de una instalación global.

Orden tsc Se utiliza aquí porque es el compilador integrado de TypeScript. Al escribir código en TypeScript, la ejecución... tsc Convierte o compila su código en JavaScript.

Usando la bandera --inicio En el comando anterior, su proyecto se inicializa creando un archivo tsconfig.json en el directorio de su proyecto TypeScript. Este archivo tsconfig.json le permite realizar más configuraciones y comprender cómo interactúan TypeScript y el compilador. tsc Personalizar. Puede eliminar, agregar y modificar configuraciones en este archivo para adaptarlas a sus necesidades.

tsconfig.json Ábrelo en tu editor para encontrar la configuración predeterminada:

nano tsconfig.json

Habrá muchas opciones, la mayoría de las cuales se explican a continuación:

{
"compilerOptions": {
/* Visit https://aka.ms/tsconfig.json to read more about this file */
/* Projects */
// "incremental": true, /* Enable incremental compilation */
// "composite": true, /* Enable constraints that allow a TypeScript project to be used with project references. */
// "tsBuildInfoFile": "./", /* Specify the folder for .tsbuildinfo incremental compilation files. */
// "disableSourceOfProjectReferenceRedirect": true, /* Disable preferring source files instead of declaration files when referencing composite projects */
// "disableSolutionSearching": true, /* Opt a project out of multi-project reference checking when editing. */
// "disableReferencedProjectLoad": true, /* Reduce the number of projects loaded automatically by TypeScript. */
. . .
}
}

Puedes personalizar tu configuración de TypeScript mediante el archivo tsconfig.json. Por ejemplo, puedes descomentar la entrada outDir y establecerla en "./build", lo que colocará todos tus archivos TypeScript compilados en ese directorio.

Al instalar TypeScript e instalar el archivo tsconfig.jsonAhora puedes pasar a codificar la aplicación TypeScript y compilarla.

Paso 2: Compilar el proyecto TypeScript

Ahora puedes empezar a codificar tu proyecto TypeScript. Crea un nuevo archivo llamado índice.ts Ábrelo en tu editor. Pega el siguiente código TypeScript en índice.ts Escribir:

const world = 'world';
export function hello(who: string = world): string {
return `Hello ${who}! `;
}

Con este código TypeScript, su proyecto está listo para compilarse. Ejecute tsc desde el directorio del proyecto:

npx tsc

Notarás que el archivo JavaScript compilado index.js y el archivo sourcemap index.js.map se agregan a la carpeta de compilación, si lo especificaste en el archivo tsconfig.js.

index.js Ábrelo y verás el siguiente código JavaScript compilado:

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.hello = void 0;
const world = 'world';
function hello(who = world) {
return `Hello ${who}! `;
}
exports.hello = hello;

Ejecutar el compilador de TypeScript cada vez que se realiza un cambio puede ser tedioso. Para solucionarlo, puede poner el compilador en modo de vigilancia, que recompilará el código cada vez que se realice un cambio.

Puede habilitar el modo de vigilancia utilizando el siguiente comando:

npx tsc -w

Ya aprendiste cómo funciona el compilador de TypeScript y ahora puedes compilar tus archivos correctamente. Puedes llevar tus proyectos de TypeScript al siguiente nivel incorporando un linter a tu flujo de trabajo.

Paso 3: usa el estilo TypeScript de Google para completar y corregir tu código

Usar un linter al programar te ayuda a encontrar rápidamente inconsistencias, errores de sintaxis y omisiones en tu código. Además, una guía de estilo no solo te ayuda a garantizar que tu código esté bien formado y sea consistente, sino que también te permite usar herramientas adicionales para aplicar ese estilo. Una herramienta popular para esto es eslint, que funciona bien con muchos IDE para facilitar el proceso de desarrollo.

Una vez que tu proyecto esté en marcha, puedes usar otras herramientas del ecosistema TypeScript para evitar tener que configurar manualmente el archivo tsconfig.json. Google TypeScript Style es una de ellas. Google TypeScript Style, también conocido como GTS, es una guía de estilo, una hoja de estilos en línea y un corrector de código automático, todo en uno. Usar GTS te ayuda a iniciar rápidamente un nuevo proyecto TypeScript y a evitar preocuparte por pequeños detalles organizativos para centrarte en el diseño. GTS también proporciona configuraciones predeterminadas. Esto significa que no tendrás que personalizar muchas opciones.

Comience instalando GTS:

npm i gts --save-dev

Desde aquí, inicialice el GTS utilizando el siguiente comando:

npx gts init

El comando anterior creará todo lo necesario para empezar a usar TypeScript, incluyendo un archivo tsconfig.json y una configuración de linting. También se creará un archivo package.json si aún no lo tiene.

Ejecutar npx gts init también añade scripts npm útiles a tu archivo package.json. Por ejemplo, ahora puedes ejecutar npm run compile para compilar tu proyecto TypeScript. Para comprobar si hay errores de cortina, puedes ejecutar npm run check.

GTS ya está instalado e integrado correctamente en tu proyecto TypeScript. Usar GTS en proyectos futuros te permitirá configurar rápidamente nuevos proyectos TypeScript con la configuración necesaria.

Dado que GTS ofrece un enfoque basado en opiniones y sin configuración, utiliza sus propias reglas prácticas. Estas siguen las mejores prácticas, pero si necesita modificarlas, puede hacerlo extendiendo las reglas predeterminadas de eslint. Para ello, cree un archivo en el directorio de su proyecto llamado .eslintrc que extienda las reglas de estilo:

---
extends:
- './node_modules/gts'

Esto le permite agregar o modificar las reglas de estilo proporcionadas por GTS.

Resultado

En este tutorial, iniciaste un proyecto de TypeScript con configuraciones personalizadas. También integraste el estilo Google TypeScript en tu proyecto. Usar GTS te ayuda a empezar a trabajar rápidamente con un nuevo proyecto de TypeScript. Con GTS, no necesitas configurar manualmente ni integrar un linter en tu flujo de trabajo.