¿Qué es TypeScript?

TypeScript es un lenguaje de programación libre y de código abierto desarrollado por Microsoft. Es un superconjunto de JavaScript que extiende la sintaxis de JavaScript.

Características de sintaxis

  • Clases
  • Interfaces
  • Módulos
  • Anotaciones de tipo
  • Comprobación de tipos en tiempo de compilación
  • Funciones flecha (similares a las expresiones lambda de C#)

Para más contenido, consulte:Tutorial de TypeScript。

Diferencias entre JavaScript y TypeScript

TypeScript es un superconjunto de JavaScript que extiende la sintaxis de JavaScript, por lo que el código JavaScript existente puede funcionar con TypeScript sin ninguna modificación. TypeScript proporciona comprobación de tipos estática en tiempo de compilación mediante anotaciones de tipo.

TypeScript puede manejar código JavaScript existente y solo compila el código TypeScript que contiene.

Instalación de TypeScript

Podemos instalar TypeScript de las siguientes dos formas:

Interfaz al instalar mediante el archivo MSI:

Pasos para instalar mediante npm:

1. Instalar npm

$ curl http://npmjs.org/install.sh | sh
$  npm --version
2.15.1

2. Instalar el paquete npm de TypeScript:

$ npm install -g typescript

Una vez completada la instalación, podemos usar el compilador de TypeScript, llamado tsc, que puede generar archivos js como resultado de la compilación.

Para compilar archivos TypeScript, puede usar el siguiente comando:

tsc filename.ts

Una vez que la compilación tiene éxito, se genera un archivo js con el mismo nombre en el mismo directorio. También puede modificar el nombre de salida predeterminado mediante parámetros de comando.

De forma predeterminada, el compilador apunta a ECMAScript 3 (ES3), pero ES5 también es una opción compatible. TypeScript añade soporte para las características propuestas para el próximo estándar ECMAScript 6.

TypeScript Hello World

Primero, creamos un archivo index.html:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Learning TypeScript</title>
</head> 
<body> 
    <script src="hello.js.html"></script>
</body> 
</html>

Cree el archivo hello.ts. *.ts es la extensión de los archivos TypeScript. Añada el siguiente código al archivo hello.ts:

alert('hello world in TypeScript!');

A continuación, abrimos la línea de comandos y usamos el comando tsc para compilar el archivo hello.ts:

$ tsc hello.ts

Se generará un archivo hello.js en el mismo directorio. Luego abra index.html y el resultado será el siguiente:

Anotaciones de tipo

TypeScript proporciona tipos estáticos mediante anotaciones de tipo para activar la comprobación de tipos en tiempo de compilación. Esto es opcional y puede omitirse para utilizar los tipos dinámicos habituales de JavaScript.

function Add(left: number, right: number): number {
    return left + right;
}

Las anotaciones para los tipos básicos son number, bool y string. Mientras que las estructuras de tipo débil o dinámico son del tipo any.

Las anotaciones de tipo pueden exportarse a un archivo de declaración separado para que la información de tipos de los scripts TypeScript compilados a JavaScript esté disponible. Las anotaciones pueden declararse para una biblioteca JavaScript existente, como ya se ha hecho para Node.js y jQuery.

Cuando no se proporciona un tipo, el compilador de TypeScript utiliza la inferencia de tipos para deducirlo. Si no se puede inferir ningún tipo debido a la falta de declaraciones, se asume por defecto el tipo dinámico any.

Ejemplo

A continuación, creamos una función simple area() en el archivo TypeScript type.ts:

function area(shape: string, width: number, height: number) {
    var area = width * height;
    return "I'm a " + shape + " with an area of " + area + " cm squared.";
}
 
document.body.innerHTML = area("rectangle", 30, 15);

A continuación, modifiqueindex.htmlel archivo js detype.jsLuego compile el archivo TypeScript:tsc type.ts。

Actualice el archivo index.html en el navegador. El resultado es el siguiente:

Interfaces

A continuación, ampliamos el ejemplo anterior mediante una interfaz. Cree un archivo interface.ts y modifiqueindex.htmlel archivo js deinterface.js。

El código del archivo interface.js es el siguiente:

interface Shape {
    name: string;
    width: number;
    height: number;
    color?: string;
}
 
function area(shape : Shape) {
    var area = shape.width * shape.height;
    return "I'm " + shape.name + " with area " + area + " cm squared";
}
 
console.log( area( {name: "rectangle", width: 30, height: 15} ) );
console.log( area( {name: "square", width: 30, height: 30, color: "blue"} ) );

La interfaz puede usarse como una anotación de tipo.

Compile el código anteriortsc interface.tsNo aparecerá ningún error, pero si agrega una declaración con el parámetro name faltante después del código anterior, se producirá un error al compilar:

console.log( area( {width: 30, height: 15} ) );

Recompile. El mensaje de error es el siguiente:

$ tsc hello.ts 
hello.ts(15,20): error TS2345: Argument of type '{ width: number; height: number; }' is not assignable to parameter of type 'Shape'.
  Property 'name' is missing in type '{ width: number; height: number; }'.

Acceda desde el navegador. El resultado es el siguiente:

Expresiones de funciones flecha (expresiones lambda)

Expresiones lambda()=>{something} o ()=>somethingEquivale a las funciones en js. Su ventaja es que puede vincular automáticamente el this de la función al contexto.

Intente ejecutar lo siguiente:

var shape = {
    name: "rectangle",
    popup: function() {
 
        console.log('This inside popup(): ' + this.name);
 
        setTimeout(function() {
            console.log('This inside setTimeout(): ' + this.name);
            console.log("I'm a " + this.name + "!");
        }, 3000);
 
    }
};
 
shape.popup();

this.name en el ejemplo es un valor vacío:

A continuación, usamos las funciones flecha de TypeScript. Reemplacefunction()por() =>： 

var shape = {
    name: "rectangle",
    popup: function() {
 
        console.log('This inside popup(): ' + this.name);
 
        setTimeout( () => {
            console.log('This inside setTimeout(): ' + this.name);
            console.log("I'm a " + this.name + "!");
        }, 3000);
 
    }
};
 
shape.popup();

El resultado es el siguiente:

En el archivo js compilado del ejemplo anterior, podemos ver una líneavar _this = this;，_thisEn la función de devolución de llamada de setTimeout() se hace referencia a la propiedad name.

Clase

TypeScript admite las clases de ECMAScript 6 integradas con soporte opcional de anotaciones de tipo.

A continuación, creamos un archivo de clase class.ts, con el siguiente código:

class Shape {
 
    area: number;
    color: string;
 
    constructor ( name: string, width: number, height: number ) {
        this.area = width * height;
        this.color = "pink";
    };
 
    shoutout() {
        return "I'm " + this.color + " " + this.name +  " with an area of " + this.area + " cm squared.";
    }
}
 
var square = new Shape("square", 30, 30);
 
console.log( square.shoutout() );
console.log( 'Area of Shape: ' + square.area );
console.log( 'Name of Shape: ' + square.name );
console.log( 'Color of Shape: ' + square.color );
console.log( 'Width of Shape: ' + square.width );
console.log( 'Height of Shape: ' + square.height );

La clase Shape anterior tiene dos propiedades, area y color, un constructor (constructor()) y un método shoutout().

Los parámetros del constructor (name, width y height) tienen alcance de variables locales, por lo que al compilar el archivo anterior, el error mostrado en el navegador es el siguiente:

class.ts(12,42): The property 'name' does not exist on value of type 'Shape'
class.ts(20,40): The property 'name' does not exist on value of type 'Shape'
class.ts(22,41): The property 'width' does not exist on value of type 'Shape'
class.ts(23,42): The property 'height' does not exist on value of type 'Shape'

A continuación, agregamos los modificadores de acceso public y private. Los miembros public pueden accederse desde cualquier lugar, mientras que los miembros private solo se permiten dentro de la clase.

A continuación, modificamos el código anterior declarando color como private y el parámetro name del constructor como public:

...
private color: string;
...
constructor ( public name: string, width: number, height: number ) {
...

Dado que la variable miembro color se ha establecido como private, aparecerá el siguiente mensaje:

class.ts(24,41): The property 'color' does not exist on value of type 'Shape'

Herencia

Finalmente, podemos heredar de una clase existente y crear una clase derivada. La herencia utiliza la palabra claveextends。

A continuación, agregamos el siguiente código al final del archivo class.ts, como se muestra a continuación:

class Shape3D extends Shape {
 
    volume: number;
 
    constructor ( public name: string, width: number, height: number, length: number ) {
        super( name, width, height );
        this.volume = length * this.area;
    };
 
    shoutout() {
        return "I'm " + this.name +  " with a volume of " + this.volume + " cm cube.";
    }
 
    superShout() {
        return super.shoutout();
    }
}
 
var cube = new Shape3D("cube", 30, 30, 30);
console.log( cube.shoutout() );
console.log( cube.superShout() );

Explicación de la clase derivada Shape3D:

  • Shape3D hereda de la clase Shape y también hereda la propiedad color de la clase Shape.
  • En el constructor, el método super llama al constructor Shape de la clase base Shape, pasando los valores de los parámetros name, width y height. La herencia nos permite reutilizar el código de la clase Shape, por lo que podemos calcular this.volume mediante la propiedad area heredada.
  • El método shoutout() de Shape3D sobrescribe la implementación de la clase base. El método superShout() devuelve directamente el método shoutout() de la clase base mediante la palabra clave super.
  • Para el resto del código, podemos implementar las funciones que deseemos según nuestras necesidades.

Documentación de referencia