Introducción a TypeScript

Introducción a TypeScript

por

TypeScript se conoce como un superconjunto de JavaScript y se compila en él. Esto significa que los programas escritos en JavaScript también son programas TypeScript válidos, y debido a que se traducen a JavaScript normal, los programas en TypeScript se pueden escribir, compilar y ejecutar en cualquier lugar que acepte JavaScript para ejecutarse, como un navegador, plataforma Node.js, o cualquier motor que admita JavaScript ECMAScript versión 3 o posterior de JavaScript.

TypeScript admite nuevas funciones de JavaScript que están en desarrollo, incluidas las funciones de ECMAScript 2015 y sugerencias futuras, como funciones asíncronas y decoradores para ayudar a crear componentes potentes. Estas funciones están disponibles para el desarrollador cuando crea secuencias de comandos localmente para proporcionar una experiencia de desarrollador mejorada y fluida, pero se traducen en JavaScript simple dirigido a entornos ECMAScript 3 (o posterior) para admitir navegadores que no admiten las funciones de la nueva versión.

Debido a que TypeScript es una extensión del lenguaje JavaScript, necesitará un poco de conocimiento de JavaScript antes de continuar leyendo esta documentación.

Tabla de contenidos

Instalar TypeScript

El compilador que traduce TypeScript a JavaScript se puede instalar usando el administrador de paquetes npm con el siguiente comando:

 npm install -g typescript

Si está en Linux o Mac, es posible que necesite privilegios de administrador:

sudo npm install -g typescript

Puede usar un editor como Visual Studio Code u otro editor habilitado para lenguaje.

Si está utilizando un editor o entorno de desarrollo que no sea Visual Studio, aquí hay enlaces para agregar compatibilidad con TypeScript:

Cree su primera aplicación de TypeScript

Abra un archivo con un nombre saludo.ts en su editor y escriba el siguiente código JavaScript en él:

function saludo(person) {
    return "Hola, " + person;
}

let user = "Jon Doe";

document.body.innerHTML = saludo(user);

Compilando el código

Usamos la extensión de archivo .ts, pero el código anterior es simplemente JavaScript. Puede copiarlo o pegarlo en una aplicación JavaScript normal.

En la línea de comando, use el intérprete de TypeScript para traducir el código:

tsc  saludo. ts

Producirá un archivo con saludo.js‎ el mismo nombre que el JavaScript que ingresamos. ¡Esto significa que hemos podido usar TypeScript en nuestra aplicación de JavaScript!

Ahora podemos usar las funciones y herramientas adicionales proporcionadas por TypeScript. Agregue una anotación ‎:string de tipo al parámetro personen la función como se muestra aquí:

function saludo(person: string) {
    return "Hola, " + person;
}

let user = "Jon Doe";

document.body.innerHTML = saludo(user);

Tipos de anotaciones (Type annotations)

Las anotaciones de tipo son formas simples de registrar la intención de usar una función o variable. En este caso, pretendemos llamar a la función de bienvenida con un solo parámetro de cadena. Podemos intentar cambiar la llamada de función para pasarle una matriz en lugar de una cadena como especifica el parámetro:

function saludo(person: string) {
    return "Hola, " + person;
}

let user = [0, 1, 2];

document.body.innerHTML = saludo(user);

Al volver a compilar, notará el siguiente error:

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

De la misma manera, intente llamar a la función saludo sin pasarle ningún parámetro. Notará que TypeScript le dirá que llamó a la función con una cantidad inesperada de parámetros. De cualquier manera, TypeScript puede proporcionar un análisis estático basado tanto en la estructura de su código como en las anotaciones de tipo que proporciona en su código.

Tenga en cuenta que el archivo saludo.js se genera a pesar de los errores. Puede usar TypeScript incluso si hay errores en su código. Pero en este caso, TypeScript advierte que es posible que su código no funcione como se esperaba.

Interfaces

Sigamos desarrollando nuestra aplicación. Aquí usamos una interfaz para describir objetos que tienen campos firstName y lastName. En TypeScript, dos tipos son compatibles si su estructura interna es compatible. Esto nos permite crear una interfaz usando solo la forma que requiere la interfaz, sin necesidad de un archivo implements.

interface Person {
    firstName: string;
    lastName: string;
}

function saludo(person: Person) {
    return "Hola, " + person.firstName + " " + person.lastName;
}

let user = { firstName: "Jon", lastName: "Doe" };

document.body.innerHTML = saludo(user);

Clases

Finalmente, ampliemos el ejemplo usando la función Categorías. TypeScript admite nuevas funciones de JavaScript, como la compatibilidad con la programación orientada a objetos basada en clases.

Crearemos una clase con nombre Student con un constructor y algunos campos públicos. Tenga en cuenta que las interfaces y las clases funcionan juntas, lo que permite al programador decidir el nivel de abstracción.

Tenga en cuenta también que usar la palabra clave public con parámetros de constructor es una forma concisa que nos permite crear automáticamente propiedades con el mismo 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 saludo(person : Person) {
    return "Hola, " + person.firstName + " " + person.lastName;
}

let user = new Student("Jon", "M.", "Doe");

document.body.innerHTML = saludo(user);

Vuelva a ejecutar el comando tsc saludo.ts y verá que el JavaScript generado es el mismo que el código anterior. Las clases en TypeScript son solo una forma breve de programación orientada a objetos basada en la cadena Prototype que se usa a menudo en JavaScript.

Ejecución de una aplicación web escrita en TypeScript

Ahora escriba lo siguiente en un archivo llamado saludo.html:

<!DOCTYPE html>
<html>
    <head><title>TypeScript Greeter</title></head>
    <body>
        <script src="saludo.js"></script>
    </body>
</html>

¡ Abra saludo.html su navegador para iniciar su primera aplicación web TypeScript!

Opcionalmente: abra saludo.ts en Visual Studio o copie el código en la plataforma de demostración de TypeScript. Puede pasar el cursor sobre los identificadores para ver sus tipos. Tenga en cuenta que estos tipos a veces se infieren automáticamente. Vuelva a escribir la última línea y observe una lista de sugerencias para completar y ayudar con los parámetros según los tipos de elementos DOM. Coloque el puntero del mouse sobre la referencia de la función saludo y presione F12 para acceder a su definición. Tenga en cuenta también que puede hacer clic con el botón derecho en un icono y usar la refactorización para cambiarle el nombre.

La información de tipo disponible funciona con herramientas que funcionan con JavaScript al desarrollar aplicaciones. Para obtener más información sobre TypeScript, consulte nuestras otras páginas de documentación .

Recursos del Artículo