Leccion 6 - Typescript

Comencemos construyendo una aplicación web simple con TypeScript.

Instalación de TypeScript

Hay dos formas principales de hacer que TypeScript esté disponible para su proyecto:

A través de npm (el administrador de paquetes de Node.js)
Instalando los complementos de Visual Studio de TypeScript

Para usuarios de npm:

   
npm install -g typescript

Construyendo su primer archivo TypeScript

En su editor, escriba 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 una .tsextensión, pero este código es solo JavaScript. Podría haber copiado / pegado esto directamente de una aplicación JavaScript existente.

En la línea de comando, ejecute el compilador de TypeScript:

   
 tsc greeter.ts

El resultado será un archivo greeter.js que contiene el mismo JavaScript que introdujo. ¡Estamos en funcionamiento usando TypeScript en nuestra aplicación JavaScript!

Ahora podemos empezar a aprovechar algunas de las nuevas herramientas que ofrece TypeScript. Agregue una : string anotación de tipo al argumento de la función 'persona' como se muestra aquí:

   
function greeter(person: string) {
  return "Hello, " + person;
}
 
let user = "Jane User";
 
document.body.textContent = greeter(user);

Escribir anotaciones

¿Qué son las anotaciones en TypeScript?

TypeScript usa anotaciones de tipo para especificar explícitamente tipos para identificadores como variables, funciones, objetos, etc.

TypeScript usa la sintaxis : typedespués de un identificador como la anotación de tipo, donde typepuede haber cualquier tipo válido.

Una vez que un identificador está anotado con un tipo, solo se puede usar como ese tipo. Si el identificador se usa como un tipo diferente, el compilador de TypeScript emitirá un error.

Ejemplo de anotaciones en TypeScript:

   
var age: number = 32; // number variable
var name: string = "John";// string variable
var isUpdated: boolean = true;// Boolean variable

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 se llame a la función de bienvenida con un solo parámetro de cadena. Podemos intentar cambiar el saludo de llamada para pasar una matriz en su lugar:

   
function greeter(person: string) {
  return "Hello, " + person;
}
 
let user = [0, 1, 2];
 
document.body.textContent = greeter(user);

Al volver a compilar, verá un error:

   
 error TS2345: Argument of type 'number[]' is not assignable to parameter of type 'string'.

Del mismo modo, intente eliminar todos los argumentos de la llamada de bienvenida. TypeScript le permitirá saber que ha llamado a esta función con un número inesperado 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.

Observe que aunque hubo errores, el greeter.jsarchivo aún se crea. Puede usar TypeScript incluso si hay errores en su código. Pero en este caso, TypeScript advierte que su código probablemente no se ejecutará como se esperaba.

Interfaces

Recordemos que es una interfaz

Una interfaz es un contrato sintáctico que debe cumplir una entidad. En otras palabras, una interfaz define la sintaxis a la que debe adherirse cualquier entidad.

Las interfaces definen propiedades, métodos y eventos, que son los miembros de la interfaz. Las interfaces contienen solo la declaración de los miembros. Es responsabilidad de la clase derivada definir los miembros. A menudo ayuda a proporcionar una estructura estándar que seguirían las clases derivadas.

Desarrollemos más nuestra muestra. Aquí usamos una interfaz que describe objetos que tienen un campo de nombre y apellido. En TypeScript, dos tipos son compatibles si su estructura interna es compatible. Esto nos permite implementar una interfaz simplemente teniendo la forma que requiere la interfaz, sin una implementscláusula 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, ampliemos el ejemplo una última vez con clases. TypeScript admite nuevas funciones en JavaScript, como la compatibilidad con la programación orientada a objetos basada en clases.

Aquí vamos a crear una Studentclase con un constructor y algunos campos públicos. Observe que las clases y las interfaces funcionan bien juntas, lo que permite que el programador decida el nivel correcto de abstracción.

También es de destacar que el uso de publicargumentos on para el constructor es una forma abreviada que nos permite 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);

Vuelva a ejecutar tsc greeter.tsy verá que el JavaScript generado es el mismo que el código anterior. Las clases en TypeScript son solo una abreviatura del mismo OO basado en prototipos que se usa con frecuencia en JavaScript.

Herramientas de TypeScript en 5 minutos