La programación con TypeScript se ha convertido en una herramienta fundamental para desarrolladores que buscan añadir robustez a sus proyectos JavaScript. Este superset de JavaScript ofrece tipado estático y otras características avanzadas que mejoran la calidad del código y facilitan el mantenimiento de aplicaciones complejas. Para comenzar a utilizar esta poderosa tecnología, es necesario seguir algunos pasos de configuración inicial que te permitirán aprovechar al máximo sus beneficios.
¿Cómo instalar TypeScript en tu sistema?
Antes de sumergirte en el mundo de TypeScript, es fundamental verificar que cuentas con los requisitos previos necesarios. TypeScript depende completamente de Node.js y NPM para su funcionamiento, por lo que estos deben estar instalados en tu sistema antes de proceder.
Para comprobar si ya tienes estas herramientas, puedes ejecutar los siguientes comandos en tu terminal:
node -v
npm -v
Estos comandos mostrarán las versiones instaladas de Node.js y NPM respectivamente. Si obtienes una respuesta con números de versión, significa que ya están instalados y puedes continuar. En caso contrario, deberás instalarlos antes de seguir adelante.
Una vez confirmado que tienes Node.js y NPM, puedes proceder a instalar TypeScript globalmente en tu sistema mediante el siguiente comando:
npminstall -g typescript
Es posible que necesites permisos de administrador para realizar esta instalación global. En sistemas basados en Unix (como Linux o macOS), puedes utilizar:
sudonpminstall -g typescript
Para verificar que la instalación se ha completado correctamente, ejecuta:
tsc -v
Este comando debería mostrar la versión de TypeScript instalada en tu sistema, confirmando que todo está listo para comenzar a trabajar.
¿Cómo mejorar la experiencia de desarrollo con extensiones?
Visual Studio Code es el editor recomendado para trabajar con TypeScript, ya que ofrece un excelente soporte para este lenguaje. Para optimizar aún más tu experiencia de desarrollo, es recomendable instalar la extensión "JavaScript and TypeScript Nightly" desarrollada por Microsoft.
Esta extensión proporciona:
Resaltado de sintaxis mejorado
Autocompletado inteligente
Detección de errores en tiempo real
Sugerencias de código más precisas
Para instalarla, simplemente:
Abre la sección de extensiones en VS Code (icono en la barra lateral)
Busca "TypeScript"
Localiza "JavaScript and TypeScript Nightly" de Microsoft
Haz clic en instalar
Es importante verificar que el autor sea Microsoft para garantizar que estás instalando la extensión oficial y segura.
¿Cómo inicializar un proyecto de TypeScript?
Una vez que tienes TypeScript instalado y tu editor configurado, es momento de inicializar tu primer proyecto. Para ello, navega hasta la carpeta donde deseas crear tu proyecto y ejecuta:
tsc --init
Este comando creará un archivo tsconfig.json en tu directorio actual. Este archivo es fundamental para la configuración de TypeScript en tu proyecto, ya que define cómo se comportará el compilador.
El archivo generado contiene numerosas opciones comentadas que puedes personalizar según tus necesidades. Las configuraciones básicas, como el target (versión de JavaScript a la que se compilará) y los módulos, aparecen sin comentar por defecto.
{"compilerOptions":{"target":"es2016","module":"commonjs",// Muchas más opciones comentadas...}}
Es recomendable explorar estas opciones para entender qué puedes personalizar en tu proyecto. Algunas configuraciones importantes incluyen:
target: Define la versión de JavaScript a la que se compilará tu código
module: Especifica el sistema de módulos a utilizar
strict: Activa un conjunto de comprobaciones de tipo estrictas
outDir: Directorio donde se generarán los archivos JavaScript compilados
Con estos pasos completados, ya tienes todo lo necesario para comenzar a desarrollar con TypeScript. La configuración inicial puede parecer un proceso adicional comparado con JavaScript puro, pero los beneficios que obtendrás en términos de detección temprana de errores y mantenibilidad del código hacen que valga completamente la pena.
¿Has utilizado TypeScript en alguno de tus proyectos? Comparte tu experiencia y cualquier duda que tengas sobre la configuración inicial en la sección de comentarios.
Parece que VSCode | Cursor ya tienen soporte nativo para Typescript y el mensaje dice que la extension solo es para los nuevos features de Typescript y fuera de esto no seria necesario para nuestro nivel inicial. Yo probare sin la extension por unas cuantas clases.
Estaba a la mitad de la version anterior del curso, ahora continuaré en este, más vale estar actualizado. Saludos bandita
¿se puede utilizar Bun como gestor de paquetes ?
No lo he configurado pero si, es correcto, puedes hacerlo.
Sip, Bun es un gestor de paquetes de NPM.
Una pregunta.
Es necesario instalar typescript global?, en la version anterior del curso Typescript se instalaba en un proyecto creado con npm install typescript usando comandos de NPM y no de Linux.
Pregunto porque siempre me ah dado problemas siempre las terminales de Linux en Windows 11
No es necesario instalar TypeScript de forma global, puedes usarlo solo en tu proyecto, puedes intentar con la terminal que da git, yo lo uitilizaba de esa forma ya que mi pc no soportaba terminales de linuz
Pregunta... En mi caso cuando le di tsc --init me creó el tsconfig.json pero en el target tiene:
"target": "esnext"
¿Es normal esto? ¿Qué significa?
Eso significa a la versión que quieres convertir de Javascript, lo que hace typescript por debajo es generar código javascript. En este caso con "esnext" le estamos indicando que use la última versión de Javascript
Requisitos para usar TypeScript:
Node.js [node -v] confirmas la version instalada.
npm [npm -v] confirmas la version instalada
Para instalar TypeScript [npm install -g typescript]
Crear una carpeta donde estara tu proyecto (En caso de que no la tengas) mkdir "typescript-curso"
Entrar a la carpeta cd "typescript-curso"
Inicializar con git, si quieres ir guardando tus cambios para subirlos a un repositorio en GitHub.
Inicializar tu proyecto con "TSC --INIT", esto es un equivalente a un "npm init" es lo que nos permite configurar el proyecto en typescript
creo que deberian enseñarn en Windows como instalar PowerShell, nove version manager etc y en mac las comnad line tools y home brew y no tocar Linux eso es para usuarios que ya no necesitan guias
Hola Enrique, powershell viene por default en instalado en Windows.
Ahora puedes usar chocolatey para hacerlo por la powershell :
Para ejecutar comandos de TypeScript sin instalarlo globalmente, puedes utilizar npx, que viene incluido con npm. Simplemente, navega a tu proyecto en la terminal y ejecuta:
npx typescript
Esto permitirá que TypeScript se ejecute sin necesidad de instalación global. Además, puedes agregarlo como dependencia en tu proyecto:
npminstall --save-dev typescript
Luego, puedes usar npx para ejecutar los comandos de TypeScript directamente desde tu proyecto.
Requisitos para usar TypeScript:
Node.js [node -v]
npm [npm -v]
para instalar TypeScript [npm install -g typescript]