Apprenez TypeScript en 5 minutes - Un tutoriel pour les débutants

TypeScript est un sur-ensemble typé de JavaScript, visant à rendre le langage plus évolutif et plus fiable.

Il est open-source et a été maintenu par Microsoft depuis sa création en 2012. Cependant, TypeScript a fait sa première percée en tant que langage de programmation de base dans Angular 2. Il n'a cessé de croître depuis, également dans les communautés React et Vue.

Dans ce didacticiel, vous apprendrez les bases de TypeScript à l'aide d'exemples pratiques.

Nous sommes également sur le point de lancer un cours TypeScript gratuit en 22 parties sur Scrimba. Laissez votre email ici si vous souhaitez un accès anticipé!

Commençons.

Installation de TypeScript

Avant de commencer à coder, nous devons installer TypeScript sur notre ordinateur. Nous allons utiliser npmpour cela, alors ouvrez simplement le terminal et tapez la commande suivante:

npm install -g typescript 

Une fois installé, nous pouvons le vérifier en exécutant la commande tsc -vqui affichera la version du TypeScript installée.

Écrire du code

Créons notre premier fichier TypeScript et écrivons du code à l'intérieur. Ouvrez votre IDE ou éditeur de texte préféré et créez un fichier avec le nom de first.ts - Pour les fichiers TypeScript, nous utilisons l'extension.ts

Pour l'instant, nous allons juste écrire quelques lignes de vieux JavaScript, car tout le code JavaScript est également du code TypeScript valide:

let a = 5; let b = 5; let c = a + b; console.log(c); 

L'étape suivante consiste à compiler notre TypeScript en JavaScript brut, car les navigateurs veulent que les .jsfichiers soient lus.

Compilation de TypeScript

Pour compiler, nous allons exécuter la commande de tsc filename.ts, qui crée un fichier JavaScript avec le même nom de fichier mais une extension différente, et que nous pouvons éventuellement transmettre à nos navigateurs.

Ouvrez donc le terminal à l'emplacement du fichier et exécutez la commande suivante:

tsc first.ts 

Conseil : si vous souhaitez compiler tous les fichiers TypeScript dans n'importe quel dossier, utilisez la commande:tsc *.ts

Types de données

TypeScript - comme son nom l'indique - est la version typée de JavaScript. Cela signifie que nous pouvons spécifier des types pour différentes variables au moment de la déclaration. Ils contiendront toujours le même type de données dans cette étendue.

La saisie est une fonctionnalité très utile pour garantir la fiabilité et l'évolutivité. La vérification de type permet de garantir que notre code fonctionne comme prévu. En outre, cela aide à traquer les bogues et les erreurs et à documenter correctement notre code.

La syntaxe pour attribuer un type à une variable est d'écrire le nom de la variable suivi d'un :signe, puis le nom du type suivi d'un =signe et de la valeur de la variable.

Il existe trois types différents dans TypeScript: le anytype, les Built-intypes et les User-definedtypes. Jetons un coup d'œil à chacun d'eux.

n'importe quel type

Le anytype de données est le sur-ensemble de tous les types de données dans TypeScript. Donner à n'importe quelle variable le type de anyéquivaut à désactiver la vérification de type pour une variable.

let myVariable: any = 'This is a string' 

Types intégrés

Ce sont les types qui sont construits dans TypeScript. Ils comprennent number, string, boolean, void, nullet undefined.

let num: number = 5; let name: string = 'Alex'; let isPresent: boolean = true; 

Types définis par l'utilisateur

Les User-definedtypes comprennent enum, class, interface, arrayet tuple. Nous en discuterons plus tard dans cet article.

Programmation orientée objet

TypeScript prend en charge toutes les fonctionnalités de la programmation orientée objet, telles que les classes et les interfaces. Cette capacité est un énorme coup de pouce pour JavaScript - il a toujours eu du mal avec sa fonctionnalité POO, surtout depuis que les développeurs ont commencé à l'utiliser pour des applications à grande échelle.

Classe

Dans la programmation orientée objet, une classe est le modèle d'objets. Une classe définit à quoi ressemblerait un objet en termes de caractéristiques et fonctionnalités de cet objet. Une classe encapsule également les données de l'objet.

TypeScript a une prise en charge intégrée des classes, qui n'étaient pas prises en charge par ES5 et les versions antérieures. Cela signifie que nous pouvons utiliser le classmot - clé pour en déclarer un facilement.

class Car { // fields model: String; doors: Number; isElectric: Boolean; constructor(model: String, doors: Number, isElectric: Boolean) { this.model = model; this.doors = doors; this.isElectric = isElectric; } displayMake(): void { console.log(`This car is ${this.model}`); } } 

Dans l'exemple ci-dessus, nous avons déclaré une Carclasse, ainsi que certaines de ses propriétés, que nous initialisons dans le fichier constructor. Nous avons également une méthode qui afficherait un message en utilisant sa propriété.

Voyons comment nous pouvons créer une nouvelle instance de cette classe:

const Prius = new Car('Prius', 4, true); Prius.displayMake(); // This car is Prius 

Pour créer un objet d'une classe, nous utilisons le mot-clé de newet appelons le constructeur de la classe et lui passons les propriétés. Maintenant , cet objet Priusa ses propres propriétés model, doorset isElectric. L'objet peut également appeler la méthode de displayMake, qui aurait accès aux propriétés de Prius.

Interface

The concept of interfaces is another powerful feature of TypeScript, which allows you to define the structure of variables. An interface is like a syntactical contract to which an object should conform.

Interfaces are best described through an actual example. So, suppose we have an object of Car:

const Car = { model: 'Prius', make: 'Toyota', display() => { console.log('hi'); } } 

If we look at the object above and try to extract its signature, it would be:

{ model: String, make: String, display(): void } 

If we want to reuse this signature, we can declare it in the form of an interface. To create an interface, we use the keyword interface.

interface ICar { model: String, make: String, display(): void } const Car: ICar = { model: 'Prius', make: 'Toyota', display() => { console.log('hi'); } } 

Here, we’ve declared an interface called ICar , and created an object Car. Car is now binding to the ICar interface, ensuring that the Car object defines all the properties which are in the interface.

Conclusion

So I hope this gave you a quick glimpse into how TypeScript can make your JavaScript more stable and less prone to bugs.

TypeScript is gaining a lot of momentum in the world of web development. There’s also an increasing amount of React developers who are adopting it. TypeScript is definitely something any front-end developer in 2018 should be aware of.

Happy coding :)

Thanks for reading! My name is Per Borgen, I'm the co-founder of Scrimba – the easiest way to learn to code. You should check out our responsive web design bootcamp if want to learn to build modern website on a professional level.