TypeScript tiene una relación inusual con JavaScript. 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 string y number, pero no verifica que las haya asignado de manera consistente. TypeScript lo hace.
TypeScript conoce el lenguaje JavaScript y generará tipos por ti en muchos casos.Por ejemplo,al crear una variable y asignarle un valor determinado,TypeScript utilizará el valor como su tipo.
let helloWorld = "Hello World";
Al comprender cómo funciona JavaScript, TypeScript puede construir un sistema de tipos que acepta código JavaScript pero tiene tipos. Esto ofrece un sistema de tipos sin necesidad de agregar caracteres adicionales para hacer que los tipos sean explícitos en su código. Así es como TypeScript sabe que helloWorld es una string en el ejemplo anterior. Es posible que haya escrito JavaScript en Visual Studio Code,y que haya tenido el autocompletado del editor.Visual Studio Code utiliza TypeScript bajo el capó para facilitar el trabajo con JavaScript.
Se puede utilizar una gran variedad de patrones de diseño en JavaScript.Sin embargo,algunos patrones de diseño dificultan que los tipos se infieran automáticamente (por ejemplo,los patrones que utilizan programación dinámica).Para cubrir estos casos,TypeScript soporta una extensión del lenguaje JavaScript,que ofrece lugares para que le digas a TypeScript cuáles deben ser los tipos. Por ejemplo, para crear un objeto con un tipo inferido que incluye name: string e id: number , puede escribir:
const user = {
name: "Hayes",
id: 0,
};
Puede describir explícitamente la forma de este objeto mediante una declaración de interface :
interface User {
name: string;
id: number;
}
Luego puede declarar que un objeto JavaScript se ajusta a la forma de su nueva interface usando una sintaxis como : TypeName después de una declaración de variable:
const user: User = {
name: "Hayes",
id: 0,
};
Si proporciona un objeto que no coincide con la interfaz que ha proporcionado, TypeScript le advertirá:
interface User {
name: string;
id: number;
}
const user: User = {
username: "Hayes",
id: 0,
};
Dado que JavaScript soporta clases y programación orientada a objetos,también lo hace TypeScript.Puedes usar una declaración de interfaz con clases:
interface User {
name: string;
id: number;
}
class UserAccount {
name: string;
id: number;
constructor(name: string, id: number) {
this.name = name;
this.id = id;
}
}
const user: User = new UserAccount("Murphy", 1);
Puede utilizar las interfaces para anotar los parámetros y los valores de retorno de las funciones:
function getAdminUser(): User {
//...
}
function deleteUser(user: User) {
// ...
}
Ya existe un pequeño conjunto de tipos primitivos disponibles en JavaScript: boolean , bigint , null , number , string , symbol e undefined , que puede usar en una interfaz. TypeScript amplía esta lista con algunos más, como any (permitir cualquier cosa), unknown (asegúrese de que alguien que usa este tipo declare cuál es el tipo), never (no es posible que este tipo pueda suceder) y void (una función que devuelve undefined o no tiene valor de retorno).
Verá que hay dos sintaxis para los tipos de construcción: interfaces y tipos . Debería preferir la interface . Utilice la type cuando necesite funciones específicas.
Con TypeScript,puedes crear tipos complejos combinando tipos simples.Hay dos formas populares de hacerlo:con uniones y con genéricos.
type MyBool = true | false;
type WindowStates = "open" | "closed" | "minimized";
type LockStates = "locked" | "unlocked";
type PositiveOddNumbersUnderTen = 1 | 3 | 5 | 7 | 9;
function getLength(obj: string | string[]) {
return obj.length;
}
function wrapInArray(obj: string | string[]) {
if (typeof obj === "string") {
return [obj];
}
return obj;
}
type StringArray = Array;
type NumberArray = Array;
type ObjectWithNameArray = Array<{ name: string }>;
Uno de los principios básicos de TypeScript es que la verificación de tipos se centra en la forma que tienen los valores. A esto a veces se le llama "tipificación de pato" 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;
y: number;
}
function logPoint(p: Point) {
console.log(`${p.x}, ${p.y}`);
}
// registra "12, 26"
const point = { x: 12, y: 26 };
logPoint(point);
Si el objeto o la clase tiene todas las propiedades requeridas,TypeScript dirá que coinciden,independientemente de los detalles de la implementación.
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); // registra "13, 56"
Autores: Grupo 07 de TPI115 - UES