Traducido de https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes.html
¡Empecemos a crear una web simple con TypeScript!
Instalando TypeScript
Estas son las dos maneras de obtener las herramientas de TypeScript:
Via npm (the Node.js package manager)
Instalando Plugins en Visual Studio
Visual Studio 2017 y Visual Studio 2015 Update 3 incluyen TypeScript de forma predeterminada. Si no instalaste TypeScript con Visual Studio, aún podés descargarlo.
Para usuarios de NPM:
npm install -g typescript
Escribiendo tu primer archivo TypeScript
En tu editor, escribí el siguiente código Javascript en greeter.ts
function greeter(person) {
return "Hello, " + person;
}
let user = "Jane User";
document.body.textContent = greeter(user);
Compilando tu código
Usamos la extención .ts, pero el código es solo Javascript. Podría haber copy-pasteado esto directo de una pp Javascript.
Con este comando empezamos la compilación:
tsc greeter.ts
El resultado será el archivo greeters.js que contendrá el mismo código Js que le diste ¡Estamos trabajando con TypeScript en nuestra app js!
Ahora podemos empezar a tomar ventaja de las nuevas herramientas que nos ofrece TypeScript. Añadí la notación de tipo :string al argumento person de la función. Así:
function greeter(person: string) {
return "Hello, " + person;
}
let user = "Jane User";
document.body.textContent = greeter(user);
Anotaciones de tipo
Las anotaciones de tipo en TypeScript son formas ligeras de registrar el contrato previsto de la función o variable. En este caso, pretendemos que la función greeter se llame con un solo parámetro string. Podemos intentar llamar a greeter pasandole un array:
function greeter(person: string) {
return "Hello, " + person;
}
let user = [0, 1, 2];
document.body.textContent = greeter(user);
Re-compilando esto, vas a ver un error
error TS2345: Argument of type 'number[]' is not assignable to parameter of type 'string'.
De forma similar, probá removiendo todos los parámetros de la llamada a la función.TypeScript te hará saber que estás llamando a la función con un inesperado número de parámetros. En ambos casos, TypeScript puede ofrecer un análisis estático basado tanto en la estructura de su código como en las anotaciones de tipo que proporcione.
Notá cómo a pesar de haber errores, el archivo greeter.js es creado igual. Podés usar TypeScript incluso si hay errores en tu código. Pero en este caso, TypeScript advierte que tu código probablemente no se ejecutará como se esperabas.
Interfaces
Desarrollemos nuestro ejemplo un poco más. Acá usamos una interface que describe objetos que tienen un firstName y un lastName. En TypeScript, dos tipos son compatibles si su estructura interna es compatible. Esto nos permite implementar una interface con solo tener la forma requerida, sin una cláusula implements explícita.
interface Person {
firstName: string;
lastName: string;
}
function greeter(person: Person) {
return "Hello, " + person.firstName + " " + person.lastName;
}
let user = { firstName: "Jane", lastName: "User" };
document.body.textContent = greeter(user);
Clases
Finalmente, extendamos el ejemplo una vez más con clases. TypeScript soporta las nuevas features de JavaScript, como las clases y la POO.
Vamos a crear la clase Student con algunos campos públicos. Fijáte cómo las clases y las interfaces van bien juntas, dejando al programador decidir el correcto nivel de abstracción.
El uso de public en los argumentos del constructor sirve para crear automáticamente propiedades con ese nombre
class Student {
fullName: string;
constructor(public firstName: string, public middleInitial: string, public lastName: string) {
this.fullName = firstName + " " + middleInitial + " " + lastName;
}
}
interface Person {
firstName: string;
lastName: string;
}
function greeter(person: Person) {
return "Hello, " + person.firstName + " " + person.lastName;
}
let user = new Student("Jane", "M.", "User");
document.body.textContent = greeter(user);
Ejecuta de vuelta tsc greeter.ts y vas a ver que el JavaScript generado es el mismo que el código anterior. Las clases en TypeScript son solo una abreviatura para el mismo OO basado en prototipos que se usa con frecuencia en JavaScript.
Ejecutando tu web app TypeScript
Escribí lo siguiente en greeter.html
<!DOCTYPE html>
<html>
<head><title>TypeScript Greeter</title></head>
<body>
<script src="greeter.js"></script>
</body>
</html>
¡Abrí greeter.html en el browser y tendrás tu primera app en TypeScript!
Opcional: Abrí greeter.ts en Visual Studio o copie el código en el playground de TypeScript. Podés pasar el cursor sobre los identificadores para ver sus tipos. Tené en cuenta que en algunos casos estos tipos se infieren automáticamente. Vuelva a escribir la última línea y verás las listas de finalización y la ayuda de parámetros según los tipos de elementos DOM. Coloca el cursor sobre la referencia a la función de bienvenida y presiona F12 para ir a su definición. Fijáte también que puede hacer clic con el botón derecho en un símbolo y utilizar la refactorización para cambiarle el nombre.
La información de tipo proporcionada funciona junto con las herramientas para trabajar con JavaScript a escala de aplicación.
Comentarios