PDF de programación - Introducción a TypeScript

Table of Contents

Introducción

Instalación del entorno de desarrollo
IDE - Visual Studio Code

Tipos de datos

Tipos primitivos
Tuple / Tuplas
Enum
Any
Void
Let
Const
For in
For of
Funciones
Genéricos
Assert
Type Alias
Type Union
Type Guards

Fat arrow
Desestructuración
Estructuración
Promesas
Generators
Esperas asincrónicas - Async Await
Clases

Modificadores de clase
Abstract
IIFE
Herencia

1.1
1.1.1
1.1.2
1.2
1.2.1
1.2.2
1.2.3
1.2.4
1.2.5
1.2.6
1.2.7
1.2.8
1.2.9
1.2.10
1.2.11
1.2.12
1.2.13
1.2.14
1.2.15
1.3
1.4
1.5
1.6
1.7
1.8
1.9
1.9.1
1.9.2
1.9.3
1.9.4

2

Sobrecarga de metodos

Mixin
Interfaces

Decorators

Class decorator
Property decorator
Method decorator
Static method decorator
Parameter decorator

Módulos
Sistemas de automatización
Consejos

Devolver un objeto literal
Clases estáticas
Métodos de inicialización estáticos

¿Quiénes somos?

1.9.5
1.9.5.1
1.9.6
1.10
1.10.1
1.10.2
1.10.3
1.10.4
1.10.5
1.11
1.12
1.13
1.13.1
1.13.2
1.13.3
1.14

3

Introducción

Licencia

Este obra está bajo una licencia de Creative Commons Reconocimiento-NoComercial-
SinObraDerivada 4.0 Internacional.

Descargas

PDF
EPUB
MOBI
URL Base

Introducción

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

4

Introducción

Aparte de estas características TS tiene más características, pero quizás la más importante
sea que gracias a el tiempo de debuggin es reducido ya que, para poder debuggear código
javascript en la actualidad, este tiene que ser ejecutado en la aplicación y se le debe sumar
el tiempo que se tarde en la detección del fallo, mientras que con TypeScript el código
simplemente no será compilado y nos dará un error en la compilación diciéndonos donde se
encuentra el error.

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).

5

Instalación del entorno de desarrollo

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.

6

Instalación del entorno de desarrollo

{

"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

7

IDE - Visual Studio Code

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

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:

8

IDE - Visual Studio Code

{

"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": [],

9

IDE - Visual Studio Code

"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",

10

IDE - Visual Studio Code

"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

11

Tipos de datos

Tipos de datos

TypeScript es un lenguaje que añade a JavaScript una capa de tipado estático y algunas
otras incorporaciones de OOP tradicional. Esta capa puede resultarnos de muchísima
ayuda durante el desarrollo. Sin embargo, todas estas características son simplemente para
ayudar a trabajar con JavaScript en tiempo de diseño, ya que TypeScript compila todo
como JavaScript tradicional.

Tipado estático o fuertemente tipado: Se debe de definir el tipo de dato, obligando a que no
pueda haber errores con los tipos de datos

Tipado dinámico o débilmente tipado: No se deben de o tiene porque especificar el tipo de
dato (PHP, Javascript)

Porque typescript es fuertemente tipado

var a=3;

var b="hola";

var c=a+b; // Resultado 3hola

if ("0" == 0) // es true

if ("3" === 3) // es false

Estos ejemplos son posibles problemas que tienen los lenguajes débilmente tipadas

12

Tipos primitivos

Tipos primitivos

Boolean

true o false

let isDone: boolean = false;

Number

Datos númericos

let decimal: number = 6;

let hex: number = 0xf00d;

let binary: number = 0b1010;

let octal: number = 0o744

String

Cadenas de caracteres y/o textos

let color: string = "blue"; //
color = 'red';

También se pueben utilizar "Templates" plantillas para concatenar strings como por ejemplo:

let fullName: string = `Bob Bobbington`;
let age: number = 37;
let sentence: string = `Hello, my name is ${ fullName }. I'll be ${ age + 1 } years ol
d next month.`

Para poder utilizar esta sintax