TypeScript
Superconjunto de JavaScript: Tipos
estáticos y objetos basados en clases
Spring 1
Av. Arenales 395 Oficina 405 - 4336948 - info@cjavaperu.com CJava, siempre para apoyarte.
Objetivos
Aprender a crear y utilizar aplicaciones Web usando Typescript:
1. Aprender a usar TypeScript para detectar errores tempranente a través de un sistema de tipos y hacer que
el desarrollo de JavaScript sea más eficiente.
2. Aprender a usar su moderno y avanzado sistema de tipado.
3. Lograr navegar más fácilmente, identificar problemas, inspeccionar posibilidades y refactorizar la base del
código fuente.
CJava Perú
Av. Arenales 395 Oficina 405 - 4336948 - info@cjavaperu.com CJava, siempre para apoyarte.
TypeScript – Qué es?
• Es un lenguaje basado en JavaScript para que se pueda desarrollar más rápido un código de
mayor calidad y menos propenso a errores.
• También se usa TypeScript para reducir los errores de compilación y acelerar el flujo de trabajo.
• TypeScript ofrece todas las funciones de JavaScript y una capa adicional además de estas: el
sistema de tipos de TypeScript.
• Por ejemplo, JavaScript proporciona primitivas de lenguaje como cadenas y números, pero no
comprueba que las haya asignado de forma constante. TypeScript si lo hace.
• Esto significa que su código JavaScript de trabajo existente también es código TypeScript.
• El principal beneficio de TypeScript es que puede resaltar el comportamiento inesperado en su
código, lo que reduce la posibilidad de errores.
CJava Perú
Av. Arenales 395 Oficina 405 - 4336948 - info@cjavaperu.com CJava, siempre para apoyarte.
TypeScript – Tipos por inferencia
• TypeScript conoce el lenguaje JavaScript y generará tipos para utilizarlos en muchos casos.
• Por ejemplo, al crear una variable y asignarla a un valor particular, TypeScript usará el valor
como su tipo.
let helloWorld = "Hello World";
let helloWorld: string
CJava Perú
Av. Arenales 395 Oficina 405 - 4336948 - info@cjavaperu.com CJava, siempre para apoyarte.
TypeScript – Definición de tipos
• TypeScript admite una extensión del lenguaje JavaScript, que permite indicar cuáles deberían ser
los tipos.
• Por ejemplo, para crear un objeto con un tipo inferido que incluye nombre: string e id:
number, puede escribir:
const usuario = {
nombre: "Alicia",
id: 0,
};
CJava Perú
Av. Arenales 395 Oficina 405 - 4336948 - info@cjavaperu.com CJava, siempre para apoyarte.
TypeScript – Tipos de composición
• Se puede crear tipos complejos combinando tipos simples. Hay dos formas populares de hacerlo:
con uniones y con genéricos.
Uniones
• Con una unión, puede declararse que un tipo podría ser uno de muchos tipos.
• Por ejemplo, puede describir un tipo booleano como verdadero o falso:
type habilitado = true | false;
• Un caso de uso popular para los tipos de unión es describir el conjunto de cadenas o números
literales que se permite que tenga un valor:
type estadosVentana = "open" | "closed" | "minimized";
type estadosBloqueo = “bloqueado" | “desbloqueado";
type imparesMenores10 = 1 | 3 | 5 | 7 | 9;
CJava Perú
Av. Arenales 395 Oficina 405 - 4336948 - info@cjavaperu.com CJava, siempre para apoyarte.
TypeScript – Tipos de composición
• Las uniones también brindan una forma de manejar diferentes tipos. Por ejemplo, puede tener
una función que tome una matriz o una cadena:
function getLength(obj: string | string[]) {
return obj.length;
}
• Para conocer el tipo de una variable, use typeof:
CJava Perú
Av. Arenales 395 Oficina 405 - 4336948 - info@cjavaperu.com CJava, siempre para apoyarte.
TypeScript – Tipos de composición
• Por ejemplo, puede hacer que una función devuelva valores diferentes dependiendo de si se le
pasa una cadena o un arreglo:
function envolverEnArreglo(obj: string | string[]) {
if (typeof obj === "string") {
return [obj];
(parameter) obj: string
}
return obj;
}
CJava Perú
Av. Arenales 395 Oficina 405 - 4336948 - info@cjavaperu.com CJava, siempre para apoyarte.
TypeScript – Generics
• Los genéricos proporcionan variables a los tipos. Un ejemplo común es un arreglo.
• Un arreglo sin genéricos podría contener cualquier cosa.
• Una matriz con genéricos puede describir los valores que contiene la matriz.
type StringArray = Array<string>;
type NumberArray = Array<number>;
type ObjectWithNameArray = Array<{ name: string }>;
CJava Perú
Av. Arenales 395 Oficina 405 - 4336948 - info@cjavaperu.com CJava, siempre para apoyarte.
TypeScript – Generics
• Puede declarar sus propios tipos que usan genéricos:
interface Backpack<Type> {
add: (obj: Type) => void;
get: () => Type;
}
// Esta línea es un atajo para decirle a TypeScript que hay un
// constante llamada ` backpack `, y no preocuparse por su procedencia.
declare const backpack: Backpack<string>;
// El objeto es una cadena, porque lo declaramos arriba como la parte variable de Backpack.
const object = backpack.get();
// Dado que la variable backpack es una cadena, no puede pasar un número a la función agregar.
backpack.add(23);
• Un argumento de algún tipo 'númerico' no se puede asignar al parámetro de tipo 'cadena’ (string).
CJava Perú
Av. Arenales 395 Oficina 405 - 4336948 - info@cjavaperu.com CJava, siempre para apoyarte.
TypeScript – Sistema de tipo estructural
• Puede declarar sus propios tipos que usan genéricos:
interface Backpack<Type> {
add: (obj: Type) => void;
get: () => Type;
}
// Esta línea es un atajo para decirle a TypeScript que hay un
// constante llamada ` backpack `, y no preocuparse por su procedencia.
declare const backpack: Backpack<string>;
// El objeto es una cadena, porque lo declaramos arriba como la parte variable de Backpack.
const object = backpack.get();
// Dado que la variable backpack es una cadena, no puede pasar un número a la función agregar.
backpack.add(23);
• Un argumento de algún tipo 'númerico' no se puede asignar al parámetro de tipo 'cadena’ (string).
CJava Perú
Av. Arenales 395 Oficina 405 - 4336948 - info@cjavaperu.com CJava, siempre para apoyarte.
TypeScript – Sistema de tipo estructural
• Uno de los principios básicos de TypeScript es que la verificación de tipos se centra en la
forma que tienen los valores.
• Esto a veces se denomina " duck typing" o "tipificación estructural".
• En un sistema de tipo estructural, si dos objetos tienen la misma forma, se considera que
son del mismo tipo.
interface Point {
x: number;
• La variable Point nunca se declara como un tipo Point. Sin
y: number;
embargo, TypeScript compara la forma del punto con la }
forma del Point en la verificación de tipo.
• Tienen la misma forma, por lo que pasa el código. function logPoint(p: Point) {
console.log(`${p.x}, ${p.y}`);
}
// logs "12, 26"
const point = { x: 12, y: 26 };
logPoint(point);
CJava Perú
Av. Arenales 395 Oficina 405 - 4336948 - info@cjavaperu.com CJava, siempre para apoyarte.
TypeScript – Sistema de tipo estructural
• La coincidencia de formas solo requiere que coincida un subconjunto de los campos del objeto.
const point3 = { x: 12, y: 26, z: 89 };
logPoint(point3); // logs "12, 26"
const rect = { x: 33, y: 3, width: 30, height: 80 };
logPoint(rect); // logs "33, 3"
const color = { hex: "#187ABF" };
logPoint(color);
• Argumento de tipo '{hex: string; } 'no se puede asignar a un parámetro de tipo ‘Point’.
• Al escribir '{hex: cadena; } ‘ le faltan las siguientes propiedades del tipo ’Point': x, y
• No hay diferencia entre cómo las clases y los objetos se ajustan a las formas:
CJava Perú
Av. Arenales 395 Oficina 405 - 4336948 - info@cjavaperu.com CJava, siempre para apoyarte.
TypeScript – Sistema de tipo estructural
• No hay diferencia entre cómo las clases y los objetos se ajustan a las formas:
class VirtualPoint {
x: number;
y: number;
constructor(x: number, y: number) {
this.x = x;
this.y = y;
}
}
const newVPoint = new VirtualPoint(13, 56);
logPoint(newVPoint); // logs "13, 56"
• Si el objeto o la clase tiene todas las propiedades requeridas, TypeScript dirá que coinciden,
independientemente de los detalles de implementación.
CJava Perú
Av. Arenales 395 Oficina 405 - 4336948 - info@cjavaperu.com CJava, siempre para apoyarte.
Gracias
Av. Arenales 395 Oficina 405 - 4336948 - info@cjavaperu.com CJava, siempre para apoyarte.
