Qu'est-ce que TypeScript ?

TypeScript est un langage de programmation gratuit et open source développé par Microsoft. C'est un sur-ensemble de JavaScript, qui étend la syntaxe de JavaScript.

Caractéristiques syntaxiques

  • Classes
  • Interfaces
  • Modules
  • Annotations de type
  • Vérification des types à la compilation
  • Fonctions fléchées (similaires aux expressions Lambda de C#)

Pour plus de contenu, veuillez consulter :Tutoriel TypeScript。

La différence entre JavaScript et TypeScript

TypeScript est un sur-ensemble de JavaScript, étendant la syntaxe de JavaScript. Par conséquent, le code JavaScript existant peut fonctionner avec TypeScript sans aucune modification. TypeScript fournit une vérification statique des types à la compilation grâce aux annotations de type.

TypeScript peut gérer le code JavaScript existant et ne compile que le code TypeScript qu'il contient.

Installation de TypeScript

Nous pouvons installer TypeScript des deux manières suivantes :

L'interface lors de l'installation via un fichier MSI :

Étapes d'installation via npm :

1. Installer npm

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

2. Installer le paquet npm TypeScript :

$ npm install -g typescript

Après l'installation, nous pouvons utiliser le compilateur TypeScript, nommé tsc, qui peut générer des fichiers js à partir des résultats de compilation.

Pour compiler un fichier TypeScript, utilisez la commande suivante :

tsc filename.ts

Une fois la compilation réussie, un fichier js du même nom sera généré dans le même répertoire. Vous pouvez également modifier le nom de sortie par défaut via les paramètres de commande.

Par défaut, le compilateur cible ECMAScript 3 (ES3), mais ES5 est également une option prise en charge. TypeScript ajoute la prise en charge des fonctionnalités proposées pour la norme ECMAScript 6 à venir.

Hello World en TypeScript

Tout d'abord, nous créons un fichier index.html :

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

Créez un fichier hello.ts. *.ts est l'extension de fichier pour les fichiers TypeScript. Ajoutez le code suivant au fichier hello.ts :

alert('hello world in TypeScript!');

Ensuite, nous ouvrons la ligne de commande et utilisons la commande tsc pour compiler le fichier hello.ts :

$ tsc hello.ts

Un fichier hello.js sera généré dans le même répertoire. Ensuite, ouvrez index.html et la sortie est la suivante :

Annotations de type

TypeScript fournit des types statiques via des annotations de type pour activer la vérification des types au moment de la compilation. Ceci est facultatif et peut être ignoré pour utiliser les types dynamiques habituels de JavaScript.

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

Les annotations pour les types de base sont number, bool et string. La structure de type faible ou dynamique est le type any.

Les annotations de type peuvent être exportées vers un fichier de déclaration séparé pour rendre disponible les informations de type des scripts TypeScript qui utilisent des types et ont été compilés en JavaScript. Des annotations peuvent être déclarées pour une bibliothèque JavaScript existante, comme cela a été fait pour Node.js et jQuery.

Lorsque les types ne sont pas donnés, le compilateur TypeScript utilise l'inférence de type pour déduire les types. Si aucun type ne peut être déduit en raison d'un manque de déclarations, il utilise par défaut le type dynamique any.

Exemple

Ensuite, nous créons une simple fonction area() dans le fichier 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);

Ensuite, modifiezindex.htmlle fichier js pourtype.jsCompilez ensuite le fichier TypeScript :tsc type.ts。

Actualisez le fichier index.html dans le navigateur, et le résultat est le suivant :

Interface

Ensuite, nous étendons l'exemple ci-dessus avec une interface. Créez un fichier interface.ts et modifiezindex.htmlle fichier js pourinterface.js。

Le code du fichier interface.js est le suivant :

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"} ) );

Une interface peut servir d'annotation de type.

Compilez le code ci-dessustsc interface.tsAucune erreur ne se produira, mais si vous ajoutez une instruction sans le paramètre name après le code ci-dessus, une erreur sera signalée lors de la compilation :

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

Recompilez, et le message d'erreur est le suivant :

$ 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; }'.

Accédez-y dans le navigateur, et le résultat est le suivant :

Expressions de fonctions fléchées (expressions lambda)

Expression lambda()=>{something} ou ()=>somethingElle est équivalente à une fonction en js. Son avantage est qu'elle peut automatiquement lier this dans la fonction au contexte.

Essayez d'exécuter ce qui suit :

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 dans l'exemple est une valeur vide :

Ensuite, nous utilisons la fonction fléchée de TypeScript. Remplacezfunction()par() =>： 

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();

La sortie est la suivante :

Dans le fichier js compilé de l'exemple ci-dessus, nous pouvons voir une lignevar _this = this;，_thisDans la fonction de rappel de setTimeout(), il fait référence à la propriété name.

Classe

TypeScript prend en charge les classes ECMAScript 6 qui intègrent la prise en charge facultative des annotations de type.

Ensuite, nous créons un fichier de classe class.ts, avec le code suivant :

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 classe Shape ci-dessus a deux propriétés, area et color, un constructeur (constructor()), et une méthode shoutout().

Les paramètres (name, width et height) du constructeur ont une portée de variable locale, donc lors de la compilation du fichier ci-dessus, la sortie d'erreur dans le navigateur est la suivante :

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'

Ensuite, nous ajoutons les modificateurs d'accès public et private. Les membres publics sont accessibles n'importe où, tandis que les membres privés ne sont accessibles qu'au sein de la classe.

Ensuite, nous modifions le code ci-dessus, en déclarant color comme private et le paramètre name du constructeur comme public :

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

Comme la variable membre color est définie sur private, le message suivant apparaîtra :

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

Héritage

Enfin, nous pouvons hériter d'une classe existante et créer une classe dérivée. L'héritage utilise le mot-cléextends。

Ensuite, nous ajoutons le code suivant à la fin du fichier class.ts, comme indiqué ci-dessous :

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() );

Explication de la classe dérivée Shape3D :

  • Shape3D hérite de la classe Shape et hérite également de la propriété color de la classe Shape.
  • Dans le constructeur, la méthode super appelle le constructeur Shape de la classe de base Shape, en passant les valeurs des paramètres name, width et height. L'héritage nous permet de réutiliser le code de la classe Shape, nous pouvons donc calculer this.volume en héritant de la propriété area.
  • La méthode shoutout() de Shape3D redéfinit l'implémentation de la classe de base. La méthode superShout() retourne directement la méthode shoutout() de la classe de base en utilisant le mot-clé super.
  • Pour le reste du code, nous pouvons implémenter la fonctionnalité que nous souhaitons selon nos propres besoins.

Documentation de référence