Herencia, Interfaces y Decoradores en TypeScript, Apuntes de Programación del Sistema

¡Descarga Herencia, Interfaces y Decoradores en TypeScript y más Apuntes en PDF de Programación del Sistema solo en Docsity!

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

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

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

Introducció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

Instalación del entorno de desarrollo

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=

// 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:

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

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 F

IDE - Visual Studio Code

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 = 0o

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 sintaxis los string deben estar contenidos entre `.

Este tipo de sintaxis es el equivalente a:

let sentence: string = "Hello, my name is " + fullName + "." + "I'll be " + (age + 1)

• " years old next month."

Tipos primitivos

Plantillas de strings

Las plantillas de strings se escriben entre ` y la sintáxis sería:

var lyrics = 'Never gonna give you up'; // entre comillas simples var html = <div>${lyrics}</div>; // entre tilde inversa

Este tipo de plantillas permite que podamos utilizar más de una línea sin tener que utilizar el operador + por eso se dice que un "string templated" es multilineal

String literal type

Podemos crear un string literal como un type. Por ejemplo:

let literalString = 'Hello';

La variable que acabamos de crear nada más que podrá contener el valor que le hemos asignado, es decir 'Hola'.

let literalString = 'Hello'; literalString = 'Bye'; // Error: "Bye" is not assignable to type "Hello"

Por si solo no tiene una gran utilidad por lo que se combina con union types, type guards, y type alias. Los cuales explicaremos más tarde.

type CardinalDirection = "North" | "East" | "South" | "West"; function move(distance: number, direction: CardinalDirection) { // ... } move(1,"North"); // Okay move(1,"Nurth"); // Error!

Array

Arrays, sino se les especifica tipo son ANY

let list: number[] = [1, 2, 3];

Tipos primitivos

Tuple / Tuplas

Como en base de datos, hacen referencia a registros clave / valor

// Declaración de tublas let x: [string, number]; // Inicialización correcta

x = ["hello", 10]; // OK // Inicialización incorrecta x = [10, "hello"]; // Error

Para acceder a los datos dentro de las tuplas de las cuales sabes el índice se hace así:

console.log(x[0].substr(1)); // OK

console.log(x[1].substr(1)); // Error, Un tipo 'number' no tiene la función 'substr'

Cuando queramos acceder a un elemento sin conocer el mapeo del contenido

x[3] = "world"; // OK, Un tipo 'string' puede ser asignado a una tupla que contenga 's tring | number' console.log(x[5].toString()); // OK, Un tipo 'string' y un tipo 'number' tienen la fun ción 'toString' x[6] = true; // Error,El tipo 'boolean' no es 'string | number'

Tuple / Tuplas

Enum

Los enumerado en TypeScript , son distintos a los enumerados de otros lenguajes de programación, estos solo almacenan números para identificar las constantes.

Si no se le especifica el valor por defecto se lo asigna normalmente, también es importante saber, que los enumerados no aceptan que su valor sea un String, solamente número

enum Direction { Up = 1, // Si se le asigna un valor numerico primero, los siguientes valores empi ezan desde el número especificado Down = NaN, // Si le ponemos un NaN despúes de haber inicializado un valor nos ob liga a inicializar el siguiente desués de este, esto no solo pasa con Nan, pasa con St ring.length, etc. Left = "asdasd".length, Right = 1 << 1 // También admiten operadores binarios }

var a = Direction.Up; console.log(Direction.Down);

Sin asignación de valor

enum Color {Red, Green, Blue}; let c: Color = Color.Green;// 1

Con asignación de valor

enum Color {Red = 1, Green = 2, Blue = 4}; let c: Color = Color.Green; // 2

También se puede acceder al nombre de los atributos

enum Color {Red = 1, Green, Blue}; let colorName: string = Color[2]; alert(colorName); // Green

Es muy importante saber que distintos enumerados no pueden ser comparados ya que el nombre de los enumerados no es el mimo, aunque puedan tener el mismo indice númerico.

Enum

Any

Puede ser cualquier tipo de objeto de javascript

let notSure: any = 4; notSure = "maybe a string instead"; // typeof = string notSure = false;; // typeof = boolean

let notSure: any = 4; notSure.ifItExists(); // OK, ifItExists puede existir notSure.toFixed(); // OK, toFixed existe, pero no es comprobado por el compilador let prettySure: Object = 4; prettySure.toFixed(); // Error: La propiedad 'toFixed' no existe en un 'Object'.

let list: any[] = [1, true, "free"]; list[1] = 100;

Any

Void

function warnUser(): void { alert("This is my warning message");

}

Este tipo de dato no es recomendable para variables ya que solo pueden ser asignados valores null o undefined

let unusable: void = undefined;

Void