[PDF] Manuel de cours complet en PDF pour démarrer avec typescript de A à Z - Cours Javascript

(1)

(2)

Table des matières

À propos

1 Chapitre 1: Démarrer avec TypeScript

2 Remarques

2 Versions

2 Examples

3 Installation et configuration

3 Contexte

3 IDE

3 Visual Studio

3 Code Visual Studio

4 WebStorm

4 IntelliJ IDEA

4 Atome & Atom-Typograph

4 Texte sublime

4 Installation de l'interface de ligne de commande

4 Installez Node.js

4 Installez le paquet npm globalement

4 Installez le paquet npm localement

4 Canaux d'installation

5 Compiler du code TypeScript

5 Compiler en utilisant tsconfig.json

5 Bonjour le monde

5 Syntaxe de base

6 Déclarations de type

6 Fonderie

7 Des classes

7 TypeScript REPL dans Node.js

8 Exécution de TypeScript en utilisant ts-node

8 Chapitre 2: Comment utiliser une bibliothèque javascript sans fichier de définition de typ

10

(3)

Examples

10 Déclarer un tout global

10 Faire un module qui exporte une valeur par défaut

10 Utiliser un module d'ambiance

11 Chapitre 3: Configurez le projet typecript pour compiler tous les fichiers en texte dactyl

12 Introduction

12 Examples

12 Configuration du fichier de configuration typographique

12 Chapitre 4: Contrôles Nuls Strict

14 Examples

14 Strict null vérifie en action

14 Assertions non nulles

14 Chapitre 5: Décorateur de classe

16 Paramètres

16 Examples

16 Décorateur de classe de base

16 Générer des métadonnées en utilisant un décorateur de classe

16 Passer des arguments à un décorateur de classe

17 Chapitre 6: Des classes

19 Introduction

19 Examples

19 Classe simple

19 Héritage de base

19 Constructeurs

20 Les accesseurs

21 Classes abstraites

21 Singe patch une fonction dans une classe existante

22 Transpilation

23 TypeScript source

23 Source JavaScript

23

(4)

Examples

25 Comment obtenir toutes les valeurs énumérées

25 Enums avec des valeurs explicites

25 Mise en œuvre personnalisée: étend pour les énumérations

26 Extension des énumérations sans implémentation d'énumération personnalisée

27 Chapitre 8: Exemples de base de texte

28 Remarques

28 Examples

28 1 exemple d'héritage de classe de base utilisant extend et super keyword

28 2 exemple de variable de classe statique - nombre de fois que la méthode est appelée

28 Chapitre 9: Gardes de type définis par l'utilisateur

30 Syntaxe

30 Remarques

30 Examples

30 Utiliser instanceof

30 En utilisant typeof

31 Fonctions de protection de type

31 Chapitre 10: Génériques

33 Syntaxe

33 Remarques

33 Examples

33 Interfaces Génériques

33 Déclarer une interface générique

33 Interface générique avec plusieurs paramètres de type

34 Implémenter une interface générique

34 Classe générique

34 Contraintes génériques

35 Fonctions génériques

35 Utilisation de classes et de fonctions génériques:

36 Tapez les paramètres en tant que contraintes

36

(5)

Syntaxe

38 Remarques

38 Examples

39 Importer un module à partir de npm

39 Recherche de fichiers de définition

39 Utiliser des bibliothèques externes globales sans typage

40 Recherche de fichiers de définition avec les typescript 2.x

40 Chapitre 12: Intégration avec les outils de construction

42 Remarques

42 Examples

42 Installer et configurer webpack + loaders

42 Naviguer

42 Installer

42 Utilisation de l'interface de ligne de commande

42 Utiliser l'API

43 Grognement

43 Installer

43 Basic Gruntfile.js

43 Gorgée

43 Installer

43 Gulpfile.js de base

44 gulpfile.js utilisant un tsconfig.json existant

44 Webpack

44 Installer

44 Webpack.config.js de base

44 webpack 2.x, 3.x

44 webpack 1.x

45 MSBuild

45 NuGet

46 Chapitre 13: Interfaces

47

(6)

Syntaxe

47 Remarques

47 Interfaces vs types d'alias

47 Documentation de l'interface officielle

48 Examples

48 Ajouter des fonctions ou des propriétés à une interface existante

48 Interface de classe

48 Interface d'extension

49 Utilisation d'interfaces pour appliquer des types

49 Interfaces Génériques

50 Déclaration de paramètres génériques sur les interfaces

50 Implémentation d'interfaces génériques

51 Utilisation d'interfaces pour le polymorphisme

52 Implémentation implicite et forme d'objet

53 Chapitre 14: Le débogage

54 Introduction

54 Examples

54 JavaScript avec SourceMaps dans le code Visual Studio

54 JavaScript avec SourceMaps dans WebStorm

54 TypeScript avec ts-node dans Visual Studio Code

55 TypeScript avec ts-node dans WebStorm

56 Chapitre 15: Les fonctions

58 Remarques

58 Examples

58 Paramètres facultatifs et par défaut

58 Types de fonctions

58 Fonction comme paramètre

59 Fonctions avec types d'union

60 Chapitre 16: Mixins

62 Syntaxe

62 Paramètres

62

(7)

Examples

62 Exemple de mixins

62 Chapitre 17: Modules - exportation et importation

64 Examples

64 Bonjour tout le monde

64 Exportation / importation de déclarations

64 Réexporter

65 Chapitre 18: Pourquoi et quand utiliser TypeScript

68 Introduction

68 Remarques

68 Examples

69 sécurité

69 Lisibilité

69 Outillage

70 Chapitre 19: Publier des fichiers de définition TypeScript

71 Examples

71 Inclure le fichier de définition avec la bibliothèque sur npm

71 Chapitre 20: Tableaux

72 Examples

72 Recherche d'objet dans un tableau

72 Utiliser find ()

72 Chapitre 21: Test d'unité

73 Examples

73 alsacien

73 plugin chai-immuable

73 ruban

74 plaisanter (ts-blague)

75 Couverture de code

76 Chapitre 22: tsconfig.json

79 Syntaxe

79 Remarques

79

(8)

Vue d'ensemble

79 Utiliser tsconfig.json

79 Détails

79 Schéma

80 Examples

80 Créer un projet TypeScript avec tsconfig.json

80 compilerOnSave

82 commentaires

82 Configuration pour moins d'erreurs de programmation

82 se préserverConstEnums

83 Chapitre 23: TSLint - Assurer la qualité et la cohérence du code

85 Introduction

85 Examples

85 Configuration de base de tslint.json

85 Configuration pour moins d'erreurs de programmation

85 Utiliser un ensemble de règles prédéfini par défaut

86 Installation et configuration

87 Ensembles de règles TSLint

87 Chapitre 24: Typecript-installation-typescript-and-running-the-typecript-compiler-tsc

88 Introduction

88 Examples

88 Pas.

88 Installation de Typescript et exécution du compilateur typecript.

88 Chapitre 25: Types de base TypeScript

90 Syntaxe

90 Examples

90 Booléen

90 Nombre

90 Chaîne

90 Tableau

90 Enum

91 Tout

91

(9)

Vide

91 Tuple

91 Types dans les arguments de fonction et la valeur de retour. Nombre

92 Types dans les arguments de fonction et la valeur de retour. Chaîne

92 Types littéraux de chaîne

93 Types d'intersection

96 const Enum

97 Chapitre 26: TypeScript avec AngularJS

99 Paramètres

99 Remarques

99 Examples

99 Directif

99 Exemple simple

100 Composant

101 Chapitre 27: TypeScript avec SystemJS

103 Examples

103 Hello World dans le navigateur avec SystemJS

103 Chapitre 28: Utilisation de TypScript avec React (JS & native)

106 Examples

106 Composant ReactJS écrit en Typescript

106 Dactylographier et réagir et webpack

107 Chapitre 29: Utilisation de TypScript avec RequireJS

109 Introduction

109 Examples

109 Exemple HTML utilisant requireJS CDN pour inclure un fichier TypeScript déjà compilé.

109 Exemple avec tsconfig.json à compiler pour afficher le dossier en utilisant le style d'imp

109 Chapitre 30: Utiliser TypeScript avec webpack

110 Examples

110 webpack.config.js

110

(10)

À propos

You can share this PDF with anyone you feel could benefit from it, downloaded the latest version

from: typescript

It is an unofficial and free TypeScript ebook created for educational purposes. All the content is

extracted from Stack Overflow Documentation, which is written by many hardworking individuals at

Stack Overflow. It is neither affiliated with Stack Overflow nor official TypeScript.

The content is released under Creative Commons BY-SA, and the list of contributors to each

chapter are provided in the credits section at the end of this book. Images may be copyright of

their respective owners unless otherwise specified. All trademarks and registered trademarks are

the property of their respective company owners.

Use the content presented in this book at your own risk; it is not guaranteed to be correct nor

accurate, please send your feedback and corrections to info@zzzprojects.com

(11)

Chapitre 1: Démarrer avec TypeScript

Remarques

TypeScript se veut un sur-ensemble de JavaScript qui se transforme en JavaScript. En générant

un code conforme à ECMAScript, TypeScript peut introduire de nouvelles fonctionnalités de

langage tout en conservant la compatibilité avec les moteurs JavaScript existants. ES3, ES5 et

ES6 sont actuellement des cibles prises en charge.

Les types facultatifs sont une caractéristique principale. Les types permettent une vérification

statique dans le but de détecter rapidement les erreurs et peuvent améliorer les outils avec des

fonctionnalités telles que la refactorisation du code.

TypeScript est un langage de programmation open source et multi-plateforme développé par

Microsoft. Le code source est disponible sur GitHub .

Versions

Version

Date de sortie

2.4.1 2017-06-27

2.3.2 2017-04-28

2.3.1 2017-04-25

2.3.0 beta

2017-04-04

2.2.2 2017-03-13

2.2 2017-02-17

2.1.6 2017-02-07

2.2 bêta

2017-02-02

2.1.5 2017-01-05

2.1.4 2016-12-05

2.0.8 2016-11-08

2.0.7 2016-11-03

2.0.6 2016-10-23

2.0.5 2016-09-22

(12)

Version

Date de sortie

2.0 bêta

2016-07-08

1.8.10 2016-04-09

1.8.9 2016-03-16

1.8.5 2016-03-02

1.8.2 2016-02-17

1.7.5 2015-12-14

1,7

2015-11-20

1.6 2015-09-11

1.5.4 2015-07-15

1,5

2015-07-15

1.4 2015-01-13

1.3 2014-10-28

1.1.0.1 2014-09-23

Examples

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 .

(13)

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.

(14)

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;

(15)

}

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.

•

(16)

[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 .

(17)

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

(18)

$ 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

Lire Démarrer avec TypeScript en ligne:

https://riptutorial.com/fr/typescript/topic/764/demarrer-avec-typescript

(19)

Chapitre 2: Comment utiliser une

bibliothèque javascript sans fichier de

définition de type

Introduction

Alors que certaines bibliothèques JavaScript existantes ont des fichiers de définition de type ,

beaucoup ne le font pas.

TypeScript propose quelques modèles pour gérer les déclarations manquantes.

Examples

Déclarer un tout global

Il est parfois plus simple de simplement déclarer un global de type any , en particulier dans les

projets simples.

Si jQuery n’avait pas de déclaration de type ( c’est le cas ), vous pouvez mettre

declare var $: any;

Maintenant , toute utilisation de $ sera tapé any .

Faire un module qui exporte une valeur par défaut

Pour les projets plus compliqués ou dans les cas où vous avez l'intention de taper

progressivement une dépendance, il peut être plus propre de créer un module.

En utilisant JQuery (bien que des typages soient disponibles ) comme exemple:

// place in jquery.d.ts declare let $: any; export default $;

Et puis, dans n'importe quel fichier de votre projet, vous pouvez importer cette définition avec:

// some other .ts file

import $ from "jquery";

Après cette importation, $ sera saisi comme any .

Si la bibliothèque contient plusieurs variables de niveau supérieur, exportez-les et importez-les par

nom à la place:

(20)

// place in jquery.d.ts declare module "jquery" { let $: any;

let jQuery: any;

export { $ }; export { jQuery }; }

Vous pouvez ensuite importer et utiliser les deux noms:

import {$, jQuery} from "jquery";

$.doThing();

jQuery.doOtherThing();

Utiliser un module d'ambiance

Si vous voulez simplement indiquer l' intention d'une importation (afin de ne pas vouloir déclarer

un global) mais que vous ne souhaitez pas avoir de définitions explicites, vous pouvez importer un

module ambient.

// in a declarations file (like declarations.d.ts)

declare module "jquery"; // note that there are no defined exports

Vous pouvez ensuite importer depuis le module ambient.

import {$, jQuery} from "jquery";

Tout ce qui est importé du module déclaré (comme $ et jQuery ) ci-dessus sera de type any

Lire Comment utiliser une bibliothèque javascript sans fichier de définition de type en ligne:

https://riptutorial.com/fr/typescript/topic/8249/comment-utiliser-une-bibliotheque-javascript-sans-fichier-de-definition-de-type

(21)

Chapitre 3: Configurez le projet typecript

pour compiler tous les fichiers en texte

dactylographié.

Introduction

créer votre premier fichier de configuration .tsconfig qui indiquera au compilateur TypeScript

comment traiter vos fichiers .ts

Examples

Configuration du fichier de configuration typographique

Entrez la commande " tsc --init " et appuyez sur Entrée.

• Avant cela, nous devons compiler le fichier ts avec la commande " tsc app.ts " maintenant

tout est défini dans le fichier de configuration ci-dessous automatiquement.

• Maintenant, vous pouvez compiler tous les manuscrits par commande " tsc ". Il créera

automatiquement le fichier ".js" de votre fichier dactylographié.

(22)

Si vous voulez créer un autre texte et appuyez sur la commande "tsc" dans l'invite de

commande ou le fichier javascript du terminal sera automatiquement créé pour le fichier

dactylographié.

• Je vous remercie,

Lire Configurez le projet typecript pour compiler tous les fichiers en texte dactylographié. en ligne:

https://riptutorial.com/fr/typescript/topic/10537/configurez-le-projet-typecript-pour-compiler-tous-

(23)

les-fichiers-en-texte-dactylographie-Chapitre 4: Contrôles Nuls Strict

Examples

Strict null vérifie en action

Par défaut, tous les types de TypeScript autorisent null :

function getId(x: Element) {

return x.id; }

getId(null); // TypeScript does not complain, but this is a runtime error.

TypeScript 2.0 prend en charge les contrôles NULL stricts. Si vous définissez --strictNullChecks

lors de l'exécution de tsc (ou définissez cet indicateur dans votre tsconfig.json ), alors les types

n'autorisent plus null :

function getId(x: Element) { return x.id;

}

getId(null); // error: Argument of type 'null' is not assignable to parameter of type 'Element'.

Vous devez autoriser explicitement les valeurs null :

function getId(x: Element|null) {

return x.id; // error TS2531: Object is possibly 'null'. }

getId(null);

Avec un garde approprié, le type de code vérifie et fonctionne correctement:

function getId(x: Element|null) {

if (x) {

return x.id; // In this branch, x's type is Element } else {

return null; // In this branch, x's type is null. }

}

getId(null);

Assertions non nulles

L'opérateur d'assertion non nulle, ! , vous permet d'affirmer qu'une expression n'est pas null ou

undefined lorsque le compilateur TypeScript ne peut en déduire automatiquement:

type ListNode = { data: number; next?: ListNode; };

(24)

if (node.next === undefined) { node.next = {data: 0}; }

}

function setNextValue(node: ListNode, value: number) { addNext(node);

// Even though we know `node.next` is defined because we just called `addNext`, // TypeScript isn't able to infer this in the line of code below:

// node.next.data = value;

// So, we can use the non-null assertion operator, !,

// to assert that node.next isn't undefined and silence the compiler warning node.next!.data = value;

}

Lire Contrôles Nuls Strict en ligne:

https://riptutorial.com/fr/typescript/topic/1727/controles-nuls-strict

(25)

Chapitre 5: Décorateur de classe

Paramètres

Paramètre

Détails

cible

La classe en cours de décoration

Examples

Décorateur de classe de base

Un décorateur de classe est juste une fonction qui prend la classe comme seul argument et la

retourne après avoir fait quelque chose avec:

function log<T>(target: T) {

// Do something with target console.log(target);

// Return target return target;

}

Nous pouvons ensuite appliquer le décorateur de classe à une classe:

@log

class Person {

private _name: string;

public constructor(name: string) { this._name = name; } public greet() { return this._name; } }

Générer des métadonnées en utilisant un décorateur de classe

Cette fois, nous allons déclarer un décorateur de classe qui ajoutera des métadonnées à une

classe lorsque nous lui avons appliqué:

function addMetadata(target: any) {

// Add some metadata

target.__customMetadata = { someKey: "someValue" };

(26)

// Return target return target;

}

Nous pouvons alors appliquer le décorateur de classe:

@addMetadata

class Person {

function getMetadataFromClass(target: any) { return target.__customMetadata;

}

console.log(getMetadataFromClass(Person));

Le décorateur est appliqué lorsque la classe n'est pas déclarée lorsque nous créons des

instances de la classe. Cela signifie que les métadonnées sont partagées entre toutes les

instances d'une classe:

function getMetadataFromInstance(target: any) { return target.constructor.__customMetadata; }

let person1 = new Person("John"); let person2 = new Person("Lisa");

console.log(getMetadataFromInstance(person1)); console.log(getMetadataFromInstance(person2));

Passer des arguments à un décorateur de classe

Nous pouvons envelopper un décorateur de classe avec une autre fonction pour permettre la

personnalisation:

function addMetadata(metadata: any) { return function log(target: any) {

// Add metadata target.__customMetadata = metadata; // Return target return target; } }

(27)

addMetadata prend quelques arguments utilisés comme configuration, puis retourne une fonction

sans nom qui est le décorateur réel. Dans le décorateur, nous pouvons accéder aux arguments

car il y a une fermeture en place.

On peut alors invoquer le décorateur en passant des valeurs de configuration:

@addMetadata({ guid: "417c6ec7-ec05-4954-a3c6-73a0d7f9f5bf" })

class Person {

Nous pouvons utiliser la fonction suivante pour accéder aux métadonnées générées:

function getMetadataFromClass(target: any) {

return target.__customMetadata; }

console.log(getMetadataFromInstance(Person));

Si tout s'est bien passé, la console devrait afficher:

{ guid: "417c6ec7-ec05-4954-a3c6-73a0d7f9f5bf" }

Lire Décorateur de classe en ligne:

https://riptutorial.com/fr/typescript/topic/4592/decorateur-de-classe

(28)

Chapitre 6: Des classes

Introduction

TypeScript, comme ECMA Script 6, prend en charge la programmation orientée objet à l'aide de

classes. Cela contraste avec les anciennes versions de JavaScript, qui ne supportaient que la

chaîne d’héritage basée sur des prototypes.

Le support de classe dans TypeScript est similaire à celui de langages comme Java et C #, dans

la mesure où les classes peuvent hériter d'autres classes, tandis que les objets sont instanciés en

tant qu'occurrences de classe.

Aussi similaires à ces langages, les classes TypeScript peuvent implémenter des interfaces ou

utiliser des génériques.

Examples

Classe simple

class Car {

public position: number = 0; private speed: number = 42;

move() {

this.position += this.speed; }

}

Dans cet exemple, nous déclarons une classe simple Car . La classe a trois membres: une speed

propriété privée, une position propriété publique et un move méthode publique. Notez que chaque

membre est public par défaut. C'est pourquoi move() est public, même si nous n'avons pas utilisé

le mot-clé public .

var car = new Car(); // create an instance of Car car.move(); // call a method

console.log(car.position); // access a public property

Héritage de base

class Car {

public position: number = 0; protected speed: number = 42;

move() {

(29)

class SelfDrivingCar extends Car {

move() {

// start moving around :-) super.move();

super.move(); }

}

Cet exemple montre comment créer une sous-classe très simple de la classe Car utilisant le mot

extends clé extend. La classe SelfDrivingCar remplace la méthode move() et utilise l'implémentation

de la classe de base en utilisant super .

Constructeurs

Dans cet exemple, nous utilisons le constructor pour déclarer une position propriété publique et

une speed propriété protégée dans la classe de base. Ces propriétés sont appelées propriétés de

paramètre . Ils nous permettent de déclarer un paramètre constructeur et un membre au même

endroit.

L'un des meilleurs avantages de TypeScript est l'affectation automatique des paramètres du

constructeur à la propriété concernée.

class Car {

public position: number; protected speed: number;

constructor(position: number, speed: number) { this.position = position; this.speed = speed; } move() { this.position += this.speed; } }

Tout ce code peut être repris dans un seul constructeur:

class Car {

constructor(public position: number, protected speed: number) {}

move() {

}

Et les deux seront transférés de TypeScript (temps de conception et de compilation) en JavaScript

avec le même résultat, mais en écrivant beaucoup moins de code:

var Car = (function () {

function Car(position, speed) { this.position = position;

(30)

this.speed = speed; } Car.prototype.move = function () { this.position += this.speed; }; return Car; }());

Les constructeurs de classes dérivées doivent appeler le constructeur de classe de base avec

super() .

class SelfDrivingCar extends Car {

constructor(startAutoPilot: boolean) { super(0, 42); if (startAutoPilot) { this.move(); } } }

let car = new SelfDrivingCar(true);

console.log(car.position); // access the public property position

Les accesseurs

Dans cet exemple, nous modifions l'exemple "Simple class" pour autoriser l'accès à la propriété

speed . Les accesseurs de typecript nous permettent d’ajouter du code supplémentaire dans les

getters ou les setters.

class Car {

public position: number = 0; private _speed: number = 42; private _MAX_SPEED = 100

move() {

this.position += this._speed; }

get speed(): number { return this._speed; }

set speed(value: number) {

this._speed = Math.min(value, this._MAX_SPEED); }

}

let car = new Car(); car.speed = 120;

console.log(car.speed); // 100

Classes abstraites

abstract class Machine {

(31)

}

// An abstract class can define methods of it's own, or... summary(): string {

return `${this.manufacturer} makes this machine.`; }

// Require inheriting classes to implement methods abstract moreInfo(): string;

}

class Car extends Machine {

constructor(manufacturer: string, public position: number, protected speed: number) { super(manufacturer); } move() { this.position += this.speed; } moreInfo() {

return `This is a car located at ${this.position} and going ${this.speed}mph!`; }

}

let myCar = new Car("Konda", 10, 70); myCar.move(); // position is now 80

console.log(myCar.summary()); // prints "Konda makes this machine."

console.log(myCar.moreInfo()); // prints "This is a car located at 80 and going 70mph!"

Les classes abstraites sont des classes de base à partir desquelles d'autres classes peuvent

s'étendre. Ils ne peuvent pas être instanciés eux-mêmes (c.-à-d. Que vous ne pouvez pas faire

de new Machine("Konda") ).

Les deux caractéristiques clés d'une classe abstraite dans Typescript sont:

Ils peuvent mettre en œuvre leurs propres méthodes.

1. Ils peuvent définir des méthodes que les classes héritées doivent implémenter.

2. Pour cette raison, les classes abstraites peuvent être considérées comme une combinaison

d'une interface et d'une classe .

Singe patch une fonction dans une classe existante

Parfois, il est utile de pouvoir étendre une classe avec de nouvelles fonctions. Par exemple,

supposons qu'une chaîne soit convertie en une chaîne de casse camel. Nous devons donc dire à

TypeScript, que String contient une fonction appelée toCamelCase , qui renvoie une string .

interface String {

toCamelCase(): string; }

(32)

String.prototype.toCamelCase = function() : string { return this.replace(/[^a-z ]/ig, '')

.replace(/(?:^\w|[A-Z]|\b\w|\s+)/g, (match: any, index: number) => {

return +match === 0 ? "" : match[index === 0 ? 'toLowerCase' : 'toUpperCase'](); });

}

Si cette extension de String est chargée, elle est utilisable comme ceci:

"This is an example".toCamelCase(); // => "thisIsAnExample"

Transpilation

Étant donné une classe SomeClass , voyons comment le TypeScript est transposé en JavaScript.

TypeScript source

class SomeClass {

public static SomeStaticValue: string = "hello"; public someMemberValue: number = 15;

private somePrivateValue: boolean = false;

constructor () {

SomeClass.SomeStaticValue = SomeClass.getGoodbye(); this.someMemberValue = this.getFortyTwo();

this.somePrivateValue = this.getTrue(); }

public static getGoodbye(): string { return "goodbye!";

}

public getFortyTwo(): number { return 42;

}

private getTrue(): boolean { return true;

}

Source JavaScript

Lorsque transpiled en utilisant TypeScript v2.2.2 , la sortie est comme v2.2.2 :

var SomeClass = (function () {

function SomeClass() {

this.someMemberValue = 15; this.somePrivateValue = false;

(33)

this.someMemberValue = this.getFortyTwo(); this.somePrivateValue = this.getTrue(); } SomeClass.getGoodbye = function () { return "goodbye!"; }; SomeClass.prototype.getFortyTwo = function () { return 42; }; SomeClass.prototype.getTrue = function () { return true; }; return SomeClass; }()); SomeClass.SomeStaticValue = "hello";

Observations

La modification du prototype de la classe est enveloppée dans un IIFE .

• Les variables membres sont définies dans la function classe principale.

• Les propriétés statiques sont ajoutées directement à l'objet de classe, tandis que les

propriétés d'instance sont ajoutées au prototype.

•

(34)

Chapitre 7: Enums

Examples

Comment obtenir toutes les valeurs énumérées

enum SomeEnum { A, B }

let enumValues:Array<string>= [];

for(let value in SomeEnum) {

if(typeof SomeEnum[value] === 'number') { enumValues.push(value); } } enumValues.forEach(v=> console.log(v)) //A //B

Enums avec des valeurs explicites

Par défaut, toutes les valeurs enum sont résolues en nombres. Disons si vous avez quelque chose

comme

enum MimeType { JPEG, PNG, PDF }

la valeur réelle derrière, par exemple, MimeType.PDF sera 2 .

Mais parfois, il est important que l'énumération se résout à un autre type. Par exemple, vous

recevez la valeur de backend / frontend / un autre système qui est définitivement une chaîne. Cela

pourrait être une douleur, mais heureusement il y a cette méthode:

enum MimeType {

JPEG = <any>'image/jpeg', PNG = <any>'image/png', PDF = <any>'application/pdf' }

Cela résout le MimeType.PDF à l' application/pdf .

Depuis TypeScript 2.4, il est possible de déclarer des énumérations de chaînes :

enum MimeType {

JPEG = 'image/jpeg', PNG = 'image/png',

(35)

PDF = 'application/pdf', }

Vous pouvez explicitement fournir des valeurs numériques en utilisant la même méthode

enum MyType {

Value = 3, ValueEx = 30, ValueEx2 = 300 }

Les types plus fantaisistes fonctionnent également, puisque les énumérations non-const sont des

objets réels à l'exécution, par exemple

enum FancyType { OneArr = <any>[1], TwoArr = <any>[2, 2], ThreeArr = <any>[3, 3, 3] }

devient

var FancyType; (function (FancyType) { FancyType[FancyType["OneArr"] = [1]] = "OneArr"; FancyType[FancyType["TwoArr"] = [2, 2]] = "TwoArr"; FancyType[FancyType["ThreeArr"] = [3, 3, 3]] = "ThreeArr"; })(FancyType || (FancyType = {}));

Mise en œuvre personnalisée: étend pour les énumérations

Parfois, il est nécessaire d'implémenter Enum seul. Par exemple, il n'y a pas de moyen clair

d'étendre d'autres énumérations. L'implémentation personnalisée permet ceci:

class Enum {

constructor(protected value: string) {}

public toString() {

return String(this.value); }

public is(value: Enum | string) { return this.value = value.toString(); }

}

class SourceEnum extends Enum {

public static value1 = new SourceEnum('value1'); public static value2 = new SourceEnum('value2'); }

class TestEnum extends SourceEnum {

public static value3 = new TestEnum('value3'); public static value4 = new TestEnum('value4');

(36)

}

function check(test: TestEnum) { return test === TestEnum.value2; }

let value1 = TestEnum.value1;

console.log(value1 + 'hello');

console.log(value1.toString() === 'value1'); console.log(value1.is('value1'));

console.log(!TestEnum.value3.is(TestEnum.value3)); console.log(check(TestEnum.value2));

// this works but perhaps your TSLint would complain // attention! does not work with ===

// use .is() instead

console.log(TestEnum.value1 == <any>'value1');

Extension des énumérations sans implémentation d'énumération

personnalisée

enum SourceEnum { value1 = <any>'value1', value2 = <any>'value2' } enum AdditionToSourceEnum { value3 = <any>'value3', value4 = <any>'value4' }

// we need this type for TypeScript to resolve the types correctly type TestEnumType = SourceEnum | AdditionToSourceEnum;

// and we need this value "instance" to use values

let TestEnum = Object.assign({}, SourceEnum, AdditionToSourceEnum); // also works fine the TypeScript 2 feature

// let TestEnum = { ...SourceEnum, ...AdditionToSourceEnum };

function check(test: TestEnumType) { return test === TestEnum.value2; }

console.log(TestEnum.value1);

console.log(TestEnum.value2 === <any>'value2'); console.log(check(TestEnum.value2));

console.log(check(TestEnum.value3));

(37)

Chapitre 8: Exemples de base de texte

Remarques

Ceci est un exemple de base qui étend une classe de voiture générique et définit une méthode de

description de voiture.

Trouvez plus d'exemples TypeScript ici - Exemples TypeScript GitRepo

Examples

1 exemple d'héritage de classe de base utilisant extend et super keyword

Une classe de voiture générique a des propriétés de voiture et une méthode de description

class Car{ name:string; engineCapacity:string; constructor(name:string,engineCapacity:string){ this.name = name; this.engineCapacity = engineCapacity; } describeCar(){

console.log(`${this.name} car comes with ${this.engineCapacity} displacement`); }

}

new Car("maruti ciaz","1500cc").describeCar();

HondaCar étend la classe de voiture générique existante et ajoute une nouvelle propriété.

class HondaCar extends Car{

seatingCapacity:number; constructor(name:string,engineCapacity:string,seatingCapacity:number){ super(name,engineCapacity); this.seatingCapacity=seatingCapacity; } describeHondaCar(){ super.describeCar();

console.log(`this cars comes with seating capacity of ${this.seatingCapacity}`); }

}

new HondaCar("honda jazz","1200cc",4).describeHondaCar();

2 exemple de variable de classe statique - nombre de fois que la méthode est

appelée

(38)

ici countInstance est une variable de classe statique

class StaticTest{

static countInstance : number= 0; constructor(){ StaticTest.countInstance++; } } new StaticTest(); new StaticTest(); console.log(StaticTest.countInstance);

Lire Exemples de base de texte en ligne:

https://riptutorial.com/fr/typescript/topic/7721/exemples-de-base-de-texte

(39)

Chapitre 9: Gardes de type définis par

l'utilisateur

Syntaxe

typeof x === "nom du type"

• x instanceof TypeName

• function (foo: any): foo est TypeName {/ * code retournant booléen * /}

• Remarques

L'utilisation d'annotations de type dans TypeScript contraint les types possibles avec lesquels

votre code devra traiter, mais il est toujours nécessaire de prendre des chemins de code différents

en fonction du type d'exécution d'une variable.

Les gardes de type vous permettent d'écrire du code discriminant en fonction du type d'exécution

d'une variable, tout en restant fortement typé et en évitant les conversions (également appelées

assertions de type).

Examples

Utiliser instanceof

instanceof nécessite que la variable soit de type any .

Ce code ( essayez-le ):

class Pet { }

class Dog extends Pet { bark() {

console.log("woof"); }

}

class Cat extends Pet { purr() {

console.log("meow"); }

}

function example(foo: any) { if (foo instanceof Dog) {

// foo is type Dog in this block foo.bark();

}

if (foo instanceof Cat) {

// foo is type Cat in this block foo.purr();

(40)

} } example(new Dog()); example(new Cat());

estampes

woof meom

à la console.

En utilisant typeof

typeof est utilisé lorsque vous devez distinguer les types number , string , boolean et symbol . Les

autres constantes de chaîne ne seront pas erronées, mais ne seront pas non plus utilisées pour

restreindre les types.

Contrairement à instanceof , typeof fonctionnera avec une variable de tout type. Dans l'exemple

ci-dessous, foo peut être saisi en tant que number | string sans issue.

Ce code ( essayez-le ):

function example(foo: any) { if (typeof foo === "number") {

// foo is type number in this block console.log(foo + 100);

}

if (typeof foo === "string") {

// fooi is type string in this block console.log("not a number: " + foo); } } example(23); example("foo");

estampes

123

not a number: foo

Fonctions de protection de type

Vous pouvez déclarer des fonctions qui servent de gardes de type en utilisant la logique de votre

choix.

Ils prennent la forme:

(41)

// body that returns boolean }

Si la fonction renvoie true, TypeScript restreindra le type à DesiredType dans tout bloc protégé par

un appel à la fonction.

Par exemple ( essayez-le ):

function isString(test: any): test is string { return typeof test === "string";

}

function example(foo: any) { if (isString(foo)) {

// foo is type as a string in this block console.log("it's a string: " + foo); } else {

// foo is type any in this block

console.log("don't know what this is! [" + foo + "]"); }

}

example("hello world"); // prints "it's a string: hello world"

example({ something: "else" }); // prints "don't know what this is! [[object Object]]"

Le prédicat de type de fonction d'un garde (le foo is Bar dans la position du type de retour de

fonction) est utilisé au moment de la compilation pour restreindre les types, le corps de la fonction

est utilisé lors de l'exécution. Le prédicat de type et la fonction doivent être compatibles ou votre

code ne fonctionnera pas.

Les fonctions de type guard n'ont pas à utiliser typeof ou instanceof , elles peuvent utiliser une

logique plus compliquée.

Par exemple, ce code détermine si vous avez un objet jQuery en vérifiant sa chaîne de version.

function isJQuery(foo): foo is JQuery {

// test for jQuery's version string return foo.jquery !== undefined; }

function example(foo) { if (isJQuery(foo)) {

// foo is typed JQuery here foo.eq(0);

} }

Lire Gardes de type définis par l'utilisateur en ligne:

(42)

Chapitre 10: Génériques

Syntaxe

Les types génériques déclarés dans les crochets triangulaires: <T>

• La contrainte des types génériques se fait avec le mot-clé extend: <T extends Car>

• Remarques

Les paramètres génériques ne sont pas disponibles à l'exécution, ils ne sont que pour la

compilation. Cela signifie que vous ne pouvez pas faire quelque chose comme ça:

class Executor<T, U> {

public execute(executable: T): void {

if (T instanceof Executable1) { // Compilation error ...

} else if (U instanceof Executable2){ // Compilation error ...

} } }

Cependant, les informations sur les classes sont toujours conservées. Vous pouvez donc toujours

tester le type d'une variable, car vous avez toujours été capable de:

class Executor<T, U> {

public execute(executable: T): void {

if (executable instanceof Executable1) { ...

} else if (executable instanceof Executable2){ ...

} // But in this method, since there is no parameter of type `U` it is non-sensical to ask about U's "type"

} }

Examples

Interfaces Génériques

Déclarer une interface générique

interface IResult<T> { wasSuccessfull: boolean; error: T;

(43)

var result: IResult<string> = .... var error: string = result.error;

Interface générique avec plusieurs

paramètres de type

interface IRunnable<T, U> { run(input: T): U; }

var runnable: IRunnable<string, number> = ... var input: string;

var result: number = runnable.run(input);

Implémenter une interface générique

interface IResult<T>{

wasSuccessfull: boolean; error: T;

clone(): IResult<T>; }

Implémentez-le avec la classe générique:

class Result<T> implements IResult<T> {

constructor(public result: boolean, public error: T) { }

public clone(): IResult<T> {

return new Result<T>(this.result, this.error); }

}

Implémentez-le avec une classe non générique:

class StringResult implements IResult<string> {

constructor(public result: boolean, public error: string) { }

public clone(): IResult<string> {

return new StringResult(this.result, this.error); }

}

Classe générique

class Result<T> {

(44)

constructor(public wasSuccessful: boolean, public error: T) { }

public clone(): Result<T> { ...

} }

let r1 = new Result(false, 'error: 42'); // Compiler infers T to string let r2 = new Result(false, 42); // Compiler infers T to number let r3 = new Result<string>(true, null); // Explicitly set T to string

let r4 = new Result<string>(true, 4); // Compilation error because 4 is not a string

Contraintes génériques

Contrainte simple:

interface IRunnable { run(): void; }

interface IRunner<T extends IRunnable> { runSafe(runnable: T): void;

}

Contrainte plus complexe:

interface IRunnble<U> { run(): U;

}

interface IRunner<T extends IRunnable<U>, U> { runSafe(runnable: T): U;

}

Encore plus complexe:

interface IRunnble<V> { run(parameter: U): V; }

interface IRunner<T extends IRunnable<U, V>, U, V> { runSafe(runnable: T, parameter: U): V;

}

Contraintes de type en ligne:

interface IRunnable<T extends { run(): void }> { runSafe(runnable: T): void;

}

Fonctions génériques

Dans les interfaces:

(45)

interface IRunner {

runSafe<T extends IRunnable>(runnable: T): void; }

En cours:

class Runner implements IRunner {

public runSafe<T extends IRunnable>(runnable: T): void { try { runnable.run(); } catch(e) { } } }

Fonctions simples:

function runSafe<T extends IRunnable>(runnable: T): void { try {

runnable.run(); } catch(e) {

} }

Utilisation de classes et de fonctions génériques:

Créez une instance de classe générique:

var stringRunnable = new Runnable<string>();

Exécuter la fonction générique:

function runSafe<T extends Runnable<U>, U>(runnable: T);

// Specify the generic types:

runSafe<Runnable<string>, string>(stringRunnable);

// Let typescript figure the generic types by himself: runSafe(stringRunnable);

Tapez les paramètres en tant que contraintes

Avec TypeScript 1.8, il devient possible pour une contrainte de paramètre de type de faire

référence à des paramètres de type de la même liste de paramètres de type. Auparavant, c'était

une erreur.

function assign<T extends U, U>(target: T, source: U): T { for (let id in source) {

target[id] = source[id]; }

(46)

return target; }

let x = { a: 1, b: 2, c: 3, d: 4 }; assign(x, { b: 10, d: 20 });

assign(x, { e: 0 }); // Error

(47)

Chapitre 11: Importer des bibliothèques

externes

Syntaxe

import {component} from 'libName'; // Will import the class "component"

•

import {component as c} from 'libName'; // Will import the class "component" into a "c" object

•

import component from 'libname'; // Will import the default export from libName

•

import * as lib from 'libName'; // Will import everything from libName into a "lib" object

•

import lib = require('libName'); // Will import everything from libName into a "lib" object

•

const lib: any = require('libName'); // Will import everything from libName into a "lib" object

•

import 'libName'; // Will import libName module for its side effects only

• Remarques

Il peut sembler que la syntaxe

import * as lib from 'libName';

et

import lib = require('libName');

sont la même chose, mais ils ne sont pas!

Considérons que nous voulons importer une classe Personne exportée avec export = syntax

spécifique à TypeScript:

class Person { ...

}

export = Person;

Dans ce cas, il n'est pas possible de l'importer avec la syntaxe es6 (nous aurions une erreur à la

compilation), vous devez utiliser la syntaxe import = spécifique à TypeScript.

import * as Person from 'Person'; //compile error import Person = require('Person'); //OK

L'inverse est vrai: les modules classiques peuvent être importés avec la deuxième syntaxe, de

sorte que, d'une certaine manière, la dernière syntaxe est plus puissante puisqu'elle est capable

d'importer toutes les exportations.

(48)

Examples

Importer un module à partir de npm

Si vous avez un fichier de définition de type (d.ts) pour le module, vous pouvez utiliser une

instruction d' import .

import _ = require('lodash');

Si vous ne disposez pas d'un fichier de définition pour le module, TypeScript générera une erreur

lors de la compilation car il ne peut pas trouver le module que vous essayez d'importer.

Dans ce cas, vous pouvez importer le module avec la durée normale require fonction. Cela le

retourne comme any type, cependant.

// The _ variable is of type any, so TypeScript will not perform any type checking. const _: any = require('lodash');

À partir de TypeScript 2.0, vous pouvez également utiliser une déclaration abrégée de module

d'ambiance afin d'indiquer à TypeScript qu'un module existe lorsque vous n'avez pas de fichier de

définition de type pour le module. TypeScript ne sera cependant pas en mesure de fournir une

vérification de type significative dans ce cas.

declare module "lodash";

// you can now import from lodash in any way you wish: import { flatten } from "lodash";

import * as _ from "lodash";

A partir de TypeScript 2.1, les règles ont été encore assouplies. Maintenant, tant qu'un module

existe dans votre répertoire node_modules , TypeScript vous permettra de l'importer, même sans

déclaration de module. (Notez que si vous utilisez l'option de compilation noImplicitAny le

--noImplicitAny ci-dessous générera toujours un avertissement.)

// Will work if `node_modules/someModule/index.js` exists, or if `node_modules/someModule/package.json` has a valid "main" entry point import { foo } from "someModule";

Recherche de fichiers de définition

pour dactylographier 2.x:

les définitions de DefinitelyTyped sont disponibles via le package @types npm

npm i --save lodash

npm i --save-dev @types/lodash

(49)

l'ancienne méthode:

pour typecript 1.x:

Typings est un package npm qui peut installer automatiquement des fichiers de définition de type

dans un projet local. Je vous recommande de lire le quickstart .

npm install -global typings

Maintenant, nous avons accès aux types de cli.

La première étape consiste à rechercher le package utilisé par le projet.

typings search lodash

NAME SOURCE HOMEPAGE DESCRIPTION VERSIONS UPDATED lodash dt http://lodash.com/ 2 2016-07-20T00:13:09.000Z lodash global 1 2016-07-01T20:51:07.000Z lodash npm https://www.npmjs.com/package/lodash 1 2016-07-01T20:51:07.000Z

1. Ensuite, décidez de la source à installer. J'utilise dt qui signifie DefinitelyTyped un repo

GitHub où la communauté peut éditer les typages, c'est aussi normalement le plus

récemment mis à jour.

2. Installer les fichiers de saisie

typings install dt~lodash --global --save

3. Décomposons la dernière commande. Nous installons la version DefinitelyTyped de lodash en

tant que fichier de typage global dans notre projet et l'enregistrons en tant que dépendance dans

le typings.json . Maintenant, où que nous importions lodash, typecript chargera le fichier typage

lodash.

Si nous voulons installer des typages qui ne seront utilisés que pour l'environnement de

développement, nous pouvons fournir le drapeau --save-dev :

typings install chai --save-dev

4. Utiliser des bibliothèques externes globales sans typage

Bien que les modules soient idéaux, si la bibliothèque que vous utilisez est référencée par une

variable globale (telle que $ ou _), car elle est chargée par une balise de script , vous pouvez

créer une déclaration ambiante pour y faire référence:

declare const _: any;

(50)

Avec les versions 2.x de typescript, les types sont maintenant disponibles dans le dépôt npm

@types . Celles-ci sont automatiquement résolues par le compilateur typecript et sont beaucoup

plus simples à utiliser.

Pour installer une définition de type, installez-la simplement en tant que dépendance de dev dans

vos projets package.json

par exemple

npm i -S lodash npm i -D @types/lodash

après l'installation, vous utilisez simplement le module comme avant

import * as _ from 'lodash'

Lire Importer des bibliothèques externes en ligne:

(51)

Chapitre 12: Intégration avec les outils de

construction

Remarques

Pour plus d'informations, vous pouvez aller sur la page Web officielle dactylographiée intégrant

des outils de construction

Examples

Installer et configurer webpack + loaders

Installation

npm install -D webpack typescript ts-loader

webpack.config.js

module.exports = { entry: { app: ['./src/'], }, output: { path: __dirname, filename: './dist/[name].js', }, resolve: { extensions: ['', '.js', '.ts'], }, module: { loaders: [{

test: /\.ts(x)$/, loaders: ['ts-loader'], exclude: /node_modules/ }], } };

Naviguer

Installer

npm install tsify

(52)

commande

browserify main.ts -p [ tsify --noImplicitAny ] > bundle.js

Utiliser l'API

var browserify = require("browserify"); var tsify = require("tsify");

browserify() .add("main.ts")

.plugin("tsify", { noImplicitAny: true }) .bundle()

.pipe(process.stdout);

Plus de détails: smrq / tsify

Grognement

Installer

npm install grunt-ts

Basic Gruntfile.js

module.exports = function(grunt) { grunt.initConfig({ ts: { default : { src: ["**/*.ts", "!node_modules/**/*.ts"] } } }); grunt.loadNpmTasks("grunt-ts"); grunt.registerTask("default", ["ts"]); };