Manual TypeScript: Crea Aplicaciones Web
Descripcion:
TypeScript es un lenguaje de programación moderno que permite crear aplicaciones web robustas en JavaScript. TypeScript no requiere de ningún tipo de plugin, puesto que lo que hace es generar código JavaScript que se ejecuta en cualquier navegador, plataforma o sistema operativo.
TypeScript es un "transpilador", es decir, un compilador que se encarga de traducir las instrucciones de un lenguaje a otro, aqui lo llamaremos también pre-compilador ya que este realmente intenta realizar las funciones de un compilandor más las funciones de un traductor de instrucciones.
TypeScript es un lenguaje pre-compilado, es decir, un lenguaje el cual será compilado finalmente a javascript, la versión del javascript en la cual será compilado junto con otras configuraciones estará en el archivo tsconfig, TypeScript nos proporciona una serie de ventajas sobre javascript, o ES2016,.., ya que tiene una serie de caracteristicas que ES* no suele tener, como por ejemplo:
- Interfaces
- Clases (Clases de verdad)
- Es furtemente tipado
En lo referente a las interfaces, estas ni siquiera serán escritas en el código final, simplemente será el mismo transpilador de TypeScript el que se encargará de que el "Contrato" sea cumplido, las interfaces en TypeScript pueden ser heredadas esto lo veremos más adelante.
TypeScript es fuertemente tipado ya que requiere de que se le especifiquen los tipos de datos que se quieren utilizar (en caso de que no se especifiquen serán de tipo ANY, pero eso lo veremos más adelante).
Instalación del entorno de desarrollo
La instalación de TypeScript es relativamente simple, únicamente necesitamos la
instalación de un servidor NodeJS y con el gestor de paquetes npm para descargarnos el
transpilador TypeScript
Para descargar NodeJS hay que ir a nodejs.org
y una vez instalado comprobar la instalación mediante el comando:
node -v
Si nos dice la versión de NodeJS que tenemos proseguiremos con el siguiente paso la
descarga de TypeScript para ello abriremos una terminal y escribiremos esto
(Windows\/Linux\/Mac)
npm install -g typescript
Para comprobar la correcta instalación de TypeScript y la versión que se a instalado
escribimos
tsc -v
instalación de los tsd de nodejs
npm install tsd -g
tsc = TypeScript Console
El siguiente paso será crear una carpeta donde trabajar para ello dependiendo de nuestro
sistema operativo podremos utilizar un ejecutable u otro para crear una carpeta o simplemente hacerlo desde la interfaz gráfica, una vez creada navegaremos a través de la terminal a la carpeta recién creada y escribiremos el siguiente comando
tsc --init
Con este comando generaremos el archivo de configuración básico que utilizará TypeScript
para compilar la información.
{
"compilerOptions": {
"module": "commonjs",
"target": "es5",
"noImplicitAny": false,
"sourceMap": false
},
"exclude": [
"node_modules"
]
}
La presencia de este archivo significa que este directorio es la raíz del proyecto.
Para que se compile un fichero TypeScripte tienes que utilizar el siguiente comando
La instalación de TypeScript es relativamente simple, únicamente necesitamos la
instalación de un servidor NodeJS y con el gestor de paquetes npm para descargarnos el
transpilador TypeScript
Para descargar NodeJS hay que ir a nodejs.org
y una vez instalado comprobar la instalación mediante el comando:
node -v
Si nos dice la versión de NodeJS que tenemos proseguiremos con el siguiente paso la
descarga de TypeScript para ello abriremos una terminal y escribiremos esto
(Windows\/Linux\/Mac)
npm install -g typescript
Para comprobar la correcta instalación de TypeScript y la versión que se a instalado
escribimos
tsc -v
instalación de los tsd de nodejs
npm install tsd -g
tsc = TypeScript Console
El siguiente paso será crear una carpeta donde trabajar para ello dependiendo de nuestro
sistema operativo podremos utilizar un ejecutable u otro para crear una carpeta o simplemente hacerlo desde la interfaz gráfica, una vez creada navegaremos a través de la terminal a la carpeta recién creada y escribiremos el siguiente comando
tsc --init
Con este comando generaremos el archivo de configuración básico que utilizará TypeScript
para compilar la información.
{
"compilerOptions": {
"module": "commonjs",
"target": "es5",
"noImplicitAny": false,
"sourceMap": false
},
"exclude": [
"node_modules"
]
}
La presencia de este archivo significa que este directorio es la raíz del proyecto.
Para que se compile un fichero TypeScripte tienes que utilizar el siguiente comando
tsc -w
Si al realizar esta instalación ocurre algún error, una alternativa para practicar sería la
página de pruebas de TypeScript
Si al realizar esta instalación ocurre algún error, una alternativa para practicar sería la
página de pruebas de TypeScript
IDE - Visual Studio Code
https://code.visualstudio.com/ En Visual Code es un entorno de desarrolladores de Microsoft, pero de código abierto, la razón por la que aparece este entorno de desarrollo, es porque ni más ni menos que Microsoft es el creador de Typescript, VS Code es un IDE que nos permitirá automatizar tareas para ello abrimos el menú pulsando el F1 y escribimos Configure task Runner hacemos click y seleccionamos tsconfig.json esto nos generará una carpeta llamada y dentro de ella un archivo llamado task.json que sería así:
{
// See https://go.microsoft.com/fwlink/?LinkId=733558
// for the documentation about the tasks.json format
"version": "0.1.0",
"command": "tsc",
"isShellCommand": true,
"args": ["-p", "."],
"showOutput": "silent",
"problemMatcher": "$tsc"
}
Buscador
Para buscar en todos los ficheros de un proyecto utilizamos ctrl + alt + t
Debuggin
Debuggin
Para poder debuggear en Visual Code ts, necesitamos configurar el archivo de
configuración tsconfig y en la línea sourceMap la ponemos a true dejando el fichero de
configuración de la siguiente forma:
{
"compilerOptions": {
"module": "commonjs",
"target": "es5",
"noImplicitAny": false,
"sourceMap": true
},
"exclude": [
"node_modules"
]
}
Una vez modificada esa línea se generará un archivo .map con el mismo nombre del
archivo .ts que tengamos en ese archivo .map estarán asociadas las líneas del archivo
.js compilado y la línea del archivo .ts una vez modificado, pondremos el punto de
debug donde deseemos y presionaremos F5 para ejecutar el código aparecerá un dialogo
que nos preguntará que tipo de servidor queremos elegir, elegiremos NodeJS y
configuraremos el archivo de configuración para que quede así:
{
"version": "0.2.0",
"configurations": [
{
"name": "Iniciar",
"type": "node",
"request": "launch",
"program": "${workspaceRoot}/app.ts",
"stopOnEntry": false,
"args": [],
"cwd": "${workspaceRoot}",
"preLaunchTask": null,
"runtimeExecutable": null,
"runtimeArgs": [
"--nolazy"
],
"env": {
"NODE_ENV": "development"
},
"externalConsole": false,
"sourceMaps": true,
"outDir": null
},
{
"name": "Asociar",
"type": "node",
"request": "attach",
"port": 5858,
"address": "localhost",
"restart": false,
"sourceMaps": false,
"outDir": null,
"localRoot": "${workspaceRoot}",
"remoteRoot": null
},
{
"name": "Attach to Process",
"type": "node",
"request": "attach",
"processId": "${command.PickProcess}",
"port": 5858,
"sourceMaps": false,
"outDir": null
}
]
}
Las líneas modificadas del original han sido las siguientes:
"sourceMaps": true,
"program": "${workspaceRoot}/app.ts",
Para debuggear al siguiente punto de debug utilizamos el botón F10 y para un paso más controlado un F11
SIGUE APRENDIENDO DESCARGANDO EL ARCHIVO
configuración tsconfig y en la línea sourceMap la ponemos a true dejando el fichero de
configuración de la siguiente forma:
{
"compilerOptions": {
"module": "commonjs",
"target": "es5",
"noImplicitAny": false,
"sourceMap": true
},
"exclude": [
"node_modules"
]
}
Una vez modificada esa línea se generará un archivo .map con el mismo nombre del
archivo .ts que tengamos en ese archivo .map estarán asociadas las líneas del archivo
.js compilado y la línea del archivo .ts una vez modificado, pondremos el punto de
debug donde deseemos y presionaremos F5 para ejecutar el código aparecerá un dialogo
que nos preguntará que tipo de servidor queremos elegir, elegiremos NodeJS y
configuraremos el archivo de configuración para que quede así:
{
"version": "0.2.0",
"configurations": [
{
"name": "Iniciar",
"type": "node",
"request": "launch",
"program": "${workspaceRoot}/app.ts",
"stopOnEntry": false,
"args": [],
"cwd": "${workspaceRoot}",
"preLaunchTask": null,
"runtimeExecutable": null,
"runtimeArgs": [
"--nolazy"
],
"env": {
"NODE_ENV": "development"
},
"externalConsole": false,
"sourceMaps": true,
"outDir": null
},
{
"name": "Asociar",
"type": "node",
"request": "attach",
"port": 5858,
"address": "localhost",
"restart": false,
"sourceMaps": false,
"outDir": null,
"localRoot": "${workspaceRoot}",
"remoteRoot": null
},
{
"name": "Attach to Process",
"type": "node",
"request": "attach",
"processId": "${command.PickProcess}",
"port": 5858,
"sourceMaps": false,
"outDir": null
}
]
}
Las líneas modificadas del original han sido las siguientes:
"sourceMaps": true,
"program": "${workspaceRoot}/app.ts",
Para debuggear al siguiente punto de debug utilizamos el botón F10 y para un paso más controlado un F11
SIGUE APRENDIENDO DESCARGANDO EL ARCHIVO
![[Mega Curso] Aprende Crackear Programas Desde Cero: Ingenieria Reversible](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8848DqY-aHIjLTzBpBj0xjF-1GI4ze-njp1-W1ZY5q-W4YFPqS7CpxGwB87Ll0519bltPXjU1mObGxzuyO7AVDX7HdD_cEyoQpvR66sBVa6UbmI0J37YLzHmWFRV4FGJDUwBOCaWZJvc/s72-c/curso+de+craker.png)
![[Mega Curso] Aprende Crackear Programas Desde Cero: Ingenieria Reversible](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8848DqY-aHIjLTzBpBj0xjF-1GI4ze-njp1-W1ZY5q-W4YFPqS7CpxGwB87Ll0519bltPXjU1mObGxzuyO7AVDX7HdD_cEyoQpvR66sBVa6UbmI0J37YLzHmWFRV4FGJDUwBOCaWZJvc/w72-h72-p-k-no-nu/curso+de+craker.png)
