TypeScript

Last updated Aug 6, 2023 Edit Source

• Programming
• Frontend
• Typescript

Es el lenguaje por excelencia en el cual se encuentra escrito notes/Angular.

TypeScript es un superset de JavaScript, creado y mantenido por Microsoft que provee tipado fuerte (estatico) a JavaScript. Este lenguaje compila directamente a JavaScript.

Se trata de mantener tu codigo funcional y limpio, ademas, puede ser copilado a versiones antiguas de JavaScript (Como ES2015). Este superset es soportado por todas las herramientas y frameworks populares.

Mantiene la aplicacion libre de Type Errors. Lenguajes como Java, C#, C++ tienen este mecanismo integrado. Mediante este, podemos declarar el tipo de una variable y mantenernos libres de insertar valores de otros tipos dentro de una variable.

Este mecanismo es removido al momento de conversion de TypeScript a JavaScript.

TypeScript se encuentra disponible como un paquete de npm, por tanto, se puede instalar de la siguiente forma en un proyecto ya inicializado.

1

npm i typescript

Posteriormente, podemos inicializar typescript con el comando:

1

tsc --init

Para ejecutar este comando, debemos asegurarnos que los scripts habilitados en nuestro sistema operativo. En Windows 10 se realiza utilizando el siguiente comando en PowerShell ejecutandolo como administrador:

1

Set-ExecutionPolicy RemoteSigned

Es posible compilar el codigo utilizando el comando tsc. Mediante este, podremos compilar el codigo de TypeScript a JavaScript.

En TypeScript, se tienen soporte a algunos de los tipos de datos basicos de JavaScript y adicionalmente, agrega unos cuantos. La lista completa de ellos es la siguiente:

• string. Tipos de datos para representar una cadena de texto
• number. Representa numeros reales y enteros
• boolean. Representa un estado, true o false
• array. Representa una coleccion de elementos. Gracias a TS podemos definir arrays solo de un tipo especifico como number[] o string[]
• enum. Representa un grupo limitado de elementos, un conjunto de constantes que nunca cambian.
• tuple. Tienen una sintaxis bastante similar a los arrays, solo que estos te protejen de salir de los indices limites de la tupla
• any . Es como un placeholder que sirve para guardar un valor que puede ser de cualquier tipo de datos valido.
• void. Es otro placeholder que sirve para representar un retorno vacio, es normal verlo en las funciones que no tienen un statement return.
• never.

TypeScript tiene soporte para la Inferencia de Tipos, es decir, que muchas veces no se necesita especificar el tipo de datos que se requiere de una variable. Sin embargo Esta es una practica para nada recomendada.

Lo comun en TS es escribir el tipo de una variable de la siguiente forma:

1

const lname : string; // Constante con tipo string declarado de forma explicita

En TypeScript puedes escribir una funcion de multiples formas. Las formas comunes de JavaScript son soportadas (Funcion Expresada, Funcion Declarada, y Arrow Function)

1
2
3

function name(par1, par2) {} // Funcion declarada
const name2 = function (par, par2) {} // Funcion Expresada
(par1, par2) => {} // Funcion anonima / Arrow Function

Sin embargo, en TypeScript,se deben de declarar los tipos de los parametros que recibe y el tipo de datos que retorna.

1
2
3
4
5
6
7
8
9

function sum(num1: number, num2: number): number {
	return num1 + num2;
}

const reduce = function (num1: number, num2: number): number {
	return num1 - num2;
}

const multiply = (num1: number, num2: number): number => num1 * num2;

Una Funcion Generica te permite utilizar cualquier tipo de datos como entrada y como salida, sin ningun problema. Es muy util cuando se empieza a trabajar con clases debido a que estas pueden servir como un tipo de dato mas.

1
2
3

function getItems <T> (items: T): T[] {
	return new Array<T>().concat(items);
}

Ahora podemos utilizar esta funcion con cualquier tipo de dato valido!.

Adicionalmente, podemos colocar un opcional a los parametros de una funcion, mediante esta, podemos indicar que un elemento puede ser o no insertado en la funcion.

1
2
3

function sum(num1: number, num2: number, num3?: number = 0): number {
	return num1 + num2 + num3;
}

Utiliza una Sintaxis extremadamente similar a javaScript, solo se implementa la declaracion de tipos.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

class Employee {
	#id: number;
	protected name: string;
	address: string;
	
	constructor (id: number, name: string, address: string) {
		this.#id = id;
		this.name = name;
		this.address = address;
	}
}

En notes/Angular las clases se utilizan para guardar todos los business logic y para crear componentes.

Este es un modificador que todavia no esta incluido en ES. Por tanto, se debe utilizar un keyword reservado para poder hacer la herencia de atributos entre clases de forma protegida.

1
2
3
4
5

class Manager extends Employee {
	constructor(id: number, name: string, address: string) {
		super(id, name, address);
	}
}

Esta funcionalidad tambien ha sido incluida en ES6. La sintaxis es similar en TS.

1
2
3
4
5
6

// inside class
// ...
static getEmployeeCount() {
	return count;
}
// Other code inside class

Un componente bastante importante que integra TypeScript. Sirve para establecer contratos, extensibilidad, seguir el principio Open/Closed entre muchas otras cosas.

Su sintaxis es bastante similar a Java:

1
2
3
4
5
6

interface User {
	// propiedades
	name: string;
	age: number;
	// cabeceras de metodos
}

En TypeScript, estos pueden servir como contratos para definir objetos sin utilizar new y definirlos como objetos literales.

1

const user: User = { name: 'Jaime', age: 20 }; // Cumpliendo el contrato definido en la interfaz. Se instancia como unt emplate literal

Es una alternativa un poco mas “dinamica” a utilizar las clases. Sin embargo, esta tambien puede tener el comportamiento de clase abstracta pura.

1
2
3
4
5
6
7
8

interface Login {
	login(): boolean;
	logout(): void;
}

class UserLogin implements Login {
	// metodos
}

Sirven para modificar el comportamiento de una clase o un metodo a la hora de correr el codigo. No son muy normales verlos en codigo estandar de TypeScript pero si son implementados por herramientas como Angular.

1
2
3
4

@Component({}) 
class Component {
	// ...
}