Share
Fin 2012, Microsoft a introduit TypeScript, un sur-ensemble typé pour JavaScript qui se compile en JavaScript. TypeScript se concentre sur la fourniture d'outils utiles pour les applications à grande échelle en implémentant des fonctionnalités telles que des classes, des annotations de type, l'héritage, des modules et bien plus encore! Dans ce tutoriel, nous allons commencer avec TypeScript, en utilisant des exemples de code simples et concassés, en les compilant dans JavaScript et en affichant les résultats instantanés dans un navigateur..
Les fonctionnalités TypeScript ne sont appliquées qu'à la compilation.
Vous configurerez votre machine en fonction de votre plate-forme et de vos besoins spécifiques. Les utilisateurs Windows et Visual Studio peuvent simplement télécharger le plugin Visual Studio. Si vous utilisez Windows et que vous n'avez pas Visual Studio, essayez Visual Studio Express pour Web. L’expérience TypeScript dans Visual Studio est actuellement supérieure à celle d’autres éditeurs de code..
Si vous utilisez une autre plate-forme (ou si vous ne souhaitez pas utiliser Visual Studio), vous avez simplement besoin d'un éditeur de texte, d'un navigateur et du package TypeScript npm pour utiliser TypeScript. Suivez ces instructions d'installation:
$ curl http://npmjs.org/install.sh | sh $ npm --version 1.1.70
$ npm install -g typescript $ npm afficher la version dactylographiée npm http GET https://registry.npmjs.org/typescript npm http 304 https://registry.npmjs.org/typescript 0.8.1-1
C'est tout; nous sommes prêts à faire un simple "Bonjour le monde"application dans TypeScript!
TypeScript est un sur-ensemble d'Ecmascript 5 (ES5) et intègre les fonctionnalités proposées pour ES6. Pour cette raison, tout programme JavaScript est déjà un programme TypeScript. Le compilateur TypeScript effectue des transformations de fichiers locaux sur les programmes TypeScript. Par conséquent, la sortie JavaScript finale correspond étroitement à l’entrée TypeScript..
Tout d'abord, nous allons créer une base index.html fichier et référence un fichier de script externe:
Apprentissage de TypeScript
Ceci est une simple application "Hello World"; alors, créons un fichier nommé bonjour.ts. le * .ts extension désigne un fichier TypeScript. Ajoutez le code suivant à bonjour.ts:
Accentsconagua
alert ('bonjour le monde dans TypeScript!'); Ensuite, ouvrez l'interface de ligne de commande, naviguez jusqu'au dossier contenant bonjour.ts, et exécutez le compilateur TypeScript avec la commande suivante:
tsc hello.ts
le tsc La commande est le compilateur TypeScript, et elle génère immédiatement un nouveau fichier appelé bonjour.js. Notre application TypeScript n’utilise aucune syntaxe spécifique à TypeScript, nous voyons donc le même code JavaScript exact dans bonjour.js que nous avons écrit dans bonjour.ts.
Génial! Nous pouvons maintenant explorer les fonctionnalités de TypeScript et voir comment cela peut nous aider à maintenir et à créer des applications JavaScript à grande échelle..
Les annotations de type sont une fonctionnalité facultative, qui nous permet de vérifier et d'exprimer notre intention dans les programmes que nous écrivons. Créons un simple surface() fonction dans un nouveau fichier TypeScript, appelé type.ts
zone de fonction (forme: chaîne, largeur: nombre, hauteur: nombre) var zone = largeur * hauteur; return "Je suis un" + forme + "avec une surface de" + surface + "cm au carré."; document.body.innerHTML = area ("rectangle", 30, 15); Ensuite, changez la source du script dans index.html à type.js et exécutez le compilateur TypeScript avec tsc type.ts. Actualisez la page dans le navigateur et vous devriez voir ce qui suit:
Comme indiqué dans le code précédent, les annotations de type sont exprimées dans les paramètres de fonction; ils indiquent les types de valeurs que vous pouvez transmettre à la fonction. Par exemple, le forme paramètre est désigné comme une valeur de chaîne, et largeur et la taille sont des valeurs numériques.
Les annotations de types et d'autres fonctionnalités TypeScript ne sont appliquées qu'au moment de la compilation. Si vous passez d'autres types de valeurs à ces paramètres, le compilateur vous donnera une erreur lors de la compilation. Ce comportement est extrêmement utile lors de la création d'applications à grande échelle. Par exemple, passons volontairement une valeur de chaîne pour le largeur paramètre:
zone de fonction (forme: chaîne, largeur: nombre, hauteur: nombre) var zone = largeur * hauteur; return "Je suis un" + forme + "avec une surface de" + surface + "cm au carré."; document.body.innerHTML = area ("rectangle", "largeur", 15); // mauvais type de largeur Nous savons que cela aboutit à un résultat indésirable et la compilation du fichier nous alerte du problème avec l'erreur suivante:
$ tsc type.ts type.ts (6,26): Les paramètres fournis ne correspondent à aucune signature de la cible de l'appel
Notez que malgré cette erreur, le compilateur a généré le type.js fichier. L'erreur n'empêche pas le compilateur TypeScript de générer le code JavaScript correspondant, mais le compilateur nous avertit des problèmes potentiels. Nous avons l'intention largeur être un nombre; passer quoi que ce soit d'autre entraîne un comportement indésirable dans notre code. Les autres annotations de type incluent bool ou même tout.
Développons notre exemple pour inclure une interface décrivant plus en détail une forme en tant qu’objet avec une option. Couleur propriété. Créez un nouveau fichier appelé interface.ts, et modifier la source du script dans index.html inclure interface.js. Tapez le code suivant dans interface.ts:
interface Shape name: string; largeur: nombre; hauteur: nombre; couleur?: chaîne; zone de fonction (forme: forme) var zone = forme.paseur * forme.height; retour "Je suis" + forme.nom + "avec zone" + zone + "cm au carré"; console.log (area (name: "rectangle", largeur: 30, hauteur: 15)); console.log (zone (nom: "carré", largeur: 30, hauteur: 30, couleur: "bleu"));
Les interfaces sont des noms donnés aux types d'objets. Nous pouvons non seulement déclarer une interface, mais aussi l'utiliser comme une annotation de type.
Compilation interface.js ne provoque aucune erreur. Pour évoquer une erreur, ajoutons une autre ligne de code à interface.js avec une forme qui n'a pas de propriété de nom et affiche le résultat dans la console du navigateur. Ajouter cette ligne à interface.js:
console.log (zone (width: 30, height: 15));
Maintenant, compilez le code avec tsc interface.js. Vous recevrez une erreur, mais ne vous inquiétez pas pour le moment. Actualisez votre navigateur et regardez la console. Vous verrez quelque chose de similaire à la capture d'écran suivante:
Voyons maintenant l'erreur. Il est:
interface.ts (26,13): les paramètres fournis ne correspondent à aucune signature de la cible de l'appel: impossible d'appliquer le type 'Shape' à l'argument 1, qui est du type 'width: number; hauteur: nombre; '
Nous voyons cette erreur parce que l'objet est passé à surface() n'est pas conforme à la Forme interface; il a besoin d'une propriété de nom pour le faire.
Comprendre la portée de la ce Le mot clé est complexe et TypeScript facilite un peu les choses en prenant en charge les expressions de fonction de flèche, une nouvelle fonctionnalité en cours de discussion pour ECMAScript 6. Les fonctions de flèche préservent la valeur de ce, ce qui rend beaucoup plus facile d'écrire et d'utiliser des fonctions de rappel. Considérons le code suivant:
var shape = name: "rectangle", popup: function () console.log ('Ce popup intérieur ():' + this.name); setTimeout (function () console.log ('Ceci à l'intérieur de setTimeout ():' + this.name); console.log ("Je suis" + this.name + "!");, 3000); ; shape.popup (); le Ce nom la ligne sept sera clairement vide, comme indiqué dans la console du navigateur:
Nous pouvons facilement résoudre ce problème en utilisant la fonction de flèche TypeScript. Il suffit de remplacer une fonction() avec () =>.
var shape = name: "rectangle", popup: function () console.log ('Ce popup intérieur ():' + this.name); setTimeout (() => console.log ('Ceci à l'intérieur de setTimeout ():' + this.name); console.log ("Je suis" + this.name + "!");, 3000); ; shape.popup (); Et les résultats:
Jetez un coup d'œil au fichier JavaScript généré. Vous verrez que le compilateur a injecté une nouvelle variable, var _this = this;, et utilisé dans setTimeout ()La fonction de rappel pour référencer le prénom propriété.
TypeScript prend en charge les classes et leur implémentation suit de près la proposition ECMAScript 6. Créons un autre fichier, appelé class.ts, et passez en revue la syntaxe de la classe:
classe Forme aire: nombre; couleur: chaîne; constructeur (nom: chaîne, largeur: nombre, hauteur: nombre) this.area = width * height; this.color = "pink"; ; shoutout () return "I'm" + this.color + "" + this.name + "avec une surface de" + this.area + "cm au carré."; var square = new Shape ("square", 30, 30); console.log (square.shoutout ()); console.log ('Surface of Shape:' + square.area); console.log ('Nom de la forme:' + square.name); console.log ('Couleur de la forme:' + square.color); console.log ('Largeur de la forme:' + square.width); console.log ('Hauteur de la forme:' + square.height); Ce qui précède Forme la classe a deux propriétés, surface et Couleur, un constructeur (bien nommé constructeur()), ainsi qu'une hurler() méthode. La portée des arguments du constructeur (prénom, largeur et la taille) sont locaux au constructeur. C'est pourquoi vous verrez des erreurs dans le navigateur, ainsi que dans le compilateur:
class.ts (12,42): La propriété 'name' n'existe pas pour la valeur de type 'Shape' class.ts (20,40): La propriété 'name' n'existe pas pour la valeur de type 'Shape'. ts (22,41): La propriété 'width' n'existe pas pour la valeur de type 'Shape' class.ts (23,42): La propriété 'height' n'existe pas pour la valeur de type 'Shape'
Tout programme JavaScript est déjà un programme TypeScript.
Ensuite, explorons le Publique et privé modificateurs d'accessibilité. Les membres publics sont accessibles partout, alors que les membres privés ne sont accessibles que dans le cadre du corps de la classe. Bien entendu, JavaScript ne dispose d'aucune fonctionnalité permettant de renforcer la confidentialité. Par conséquent, l'accessibilité privée n'est appliquée qu'au moment de la compilation et sert d'avertissement à l'intention initiale du développeur de le rendre privé..
A titre d’illustration, ajoutons le Publique modificateur d'accessibilité à l'argument constructeur, prénom, et un privé modificateur d'accessibilité au membre, Couleur. Quand on ajoute Publique ou privé accessibilité à un argument du constructeur, cet argument devient automatiquement un membre de la classe avec le modificateur d'accessibilité correspondant.
… Couleur privée: chaîne;… constructeur (nom public: chaîne, largeur: nombre, hauteur: nombre) …
class.ts (24,41): La propriété 'couleur' n'existe pas sur la valeur de type 'Shape'
Enfin, vous pouvez étendre une classe existante et créer un Classe dérivée avec le s'étend mot-clé. Ajoutons le code suivant au fichier existant, class.ts, et le compiler:
classe Shape3D étend Shape volume: number; constructeur (nom public: chaîne, largeur: nombre, hauteur: nombre, longueur: nombre) super (nom, largeur, hauteur); this.volume = longueur * this.area; ; shoutout () return "I'm" + this.name + "avec un volume de" + this.volume + "cm cube."; superShout () return super.shoutout (); var cube = new Shape3D ("cube", 30, 30, 30); console.log (cube.shoutout ()); console.log (cube.superShout ()); Quelques choses se passent avec le dérivé Shape3D classe:
Forme classe, il hérite du surface et Couleur Propriétés.super méthode appelle le constructeur de la classe de base, Forme, en passant le prénom, largeur, et la taille valeurs. L'héritage nous permet de réutiliser le code de Forme, afin que nous puissions calculer facilement this.volume avec l'héritage surface propriété.hurler() redéfinit l'implémentation de la classe de base et une nouvelle méthode superShout () appelle directement la classe de base hurler() méthode en utilisant le super mot-clé.Avec seulement quelques lignes de code supplémentaires, nous pouvons facilement étendre une classe de base pour ajouter des fonctionnalités plus spécifiques et faire connaître notre intention via TypeScript..
Malgré le très jeune âge de TypeScript, vous pouvez trouver de nombreuses ressources intéressantes sur le langage Web (y compris un cours complet destiné à Tuts + Premium!). Assurez-vous de vérifier ceux-ci:
TypeScript supporte les classes et leur implémentation suit de près la proposition ECMAScript 6.
Essayer TypeScript est facile. Si vous préférez une approche à typage statique pour les applications volumineuses, les fonctionnalités de TypeScript appliqueront un environnement familier et discipliné. Bien qu'il ait été comparé à CoffeeScript ou Dart, TypeScript est différent en ce sens qu'il ne remplace pas JavaScript; il ajoute des fonctionnalités à JavaScript.
Nous n'avons pas encore vu l'évolution de TypeScript, mais Microsoft a déclaré qu'ils conserveraient ses nombreuses fonctionnalités (annotations de type de côté) alignées sur ECMAScript 6. Ainsi, si vous souhaitez essayer de nombreuses nouvelles fonctionnalités de ES6, TypeScript un excellent moyen de le faire! Allez-y - essayez-le!
