TypeScript Tutoriel
Démarrer avec TypeScript

Remarques

Versions

Installation et configuration

Contexte

TypeScript est un sur-ensemble typé de JavaScript qui compile directement en code JavaScript. Les fichiers TypeScript utilisent généralement l'extension .ts . De nombreux IDE prennent en charge TypeScript sans aucune autre configuration requise, mais TypeScript peut également être compilé avec le package TypeScript Node.JS à partir de la ligne de commande.

IDE

Visual Studio

• Visual Studio 2015 inclut TypeScript.
• Visual Studio 2013 Update 2 ou version ultérieure inclut TypeScript, ou vous pouvez télécharger TypeScript pour les versions antérieures .

Code Visual Studio

• Visual Studio Code (vscode) fournit une saisie semi-automatique contextuelle ainsi que des outils de refactoring et de débogage pour TypeScript. vscode est lui-même implémenté dans TypeScript. Disponible pour Mac OS X, Windows et Linux.

WebStorm

• WebStorm 2016.2 est livré avec TypeScript et un compilateur intégré. [Webstorm n'est pas gratuit]

IntelliJ IDEA

• IntelliJ IDEA 2016.2 prend en charge Typescript et un compilateur via un plug - in géré par l'équipe Jetbrains. [IntelliJ n'est pas gratuit]

Atome & Atom-Typograph

• Atom prend en charge TypeScript avec le package atom-typescript .

Texte sublime

• Sublime Text prend en charge TypeScript avec le package typecript .

Installation de l'interface de ligne de commande

Installez Node.js

Installez le paquet npm globalement

Vous pouvez installer TypeScript globalement pour y accéder depuis n'importe quel répertoire.

npm install -g typescript

ou

Installez le paquet npm localement

Vous pouvez installer TypeScript localement et enregistrer dans package.json pour restreindre à un répertoire.

npm install typescript --save-dev

Canaux d'installation

Vous pouvez installer à partir de:

• Canal stable: npm install typescript
• Canal bêta: npm install typescript@beta
• Canal de développement: npm install typescript@next

Compiler du code TypeScript

La commande de compilation tsc est fournie avec typescript , qui peut être utilisé pour compiler du code.

tsc my-code.ts

Cela crée un fichier my-code.js .

Compiler en utilisant tsconfig.json

Vous pouvez également fournir des options de compilation qui voyagent avec votre code via un fichier tsconfig.json . Pour démarrer un nouveau projet TypeScript, cd dans le répertoire racine de votre projet dans une fenêtre de terminal et lancez tsc --init . Cette commande génère un fichier tsconfig.json avec des options de configuration minimales, similaires à celles ci-dessous.

{
    "compilerOptions": {
        "module": "commonjs",
        "target": "es5",
        "noImplicitAny": false,
        "sourceMap": false,
        "pretty": true
    },
    "exclude": [
        "node_modules"
    ]
}

Avec un fichier tsconfig.json placé à la racine de votre projet TypeScript, vous pouvez utiliser la commande tsc pour exécuter la compilation.

Bonjour le monde

class Greeter {
    greeting: string;

    constructor(message: string) {
        this.greeting = message;
    }
    greet(): string {
        return this.greeting;
    }
};

let greeter = new Greeter("Hello, world!");
console.log(greeter.greet());

Nous avons ici une classe, Greeter , qui a un constructor et une méthode de greet . Nous pouvons construire une instance de la classe en utilisant le new mot - clé et passer dans une chaîne que nous voulons que la greet méthode pour la sortie de la console. L'instance de notre classe Greeter est stockée dans la variable greeter que nous appelons ensuite la méthode greet .

Syntaxe de base

TypeScript est un sur-ensemble typé de JavaScript, ce qui signifie que tout le code JavaScript est un code TypeScript valide. TypeScript ajoute beaucoup de nouvelles fonctionnalités à cela.

TypeScript rend JavaScript plus proche d'un langage orienté objet fortement typé, à savoir C # et Java. Cela signifie que le code TypeScript est plus facile à utiliser pour les grands projets et que ce code est plus facile à comprendre et à gérer. Le typage fort signifie également que le langage peut (et est) précompilé et que des variables ne peuvent pas être affectées en dehors de leur plage déclarée. Par exemple, lorsqu'une variable TypeScript est déclarée en tant que nombre, vous ne pouvez pas lui affecter de valeur de texte.

Cette forte typage et cette orientation des objets facilitent le débogage et la maintenance de TypeScript, deux des points les plus faibles du langage JavaScript standard.

Déclarations de type

Vous pouvez ajouter des déclarations de type aux variables, aux paramètres de fonction et aux types de retour de fonction. Le type est écrit après un deux-points après le nom de la variable, comme ceci: var num: number = 5; Le compilateur vérifiera alors les types (si possible) pendant la compilation et les erreurs de type de rapport.

var num: number = 5;
num = "this is a string";  // error: Type 'string' is not assignable to type 'number'.

Les types de base sont:

• number (entiers et nombres à virgule flottante)
• string
• boolean
• Array . Vous pouvez spécifier les types d'éléments d'un tableau. Il existe deux manières équivalentes de définir les types de tableau: Array<T> et T[] . Par exemple:
  • number[] - tableau de nombres
  • Array<string> - tableau de chaînes
• Tuples Les tuples ont un nombre fixe d'éléments avec des types spécifiques.
  • [boolean, string] - tuple où le premier élément est un booléen et le second une chaîne.
  • [number, number, number] - tuple de trois nombres.
• {} - objet, vous pouvez définir ses propriétés ou indexeur
  • {name: string, age: number} - objet avec attribut name et age
  • {[key: string]: number} - un dictionnaire de nombres indexés par chaîne
• enum - { Red = 0, Blue, Green } - énumération mappée sur des nombres
• Fonction. Vous spécifiez les types pour les paramètres et la valeur de retour:
  • (param: number) => string - fonction prenant un paramètre de nombre renvoyant une chaîne
  • () => number - fonction sans paramètres renvoyant un numéro.
  • (a: string, b?: boolean) => void - fonction prenant une chaîne et éventuellement un booléen sans valeur de retour.
• any - Permet tout type. Les expressions impliquant any qui ne sont pas vérifiées.
• void - représente "rien", peut être utilisé comme valeur de retour de fonction. Seules les null et undefined font partie du type void .
• never
  • let foo: never; -Comme le type de variables sous les gardes de type qui ne sont jamais vraies.
  • function error(message: string): never { throw new Error(message); } - Comme type de retour des fonctions qui ne reviennent jamais.

• null - type pour la valeur null . null est implicitement partie de chaque type, sauf si les vérifications NULL strictes sont activées.

Fonderie

Vous pouvez effectuer un transtypage explicite entre crochets, par exemple:

var derived: MyInterface;
(<ImplementingClass>derived).someSpecificMethod();

Cet exemple montre une classe derived qui est traitée par le compilateur en tant que MyInterface . Sans le casting sur la deuxième ligne, le compilateur émettrait une exception car il ne comprend pas someSpecificMethod() , mais le passage via <ImplementingClass>derived suggère au compilateur ce qu'il doit faire.

Une autre façon de coulée dactylographiée utilise le as mot clé:

var derived: MyInterface;
(derived as ImplementingClass).someSpecificMethod();

Depuis Typecript 1.6, le mot-clé as est utilisé par défaut, car l'utilisation de <> est ambiguë dans les fichiers .jsx . Ceci est mentionné dans la documentation officielle de Typescript .

Des classes

Les classes peuvent être définies et utilisées dans le code TypeScript. Pour en savoir plus sur les classes, consultez la page de documentation Classes .

TypeScript REPL dans Node.js

Pour utiliser TypeScript REPL dans Node.js, vous pouvez utiliser le package tsun

Installez-le globalement avec

npm install -g tsun

et exécutez dans votre terminal ou l'invite de commande avec la commande tsun

Exemple d'utilisation:

$ tsun
TSUN : TypeScript Upgraded Node
type in TypeScript expression to evaluate
type :help for commands in repl
$ function multiply(x, y) {
..return x * y;
..}
undefined
$ multiply(3, 4)
12

Exécution de TypeScript en utilisant ts-node

ts-node est un paquet npm qui permet à l'utilisateur d'exécuter directement des fichiers texte, sans avoir besoin de précompiler avec tsc . Il fournit également REPL .

Installer ts-node en utilisant globalement

npm install -g ts-node

ts-node ne regroupe pas le compilateur de typecript, vous devrez donc peut-être l'installer.

npm install -g typescript

Exécution du script

Pour exécuter un script nommé main.ts , exécutez

ts-node main.ts

// main.ts
console.log("Hello world");

Exemple d'utilisation

$ ts-node main.ts
Hello world

Exécution de REPL

Pour exécuter la commande d'exécution REPL ts-node

Exemple d'utilisation

$ ts-node
> const sum = (a, b): number => a + b;
undefined
> sum(2, 2)
4
> .exit

Pour quitter REPL, utilisez la commande .exit ou appuyez deux fois sur CTRL+C