TypeScript Tutoriel : Qu'est-ce que c'est, interface, énumération, tableau avec exemple

Qu’est ce qu' TypeScript?

TypeScript est un sur-ensemble de JavaScénario. TypeScript est un pur langage de programmation orienté objet qui prend en charge les classes, les interfaces, etc. Il s'agit d'un langage open source développé par Microsoft qui compile statiquement le code pour JavaScript. Il peut facilement s'exécuter dans un navigateur ou Nodejs.

Toutes les dernières fonctionnalités publiées pour ECMAScript sont prises en charge dans TypeScript et en plus TypeScript possède ses propres fonctionnalités orientées objet comme les interfaces, la déclaration ambiante, l'héritage de classe, etc. qui aident à développer une grande application qui autrement serait difficile à faire Javascénario.

Comment télécharger et installer TypeScript

Voici le processus étape par étape pour télécharger et installer TypeScript:

Étape 1) Téléchargez et installez Nodejs

Allez sur le site officiel de nodejs : https://nodejs.org/en/download/ et téléchargez et installez nodejs selon votre système d'exploitation. Les instructions détaillées sur la façon de télécharger nodejs sont disponibles ici : https://www.guru99.com/download-install-node-js.html

Étape 2) Vérifiez la version de Nodejs et npm

Pour vérifier si nodejs et npm sont installés, vérifiez simplement la version dans votre invite de commande.

D:\typeproject>node --version
V10.15.1

D:\typeproject>npm --version
6.4.1

Vous avez donc nodejs v10 et npm 6 installés.

Étape 3) TypeScript en un clic

Créez votre répertoire de projet typeproject/ et exécutez npm init, comme indiqué dans la commande ci-dessous :

npm init

Étape 4) Démarrer l'installation

Maintenant, nous allons créer le package .json qui stockera les dépendances de notre projet.

Une fois terminé, installez TypeScript comme suit:

npm -g install typescript

La commande ci-dessus se chargera de l'installation TypeScript. L'ajout de « -g » à npm install installera TypeScript à l'échelle mondiale. L'avantage d'utiliser -g est que vous pourrez utiliser TypeScript tsc commande à partir de n’importe quel répertoire car elle est installée globalement. Au cas où vous ne voudriez pas installer TypeScript utilisez globalement la commande ci-dessous :

npm --save install typescript

Créez le dossier src/ dans le répertoire de votre projet et dans le dossier src/ créez TypeScript fichier test.ts et écrivez votre code.

Exemple : test.ts

function add(x:number, y:number) {
	return x+y;
}

let sum = add(5,10);
console.log(sum);

Compiler TypeScript coder pour Javascript

Pour compiler le code ci-dessus, utilisez la commande suivante :

If TypeScript est installé globalement, utilisez la commande ci-dessous :

tsc test.ts

If TypeScript est installé localement sur votre projet, vous devez utiliser le chemin de TypeScript à partir de node_modules comme indiqué :

node_modules/typescript/bin/tsc test.ts

La commande ci-dessus créera un fichier test.js et le code sera compilé en javascript.

Exemple : test.js

function add(x, y) {
    return x + y;
}
var sum = add(5, 10);
console.log(sum);

Exécution Javascript utiliser Nodejs

Dans ce nouvel article concernant notre nouveau projet TypeScript tutoriel, nous exécuterons test.js dans nodejs comme suit :

D:\typeproject\src>node test.js
15

La valeur consolé est affichée à l'exécution de test.js

Exécution JavaScript dans le navigateur

Mise en situation :

<html>
<head></head>
<body>
<script type="text/javascript" src="test.js"></script>
</body>
</html>

Compiler TypeScript coder pour Javascript en utilisant la version EcmaScript

TypeScript prend en charge toutes les fonctionnalités Ecmascript publiées et les développeurs peuvent les utiliser lors du codage. Mais toutes les nouvelles fonctionnalités ne sont pas prises en charge sur les anciens navigateurs, ce qui nécessite de compiler javascript vers une ancienne version d'Ecmascript. TypeScript fournit des options de compilateur qui peuvent le faire.

Exemple : test.ts

var addnumbers = (a, b) => {
    return a+b;
}

addnumbers(10, 20);

Pour compiler vers la version ES de votre choix, vous pouvez utiliser l'option target ou t dans votre commande comme suit :

tsc --target ES6  test.ts

OR

tsc -t ES6 test.ts

Par défaut, la cible est ES3. Si vous souhaitez la modifier, vous pouvez utiliser la commande ci-dessus.

À l'heure actuelle, nous utiliserons ES6 dans ce domaine TypeScript tutoriel comme cible :

tsc --target ES6  test.ts

test.ts à test.js

var addnumbers = (a, b) => {
    return a+b;
}

addnumbers(10, 20);

Le code reste tel quel, car la fonction fléchée que vous avez utilisée est une fonctionnalité ES6 et la même lorsqu'elle est compilée dans ES6 n'est pas modifiée.

Par défaut la cible est ES3 donc sans cible vous obtenez test.js comme :

var addnumbers = function (a, b) {
    return a + b;
};
addnumbers(10, 20);

Donc ici, la grosse flèche est remplacée par une fonction anonyme normale.

Variables dans TypeScript

Variables sont utilisés pour stocker des valeurs, et la valeur peut être une chaîne, un nombre, un booléen ou une expression. Lorsqu'il s'agit de variables dans TypeScript, ils sont semblables à Javascénario. Apprenons donc à déclarer et à attribuer une valeur aux variables dans TypeScript.

Les variables ne peuvent pas être utilisées dans le code sans définition. Pour déclarer une variable, vous pouvez utiliser

var mot-clé,

laisser mot-clé

const mot-clé

Travailler avec des variables dans TypeScript est similaire à JavaScript, et les utilisateurs familiers avec JavaScript le trouveront très facile. Seules les variables comme laisser et const ne sont pas très utilisés par rapport à var.

Déclaration de variables à l'aide de var

syntaxe:

var firstname = "Roy";

Jetons un coup d'œil à quelques-uns TypeScript exemples pour comprendre le fonctionnement du mot-clé var ainsi que la portée des variables déclarées à l'aide var mot-clé.

1 Exemple:

var  k = 1; // variable k will have a global scope

function test() {
    var c = 1; // variable c is local variable and will be accessible inside function test, it will not be available outside the function.
    return k++;
}

test(); // output as  1
test(); // output as 2
alert(c); // will throw error , Uncaught ReferenceError: c is not defined

2 Exemple:

var t = 0; // variable t is declared in global scope.
function test() {    
    var t = 10; //variable t is again redeclared inside function with value 10, so here t is local to the function and changes done to it will remain inside the function.
    return t;
}
test(); // will return 10.
console.log(t); // will console 0.

3 Exemple:

var i = 0;
function test() {
    if (i>0) {
      var t = 1;
    }
    return t;
}

test(); // the value returned will be undefined. The if-block has the variable which gets executed when I> 0. Over here the if-block is not expected but you are still having a reference to the variable t, and it returns undefined, this is because var defined variables once defined inside a function will have reference to it inside the function.  
i++; // here value of i is incremented.
test(); // since i >0 the if block is executed and value returned is 1.

Déclaration de variables à l'aide de let

Vue d'ensemble TypeScript la syntaxe de let est la suivante :

syntaxe:

let name="Roy";

Le fonctionnement de laisser la variable est presque la même que var, mais avec une petite différence et comprendra la même chose en utilisant un TypeScript Exemple.

Mise en situation :

let i = 1;
function test() {
    if (i>0) {
	  let t = 1;
    }
    return t;
}

test(); // throws an error : Uncaught ReferenceError: t is not defined.

Au-dessus de TypeScript L'exemple génère une erreur, mais la même chose aurait bien fonctionné si c'était avec le var mot-clé. Variables utilisant laisser sont disponibles dans la portée du bloc déclarée, par exemple, la variable t n'est disponible qu'à l'intérieur du bloc if et non pour la fonction entière.

De plus, si vous déclarez une variable dans une fonction, ou une boucle for, une boucle while, TypeScript switch block, il ne sera disponible que dans ce bloc et aucune référence à celui-ci en dehors du bloc, et il générera une erreur si la variable est utilisée en dehors du bloc. C'est la principale différence entre les variables déclarées par mot-clé var et let.

Déclaration de variables à l'aide de const

Const signifie variables constantes. Elles sont similaires aux variables let, à la seule différence qu'une fois qu'une valeur leur est attribuée, elle ne peut plus être modifiée.

syntaxe:

const name;

Mise en situation :

const age = "25"; 
age="30"; // will throw an error : Uncaught TypeError: Assignment to constant variable.

Ainsi, les utilisateurs ne peuvent utiliser les variables const que dans les cas où ils savent qu'ils n'ont pas besoin de modifier les valeurs qui leur sont attribuées.

Tapez dans TypeScript

TypeScript est un langage fortement typé, alors que JavaScript ne l'est pas. Une variable dont la valeur est définie comme une chaîne peut être modifiée en un nombre sans aucun problème dans Javascript. La même chose n'est pas tolérée dans TypeScript. En TypeScript, le type d'une variable est défini uniquement au début et tout au long de l'exécution, il doit conserver le même type. Toute modification entraînera une erreur de compilation lors de la compilation en javascript.

Voici les types :

Numéro
Chaîne
Boolean
Toutes
vide

Numéro

Prend uniquement des entiers, des flottants, des fractions, etc.

syntaxe:

let a :number = 10;
let marks :number = 150;
let price :number = 10.2;

Voici quelques méthodes importantes qui peuvent être utilisées sur les types Nombre :

àFixe() – il convertira le nombre en chaîne et conservera les décimales données à la méthode.

toString () – cette méthode convertira le nombre en chaîne.

valeur de() – cette méthode rendra la valeur primitive du nombre.

àPrécision() – cette méthode formatera le nombre à une longueur spécifiée.

Exemple : avec toutes les méthodes String

let _num :number = 10.345;
_num.toFixed(2); // "10.35"
_num.valueOf(); // 10.345
_num.toString(); // "10.345"
_num.toPrecision(2); //"10"

Chaîne

Chaîne : uniquement les valeurs de chaîne

syntaxe:

let str :string = "hello world";

Voici quelques méthodes importantes qui peuvent être utilisées sur les types String :

scission() – cette méthode divisera la chaîne en un tableau.
caractère() – cette méthode donnera le premier caractère de l’index donné.
Indice de() – cette méthode donnera la position de la première occurrence pour la valeur qui lui est donnée.
remplacer () – cette méthode prend 2 chaînes, d’abord la valeur à rechercher dans la chaîne et si elle est présente, elle la remplacera par la 2ème et renverra une nouvelle chaîne.
Passementeries () – cette méthode supprimera les espaces blancs des deux côtés de la chaîne.
substr() – cette méthode donnera une partie de la chaîne qui dépendra de la position donnée comme début et fin.
sous-chaîne() – cette méthode donnera une partie de la chaîne qui dépendra de la position donnée comme début et fin. Le caractère en position finale sera exclu.
vers majuscule() -convertira la chaîne en majuscule
en minuscules() – convertira la chaîne en minuscules.

Mise en situation :

let _str:string = "Typescript";

_str.charAt(1); // y
_str.split(""); //["T", "y", "p", "e", "s", "c", "r", "i", "p", "t"]
_str.indexOf("s"); //4 , gives -1 is the value does not exist in the string.
_str.replace("Type", "Coffee"); //"Coffeescript"
_str.trim(); //"Typescript"
_str.substr(4, _str.length); //"script"
_str.substring(4, 10); //"script"
_str.toUpperCase();//"TYPESCRIPT"
_str.toLowerCase();//"typescript"

Boolean

Acceptera des valeurs logiques telles que vrai, faux, 0 et 1.

syntaxe:

let bflag :boolean = 1;
let status :boolean = true;

Toutes

syntaxe:

let a :any = 123
a = "hello world"; // changing type will not give any error.

Variables déclarées en utilisant tout type peut prendre la variable sous forme de chaîne, de nombre, de tableau, de booléen ou de vide. TypeScript ne générera aucune erreur de compilation ; ceci est similaire aux variables déclarées dans JavaScript. N'utilisez une variable de type que lorsque vous n'êtes pas sûr du type de valeur qui sera associée à cette variable.

vide

Le type Void est principalement utilisé comme type de retour sur une fonction qui n’a rien à retourner.

syntaxe:

function testfunc():void{
 //code here
}

TypeScript tableau

An tableau in TypeScript est un type de données dans lequel vous pouvez stocker plusieurs valeurs. Apprenons à déclarer et à attribuer des valeurs pour les opérations de tableau dans TypeScript.

Depuis que TypeScript est un langage fortement typé, il faut indiquer quel sera le type de données des valeurs d'un tableau. Sinon, il le considérera comme étant de type any.

Déclarer et initialiser un tableau

syntaxe:

let nameofthearray : Array<typehere>

Exemple

let months: Array<string> = ["Jan", "Feb", "March", "April", "May", "June", "July", "Aug", "Sept", "Oct", "Nov", "Dec"]; //array with all string values.

let years: Array<number> = [2015, 2016, 2017, 2018, 2019]; //array will all numbers

let month_year: Array<string | number> = ["Jan", 2015, "Feb", 2016]; //array with string and numbers mixed.

let alltypes: Array<any> = [true, false, "Harry", 2000, { "a": "50", "b": "20" }]; //array of all types boolean, string , number , object etc.

Différentes façons d'accéder aux éléments d'un tableau

Pour obtenir les éléments d'un tableau, les valeurs commencent de l'index 0 jusqu'à la longueur du tableau.

Mise en situation :

let years: Array<number> = [ 2016, 2017, 2018, 2019]; //array will all numbers			
years[0]; // output will be 2016			
years[1]; // output will be 2017			
years[2]; // output will be 2018			
years[3]; // output will be 2019

Vous pouvez également obtenir les éléments d'un tableau en utilisant TypeScript pour boucle comme indiqué ci-dessous:

En utilisant TypeScript pour la boucle

let years: Array<number> = [ 2016, 2017, 2018, 2019]; 
for (let i=0;i<=years.length; i++) {
     console.log(years[i]);
}
Output:
2016
2017
2018
2019

Utiliser la boucle for-in

let years: Array<number> = [ 2016, 2017, 2018, 2019]; 
for (let i in years) {
     console.log(years[i])
}

Output:
2016
2017
2018
2019

Utiliser la boucle for-of

let years: Array<number> = [ 2016, 2017, 2018, 2019]; 
for (let  i of years) {
     console.log(i)
}
Output:
2016
2017
2018
2019

Utilisation de la boucle foreach

let years: Array<number> = [ 2016, 2017, 2018, 2019]; 
years.forEach(function(yrs, i) {
  console.log(yrs);
});
Output:
2016
2017
2018
2019

TypeScript Méthodes de tableau

TypeScript L'objet Array possède de nombreuses propriétés et méthodes qui aident les développeurs à gérer les tableaux facilement et efficacement. Vous pouvez obtenir la valeur d'une propriété en spécifiant arrayname.property et la sortie d'une méthode en spécifiant array name.method().

propriété length

=> Si vous souhaitez connaître le nombre d'éléments dans un tableau, vous pouvez utiliser la propriété length.

Revautre méthode

=> Vous pouvez inverser l'ordre des éléments dans un tableau en utilisant une méthode inverse.

Méthode de tri

=> Vous pouvez trier les éléments d'un tableau en utilisant la méthode de tri.

Méthode pop

=> Vous pouvez supprimer le dernier élément d'un tableau en utilisant une méthode pop.

Shift méthode

=> Vous pouvez supprimer le premier élément d'un tableau en utilisant la méthode shift.

Méthode push

=> Vous pouvez ajouter de la valeur comme dernier élément du tableau.

méthode concat

=> Vous pouvez joindre deux tableaux en un seul élément de tableau.

Exemple de propriété de longueur

let months: Array<string> = ["Jan", "Feb", "March", "April", "May", "June", "July", "Aug", "Sept", "Oct", "Nov", "Dec"]; //array with all string values.

console.log(months.length);  // 12

Exemple de méthode inverse

let months: Array<string> = ["Jan", "Feb", "March", "April", "May", "June", "July", "Aug", "Sept", "Oct", "Nov", "Dec"]; //array with all string values.

console.log(months.reverse());  //  ["Dec", "Nov", "Oct", "Sept", "Aug", "July", "June", "May", "April", "March", "Feb", "Jan"]

Exemple de méthode de tri

let months: Array<string> = ["Jan", "Feb", "March", "April", "May", "June", "July", "Aug", "Sept", "Oct", "Nov", "Dec"]; //array with all string values.

console.log(months.sort()); // ["April", "Aug", "Dec", "Feb", "Jan", "July", "June", "March", "May", "Nov", "Oct", "Sept"]

Exemple de méthode pop

let months: Array<string> = ["Jan", "Feb", "March", "April", "May", "June", "July", "Aug", "Sept", "Oct", "Nov", "Dec"]; //array with all string values.				

console.log(months.pop()); //Dec

Exemple de méthode de décalage

let months: Array<string> = ["Jan", "Feb", "March", "April", "May", "June", "July", "Aug", "Sept", "Oct", "Nov", "Dec"]; //array with all string values.			

console.log(months.shift()); // Jan

Exemple de méthode push

let years: Array<number> = [2015, 2016, 2017, 2018, 2019]; //array will all numbers			
console.log(years.push(2020)); 			
years.forEach(function(yrs, i) {			
  console.log(yrs); // 2015 , 2016,2017, 2018, 2019,2020				
});

Exemple de méthode concat

let array1: Array<number> = [10, 20, 30]; 			
let array2: Array<number> = [100, 200, 300];			
console.log(array1.concat(array2)); //[10, 20, 30, 100, 200, 300]

Classe en TypeScript

TypeScript est un sur-ensemble de JavaScript, donc tout ce qui est possible à faire dans JavaLe script est également possible dans TypeScript. La classe est une nouvelle fonctionnalité ajoutée à partir d'ES6, donc plus tôt dans JavaLe script de la fonctionnalité de type de classe a été essayé à l'aide d'une fonction avec une fonctionnalité de prototype pour réutiliser le code. En utilisant la classe, vous pouvez avoir notre code presque proche des langages comme Java, C#, Python, etc., où le code peut être réutilisé. Avec la fonctionnalité de classe dans TypeScript/JavaLe script, ça rend le langage très puissant.

Définir une classe dans TypeScript

Voici une syntaxe de classe de base dans TypeScript:

class nameofclass {
     //define your properties here

    constructor() {
     // initialize your properties here
    }
 
   //define methods for class
}

Exemple : un exemple fonctionnel sur Class

class Students {
    age : number;
    name : string;
    roll_no : number;
    
    constructor(age: number, name:string, roll_no: number) {
        this.age = age;
        this.name = name;
        this.roll_no = roll_no;
    }

    getRollNo(): number {
        return this.roll_no;
    }

    getName() : string {
        return this.name;
    }

    getAge() : number {
        return this.age;
    }
}

Dans l’exemple ci-dessus, vous avez une classe appelée Étudiants. Il a les propriétés age, name et roll_no.

Constructeur dans un TypeScript Classe

L'exemple de classe Students que nous avons défini ci-dessus, il a un constructeur comme indiqué ci-dessous :

constructor(age: number, name:string, roll_no: number) {
        this.age = age;
        this.name = name;
        this.roll_no = roll_no;
    }

La méthode constructeur a les paramètres age, name et roll_no. Le constructeur se chargera d'initialiser les propriétés lors de l'appel de la classe. Les propriétés sont accessibles en utilisant ceci. mot-clé. Exemple this.age pour accéder à la propriété age, this.roll_no pour accéder à roll_no, etc. Vous pouvez également avoir un constructeur par défaut, comme indiqué ci-dessous :

constructor () {}

Méthodes à l'intérieur d'un TypeScript Classe

Dans l'exemple de la classe Students, il existe des méthodes définies par exemple getRollNo(), getName(), getAge() qui sont utilisées pour donner des détails sur les propriétés roll_no, name et age.

getRollNo(): number {
        return this.roll_no;
}

getName() : string {
	return this.name;
}

getAge() : number {
	return this.age;
}

Création d'une instance de classe dans TypeScript

Mise en situation :

In TypeScript pour créer une instance d'une classe, vous devez utiliser l'opérateur new. Lorsque nous créons une instance d'une classe à l'aide de l'opérateur new, nous obtenons l'objet qui peut accéder aux propriétés et aux méthodes de la classe comme indiqué ci-dessous :

let student_details = new Students(15, "Harry John", 33);
student_details.getAge(); // 15
student_details.getName(); // Harry John

Compilation TypeScript Classe à Javascénario

Vous pouvez utiliser la commande tsc comme indiqué ci-dessous pour compiler vers Javascript.

Command: tsc  Students.ts

La sortie de Javascript le code lors de la compilation est le suivant :

var Students = /** @class */ (function () {
    function Students(age, name, roll_no) {
        this.age = age;
        this.name = name;
        this.roll_no = roll_no;
    }
    Students.prototype.getRollNo = function () {
        return this.roll_no;
    };
    Students.prototype.getName = function () {
        return this.name;
    };
    Students.prototype.getAge = function () {
        return this.age;
    };
    return Students;
}());

In Javascript, la classe est convertie en une fonction auto-invoquée.

Héritage de classe

Les classes peuvent être héritées en utilisant le étendre mot-clé dans TypeScript.

Syntaxe d'héritage de classe :

class A {
     //define your properties here

    constructor() {
     // initialize your properties here
    }
 
   //define methods for class

}

class B extends A {
 //define your properties here

    constructor() {
     // initialize your properties here
    }
 
   //define methods for class

}

classe B je pourrai partager Classe A méthodes et propriétés.

Voici un exemple fonctionnel d'une classe utilisant l'héritage

class Person {
    name: string;
    age: number;

    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }

    getName(): string {
        return this.name;
    }

    getAge(): number {
        return this.age;
    }
}

class Student extends Person {
    tmarks: number;
    getMarks(): number {
        return this.tmarks;
    }

    setMarks(tmarks) {
        this.tmarks = tmarks;
    }
}

let _std1 = new Student('Sheena', 24);
_std1.getAge(); // output is 24
_std1.setMarks(500);
_std1.getMarks(); // output is 500

Vous avez deux classes, Personne et Étudiant. La classe Student étend Person et l'objet créé sur Student peut accéder à ses propres méthodes et propriétés ainsi qu'à la classe qu'il a étendue.

Ajoutons maintenant quelques modifications supplémentaires à la classe ci-dessus.

Mise en situation :

class Person {
    name: string;
    age: number;

    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }

    getName(): string {
        return this.name;
    }

    getAge(): number {
        return this.age;
    }
}

class Student extends Person {
    tmarks: number;
    constructor(name: string, age: number, tmarks: number) {
        super(name, age);
    }
    getMarks(): number {
        return this.tmarks;
    }

    setMarks(tmarks) {
        this.tmarks = tmarks;
    }
}

let _std1 = new Student('Sheena', 24, 500);
_std1.getAge(); // output is 24
_std1.getMarks(); // output is 500

Les modifications que vous avez ajoutées par rapport à l'exemple précédent sont qu'il existe un constructeur défini dans la classe Student. Le constructeur doit prendre les mêmes paramètres que la classe de base et ajouter ses propres paramètres supplémentaires, le cas échéant.

In TypeScript vous devez appeler super will tous les paramètres comme paramètres de base. Cela doit être la première chose à faire à l’intérieur du constructeur. Le super exécutera le constructeur de la classe étendue.

Modificateurs d'accès dans TypeScript

TypeScript prend en charge les modificateurs d'accès publics, privés et protégés à vos méthodes et propriétés. Par défaut, si aucun modificateur d'accès n'est donné, la méthode ou la propriété est considérée comme publique et sera facilement accessible depuis l'objet de la classe.

Dans le cas de modificateurs d'accès privés, ils ne sont pas accessibles depuis l'objet de la classe et sont destinés à être utilisés uniquement à l'intérieur de la classe. Ils ne sont pas disponibles pour la classe héritée.

Dans le cas de modificateurs d'accès protégés, ils sont destinés à être utilisés à l'intérieur de la classe et de la classe héritée et ne seront pas accessibles depuis l'objet de la classe.

Mise en situation :

class Person {
    protected name: string;
    protected age: number;

    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }

    private getName(): string {
        return this.name;
    }

    getDetails(): string {
        return "Name is "+ this.getName();
    }
}

class Student extends Person {
    tmarks: number;
    constructor(name: string, age: number, tmarks: number) {
        super(name, age);  
        this.tmarks = tmarks;    
    }
    getMarks(): number {
        return this.tmarks;
    }

    getFullName(): string {
        return this.name;
    }
    
    setMarks(tmarks) {
        this.tmarks = tmarks;
    }
}

let _std1 = new Student('Sheena', 24, 500);
_std1.getMarks(); // output is 500
_std1.getFullName(); // output is Sheena
_std1.getDetails(); // output is Name is Sheena

Privé: les propriétés ou les méthodes ne sont pas accessibles par l'objet de la classe ainsi que par la classe dérivée, elles sont destinées à être utilisées en interne à l'intérieur de la classe.
Protégé: les propriétés et les méthodes ne sont pas non plus accessibles par l'objet créé. Ils sont accessibles depuis l’intérieur de la classe et disponibles pour la classe qui l’étend.
Publique: les propriétés et les méthodes sont déclarées sans aucun mot-clé. Ils sont facilement accessibles en utilisant l’objet de la classe depuis l’extérieur.

Interface dans TypeScript

L'une des caractéristiques essentielles de TypeScript est une interface. L'interface est un ensemble de règles définies qui doivent être implémentées par l'entité qui l'utilise. L'entité peut être une classe, une fonction ou une variable. Une interface peut être composée de propriétés et de méthodes. Vous pouvez définir des propriétés comme facultatives en utilisant la syntaxe « ? » pour cette propriété ou méthode. L'interface ajoute une vérification de type stricte pour toute fonction, variable ou classe implémentant l'interface.

Syntaxe d'une interface dans TypeScript

interface Dimension {
    width: string;
    height: string;
}

Vous avez défini une interface nommée Dimension qui possède des propriétés de largeur et de hauteur, et les deux ont un type de chaîne.

Désormais, cette interface peut être implémentée par une variable, une fonction ou une classe. Voici l'exemple de variable implémentant l'interface Dimension.

Mise en situation :

interface Dimension {
    width: string;
    height: string;
}

let _imagedim: Dimension = {
    width: "100px",
    height: "200px"
};

La signature de l'interface Dimension a une largeur et une hauteur, et les deux sont obligatoires. Si lors de l'implémentation de l'interface, une propriété est manquée ou si le type est modifié, cela générera une erreur de compilation lors de la compilation du code en javascript.

Le code ci-dessus, une fois compilé en javascript, se présente comme suit :

var _imagedim = {
    width: "100px",
    height: "200px"
};

Voyons maintenant comment utiliser une interface avec une fonction.

Utilisation de l'interface sur une fonction comme type de retour

Mise en situation :

interface Dimension {
    width: string;
    height: string;
}

function getDimension() : Dimension {
    let width = "300px";
    let height = "250px";
    return {
        width: width,
        height: height
    }
}

Dans l'exemple ci-dessus, l'interface Dimension est implémentée sur la fonction getDimension() comme type de retour. Le type de retour de getDimension() doit correspondre aux propriétés et au type mentionnés pour Interface Dimension.

Le code compilé pour Javascript sera comme suit:

function getDimension() {
    var width = "300px";
    var height = "250px";
    return {
        width: width,
        height: height
    };
}

Lors de la compilation, si le type de retour ne correspond pas à l’interface, une erreur sera générée.

Interface comme paramètre de fonction

interface Dimension {
    width: string;
    height: string;
}

function getDimension(dim: Dimension) : string {
    let finaldim  = dim.width +"-"+ dim.height;
    return finaldim;
}

getDimension({width:"300px", height:"250px"}); // will get "300px-250px"

Ainsi, dans l’exemple ci-dessus, vous avez utilisé Interface Dimension comme paramètre de la fonction getDimension(). Lorsque vous appelez la fonction, vous devez vous assurer que le paramètre qui lui est transmis correspond à la règle d'interface définie.

Le code compilé pour Javascript sera comme suit:

function getDimension(dim) {
    var finaldim = dim.width + "-" + dim.height;
    return finaldim;
}
getDimension({ width: "300px", height: "250px" });

Interface d’implémentation de classe

Pour utiliser l'interface avec une classe, vous devez utiliser le mot-clé met en oeuvre.

Syntaxe pour la classe implémentant une interface :

class NameofClass implements InterfaceName {
}

L'exemple suivant montre le fonctionnement de l'interface avec la classe.

interface Dimension {
    width : string,
    height: string,
    getWidth(): string; 
}

class Shapes implements Dimension {
    width: string;
    height: string;
    constructor (width:string, height:string) {
        this.width = width;
        this.height = height;
    }
    getWidth() {
        return this.width;
    }
}

Dans l'exemple ci-dessus, vous avez défini l'interface Dimension avec les propriétés width et height de type string et une méthode appelée getWidth() qui a une valeur de retour sous forme de chaîne.

Le code compilé pour Javascript sera comme suit:

var Shapes = /** @class */ (function () {
    function Shapes(width, height) {
        this.width = width;
        this.height = height;
    }
    Shapes.prototype.getWidth = function () {
        return this.width;
    };
    return Shapes;
}());

Fonctions dans TypeScript

Les fonctions sont un ensemble d'instructions exécutées pour exécuter une tâche. Dans Javascript, la majeure partie du code est écrite sous forme de fonctions et joue un rôle majeur. Dans TypeScript, vous avez une classe, des interfaces, des modules, des espaces de noms disponibles, mais les fonctions jouent néanmoins un rôle important. La différence entre la fonction dans javascript et TypeScript la fonction est le type de retour disponible avec TypeScript la fonction.

JavaFonction de script :

function add (a1, b1) { 
   return a1+b1;
}

TypeScript fonction:

function  add(a1 : number, b1: number) : number {
    return a1 + b1;
}

Dans les fonctions ci-dessus, le nom de la fonction est ajouté, les paramètres sont a1 et b1 les deux ont un type sous forme de nombre et le type de retour est également un nombre. Si vous transmettez une chaîne à la fonction, elle générera une erreur de compilation lors de sa compilation vers JavaScénario.

Appeler la fonction : ajouter

let  x = add(5, 10) ;  // will return 15
let  b = add(5); // will throw an error : error TS2554: Expected 2 arguments, but got 1.
let c = add(3,4,5); // will throw an error : error TS2554: Expected 2 arguments, but got 3.
let t = add("Harry", "John");// will throw an error :  error TS2345: Argument of type '"Harry"' is not assignable to parameter of type 'number'.

Les paramètres a1 et b1 sont des paramètres obligatoires et généreront une erreur s’ils ne sont pas reçus de cette manière. De plus, le type de paramètre et le type de retour sont très importants et ne peuvent pas changer une fois définis.

Paramètres facultatifs d'une fonction

En javascript, tous les paramètres des fonctions sont facultatifs et considérés comme indéfinis s'ils ne sont pas passés. Mais ce n'est pas le cas avec TypeScript, une fois que vous avez défini les paramètres, vous devez également les envoyer, mais si vous souhaitez conserver un paramètre facultatif, vous pouvez le faire en utilisant ? par rapport au nom du paramètre comme indiqué ci-dessous :

function getName(firstname: string, lastname?: string): string {
    return firstname + lastname;
}

let a = getName("John"); // will return Johnundefined.
let b = getName("John", "Harry"); // will return JohnHarry
let c = getName("John", "H", "Harry"); // error TS2554: Expected 1-2 arguments, but got 3.

Veuillez noter que les paramètres facultatifs doivent être définis dans une fonction en dernier lieu uniquement, vous ne pouvez pas avoir le premier paramètre comme facultatif et le deuxième comme obligatoire. Lorsque vous appelez la fonction avec un seul paramètre, le compilateur génère une erreur. Il faut donc conserver les paramètres optionnels à la fin.

Attribuer des valeurs par défaut aux paramètres

Vous pouvez attribuer des valeurs par défaut aux paramètres comme indiqué ci-dessous :

function getName(firstname: string, lastname = "Harry"): string {
    return firstname + lastname;
}

let a = getName("John"); // will return JohnHarry
let b = getName("John", "H"); // will return JohnH

Semblable aux paramètres facultatifs, ici aussi les paramètres initialisés par défaut doivent être conservés à la fin d'une fonction.

Paramètres de repos

Vous avez vu comment TypeScript gère les paramètres obligatoires, les paramètres facultatifs et les paramètres initialisés par défaut. Je vais maintenant jeter un œil aux paramètres de repos. Les paramètres de repos sont un groupe de paramètres facultatifs définis ensemble, et ils sont définis à l'aide de trois des points (...) suivi du nom du paramètre, qui est un tableau.

Syntaxe des paramètres Rest :

function testFunc(a: string, ...arr: string[]) :string {
    return a + arr.join("");
}

Comme indiqué ci-dessus, les autres paramètres sont définis en utilisant (…param-name) ; le paramètre rest est un tableau préfixé par trois points. Le tableau recevra tous les paramètres qui lui seront transmis. Vous pouvez appeler la fonction, comme indiqué dans l'exemple ci-dessous :

Mise en situation :

let a = testFunc("Monday", "Tuesday", "Wednesday", "Thursday"); // will get output as MondayTuesdayWednesdayThursday

Fonctions de flèche

Une fonction de flèche est l'une des fonctionnalités importantes publiées dans ES6 et elle est disponible dans TypeScript aussi. La syntaxe de la fonction flèche contient une grosse flèche, raison pour laquelle la fonction est appelée fonction flèche.

Syntaxe de la fonction flèche :

var nameoffunction = (params) => {				
 // code here			
}

A quoi sert la fonction flèche ?

Jetons un coup d'œil à l'exemple pour comprendre le cas d'utilisation de la fonction Arrow :

Mise en situation :

var ScoreCard = function () {
    this.score = 0;

    this.getScore = function () {
        setTimeout(function () {
            console.log(this.score);    // gives undefined.    
        }, 1000);
    }    
}

var a = new ScoreCard();
a.getScore();

Vous avez créé une fonction anonyme qui possède une propriété this. Le score s'initialise à 0 et une méthode getScore qui a en interne un setTimeout, et en 1 seconde elle console this.score. La valeur consolé donne undefined bien que this.score soit défini et initialisé. Le problème ici est avec leis mot-clé. La fonction à l'intérieur de setTimeout a son propre this, et elle essaie de faire référence à la partition en interne, et comme elle n'est pas définie, elle donne undefined.

La même chose peut être effectuée en utilisant la fonction Flèche comme indiqué ci-dessous :

var ScoreCard = function () {
    this.score = 0;

    this.getScore = function () {
        setTimeout(()=>{
            console.log(this.score);   // you get  0
        }, 1000);
    }    
}

var a = new ScoreCard();
a.getScore();

Vous avez modifié la fonction à l'intérieur de setTimeout en fonction de flèche, comme indiqué ci-dessous :

setTimeout(()=>{
            console.log(this.score);   // you get  0
        }, 1000);

Une fonction flèche n'a pas la sienne ceci. défini et il partage son parent ceci., donc les variables déclarées à l'extérieur sont facilement accessibles en utilisant ceci à l'intérieur d'une fonction fléchée. Ils sont utiles en raison de leur syntaxe plus courte ainsi que pour les rappels, les gestionnaires d'événements, les fonctions de synchronisation internes, etc.

TypeScript Enums

TypeScript Enum est un objet qui possède une collection de valeurs liées stockées ensemble. Javascript ne prend pas en charge les énumérations. La plupart des langage de programmation comme Java,C, C++ supports TypeScript Enum et il est également disponible avec TypeScript aussi. Les énumérations sont définies à l'aide du mot-clé enum.

Comment déclarer un Enum ?

syntaxe:

enum NameofEnum {
   value1,
   value2,
    ..
}

Exemple : Énumération

enum Directions {
North,
South,
East,
West
}

Dans l'exemple ci-dessus, vous avez défini une énumération appelée Directions. La valeur donnée est Nord, Sud, Est, Ouest. Les valeurs sont numérotées à partir de 0 pour la première valeur de l'énumération, puis incrémentées de 1 pour la valeur suivante.

Déclarer un Enum avec une valeur numérique

Par défaut, si une énumération ne reçoit aucune valeur, elle la considère comme un nombre commençant à 0. L'exemple suivant montre une énumération avec une valeur numérique.

enum Directions {
North = 0,
South = 1, 
East =2,
West =3
}

Vous pouvez également attribuer une valeur de départ à l'énumération et les valeurs d'énumération suivantes obtiendront les valeurs incrémentées. Par exemple:

enum Directions {
North = 5,
South, // will be 6
East, // 7
West // 8
}

Maintenant, la valeur enum Nord commence par 5, donc Sud aura la valeur 6, Est = 7 et Ouest = 8.

Vous pouvez également attribuer les valeurs de votre choix au lieu de prendre celles par défaut. Par exemple:

enum Directions {
North = 5,
South = 4,
East = 6,
West = 8
}

Comment accéder à une Enum ?

L'exemple suivant montre comment utiliser Enum dans votre code :

enum Directions {
    North,
    South,
    East,
    West
}

console.log(Directions.North); // output is  0
console.log(Directions["North"]); // output is 0
console.log(Directions[0]); //output is North

Le code compilé en javascript est le suivant :

var Directions;
(function (Directions) {
    Directions[Directions["North"] = 0] = "North";
    Directions[Directions["South"] = 1] = "South";
    Directions[Directions["East"] = 2] = "East";
    Directions[Directions["West"] = 3] = "West";
})(Directions || (Directions = {}));
console.log(Directions.North);
console.log(Directions["North"]);
console.log(Directions[0]);

Depuis que Javascript ne prend pas en charge les énumérations, il convertit l'énumération en fonctions auto-invoquées comme indiqué ci-dessus.

Déclarer une énumération avec une valeur de chaîne

Vous pouvez attribuer les valeurs de chaîne de votre choix, comme indiqué dans l'exemple ci-dessous :

Mise en situation :

enum Directions {
    North = "N",
    South = "S",
    East = "E",
    West = "W"
}

console.log(Directions.North); // output is N
console.log(Directions["North"]); // output is N
console.log(Directions[0]); // output is North

Le code compilé en javascript est le suivant :

var Directions;
(function (Directions) {
    Directions["North"] = "N";
    Directions["South"] = "S";
    Directions["East"] = "E";
    Directions["West"] = "W";
})(Directions || (Directions = {}));
console.log(Directions.North);
console.log(Directions["North"]);
console.log(Directions[0]);

Quels sont les modules dans TypeScript?

Les fichiers créés dans TypeScript avoir un accès global, ce qui signifie que les variables déclarées dans un fichier sont facilement accessibles dans un autre fichier. Cette nature globale peut provoquer des conflits de code et des problèmes d’exécution au moment de l’exécution. Vous disposez d'une fonctionnalité de module d'exportation et d'importation qui peut être utilisée pour éviter les conflits de variables globales et de fonctions. Cette fonctionnalité est disponible dans JavaScript avec la version ES6 et également pris en charge dans TypeScript.

Pourquoi avez-vous besoin de modules dans TypeScript?

L'exemple suivant montre le problème sans modules :

Exemple test1.ts

let age : number = 25;

Vous avez défini un âge variable de type numéro dans test1.ts.

Exemple test2.ts

Dans le fichier test2.ts, vous pouvez facilement accéder à la variable âge défini dans test1.ts et modifiez-le également comme indiqué ci-dessous :

age = 30; // changed from 25 to 30.
let _new_age = age;

Le cas ci-dessus peut donc créer de nombreux problèmes car les variables sont disponibles globalement et peuvent être modifiées.

Avec formation vidéo, le code écrit reste local dans le fichier et n'est pas accessible en dehors de celui-ci. Pour accéder à quoi que ce soit du fichier, il doit être exporté à l’aide du mot-clé export. It est utilisé lorsque vous souhaitez que la variable, la classe, la fonction ou l'interface soit utilisée dans un autre fichier. Importer est utilisé lorsque vous souhaitez également accéder à la variable, à la classe, à l'interface ou à la fonction exportée. Ce faisant, le code écrit reste intact dans le fichier, et même si vous définissez les mêmes noms de variables, ils ne sont pas mélangés et se comportent localement par rapport au fichier où ils sont déclarés.

Utilisation de l'exportation et de l'importation

Il existe de nombreuses façons d’exporter et d’importer. Nous discuterons donc ici de la syntaxe qui est la plus utilisée.

La syntaxe pour l'import et l'export 1 :

export  nameofthevariable or class name or interface name etc

//To import above variable or class name or interface you have to use import as shown below:
 

Import {nameof thevariable or class name or interfacename} from "file path here without.ts"

Voici un exemple fonctionnel utilisant l'exportation et l'importation.

Mise en situation :

test1.ts

export let age: number = 25;

Le mot-clé d'exportation est utilisé pour partager la variable d'âge dans un autre fichier.

test2.ts

import { age } from "./test1"
let new_age :number = age;

Le mot-clé d'importation est utilisé pour accéder au âge variable, et vous devez spécifier l'emplacement du fichier comme indiqué ci-dessus.

Syntaxe pour l'import et l'export 2 :

Il existe une autre façon d'exporter et d'importer et la syntaxe correspondante est la suivante :

export = classname;

import classname = require(“file path of modulename”)

Lorsque vous utilisez exporter = pour exporter votre module, l'importation doit utiliser require("chemin du fichier du nom du module") pour l'importer.

Voici un exemple fonctionnel illustrant le cas ci-dessus :

Client.ts

class Customer {
    name: string;
    age: number;

    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }

    getName(): string {
        return this.name;
    }
}

export = Customer;

testClient.ts

import Customer = require("./Customer");

let a = new Customer("Harry", 30);
alert(a.getName());

Chargeur de modules

Les modules ne peuvent pas fonctionner seuls, vous avez donc besoin d'un chargeur de module pour localiser les dépendances d'importation comme vous l'avez vu dans TypeScript exemples présentés ci-dessus. Le chargeur de module disponible est CommonJS pour que nodejs et Require.js s'exécutent dans le navigateur.

Pour compiler du code à l'aide du module CommonJS, utilisez la commande suivante :

tsc --module commonjs testCustomer.ts

Pour compiler du code à l'aide du module Requirejs, utilisez la commande suivante :

tsc --module amd testCustomer.ts

Les fichiers dépendants seront convertis en fichier js avec la commande ci-dessus.

Exemple de testCustomer.ts à testCustomer.js en utilisant Requirejs

define(["require", "exports", "./Customer"], function (require, exports, Customer) {
    "use strict";
    exports.__esModule = true;
    var a = new Customer("Harry", 30);
    alert(a.getName());
});

Exemple Customer.ts vers Customer.js en utilisant Requirejs

define(["require", "exports"], function (require, exports) {
    "use strict";
    var Customer = /** @class */ (function () {
        function Customer(name, age) {
            this.name = name;
            this.age = age;
        }
        Customer.prototype.getName = function () {
            return this.name;
        };
        return Customer;
    }());
    return Customer;
});

Pour le tester à l'aide de require.js, vous devez créer un fichier appelé main.js, qui fait référence aux dépendances comme indiqué.

Voici la structure des dossiers :

src/
    Customer.js
    testCustomer.js
    main.js
    require.js  // you can get this file from github or npm install requirejs
    test.html

main.js

define(function (require) {
    var customer = require("./Customer");
    var testCustomer = require("./testCustomer");
});

test.html

<!DOCTYPE html>			
<html>			
<head>			
    <title>TypeScript Module testing using Requirejs</title>			
    <script data-main="main" src="require.js"></script>			
</head>			
<body>			
    <h3>Testing modules using Requirejs</h3>			
</body>			
</html>

Espaces de noms dans TypeScript

L'espace de noms contient essentiellement une collection de classes, d'interfaces, de variables et de fonctions réunies dans un seul fichier.

Syntaxe de l'espace de noms

namespace name{

export class {
}

export interface {
}

export const constname;

}

Le code associé est disponible sous un seul espace de noms.

Exemple fonctionnel d'espace de noms : testnamespace.ts

namespace StudentSetup {

    export interface StudDetails {
        name: string;
        age: number;
    }

    export function addSpace(str) { // will add space to the string given
        return str.split("").join(" ");
    }

    export class Student implements StudDetails {
        name: string;
        age: number;

        constructor(studentdetails: StudDetails) {
            this.name = studentdetails.name;
            this.age = studentdetails.age;
        }

        getName(): string {
            return this.name;
        }
    }
}

Le nom de l'espace de noms est Configuration des étudiants, vous avez ajouté une interface StudDetails , la fonction addSpace et une classe appelée Student.

Accéder à l'espace de noms

Voici le code dans lequel vous utilisez l'espace de noms Configuration des étudiants.

testStudentSetup.ts

let a = new StudentSetup.Student({ name: "Harry", age: 20 });

console.log("The name is :" + StudentSetup.addSpace(a.getName()));

La classe, l'interface, une fonction disponible dans un espace de noms doit être référencée en utilisant le nom de l'exemple d'espace de noms StudentSetup.addSpace pour accéder à la fonction, StudentSetup.Student pour accéder au cours.

Vous pouvez compiler les deux fichiers en un seul js comme indiqué ci-dessous :

tsc --outFile namespace.js testnamespace.ts  testStudentSetup.ts

Vérifiez la sortie dans l'invite de commande à l'aide de la commande ci-dessous :

node namespace.js

Il affichera la sortie comme :

The name is: H a r r y

Déclarations ambiantes dans TypeScript

TypeScript vous permet d'utiliser des fichiers javascript tiers à l'aide de la déclaration ambiante. L'avantage de cette fonctionnalité est que vous n'avez pas besoin de réécrire et pourtant d'utiliser toutes les fonctionnalités de la bibliothèque dans TypeScript.

Syntaxe ambiante

Pour déclarer le module ambiant :

declare module moduleName {
   //code here
}

Le fichier ambiant doit être enregistré sous :

filename.d.ts

Pour utiliser le fichier nom de fichier.d.ts dans votre .ts, vous devez le référencer comme suit :

/// <reference path="filename.d.ts"/>

La déclaration de type ambiant dans TypeScript aura une référence à la bibliothèque tierce et redéclarera les fonctions requises avec son propre type. Par exemple, supposons que vous ayez une petite bibliothèque javascript, comme illustré ci-dessous :

Parties tierces JavaFichier de script : testString.js

Exemple : testString.js

var StringChecks = {
    isString: function (str) {
        return typeof str === "string";
    },

    convertToUpperCase: function (str) {
        return str.toUpperCase();
    },

    convertToLowerCase: function (str) {
        return str.toLowerCase();
    },

    convertToStringBold: function (str) {
        return str.bold();
    }
};

Vous disposez d'un objet appelé StringChecks qui a des fonctions telles que isString, convertToUpperCase, convertToLowerCase et converToStringBold.

Création du module Ambient dans TypeScript

Nous allons maintenant créer un module ambiant qui fera référence aux fonctions js ci-dessus et ajoutera également une vérification de type selon nos exigences.

Nom du fichier : tstring.d.ts

declare module TestString {

    export interface StringsFunc {
        isString(str: string): boolean;
        convertToUpperCase(str: string): string;
        convertToLowerCase(str: string): string;
        convertToStringBold(str: string): string;
    }
}

declare var StringChecks: TestString.StringsFunc;

Vous devez définir un nom de module comme TestString et avoir exporté l'interface StringsFunc.

isString(str: string): booléen

=> Cela prendra le paramètre sous forme de chaîne et le type de retour sera booléen. Lors de l'utilisation dans votre fichier .ts, au cas où vous transmettriez le paramètre sous forme de nombre ou autre chose qu'une chaîne, cela vous donnera une erreur de type de compilation.

convertToUpperCase(str:string): chaîne

=> Cela prendra l'argument sous forme de chaîne et renverra une chaîne. Il en va de même pour convertToLowerCase(str: chaîne)
: chaîne; et convertToStringBold(str: chaîne): chaîne
;

Puisque dans le fichier javascript vous avez le nom de l'objet comme StringChecks, nous devons finalement faire référence à la même chose dans le fichier .d.ts, ce qui se fait comme :

declare var StringChecks: TestString.StringsFunc;

Utilisation du module Ambient dans TypeScript

Voici maintenant le fichier test.ts où sera utilisé le fichier ambiant tstring.d.ts

Exemple : test.ts

/// <reference path="tstring.d.ts"/>
let str1 = StringChecks.isString("Hello World");
console.log(str1);
let str2 = StringChecks.convertToUpperCase("hello world");
console.log(str2);
let str3 = StringChecks.convertToLowerCase("HELLO");
console.log(str3);
let str4 = StringChecks.convertToStringBold("Hello World");
console.log(str4);

Compiler TypeScript tsc test.ts à test.js

/// <reference path="tstring.d.ts"/>
var str1 = StringChecks.isString("Hello World");
console.log(str1);
var str2 = StringChecks.convertToUpperCase("hello world");
console.log(str2);
var str3 = StringChecks.convertToLowerCase("HELLO");
console.log(str3);
var str4 = StringChecks.convertToStringBold("Hello World");
console.log(str4);

Vous pouvez maintenant utiliser test.js dans un fichier HTML ainsi que le fichier de bibliothèque testString.js

<html>			
<head>			
    <title>Test TypeScript Ambient</title>			
    <script src="testStrings.js"></script>			
    <script src="test.js"></script>			
</head>			
<body>			
</body>			
</html>

Voici le résultat affiché dans la console :

true			
HELLO WORLD			
hello			
<b>Hello World</b>

TypeScript Historique

Voyons les monuments importants de l'histoire de TypeScript:

Après deux ans de développement interne chez Microsoft. TypeScript 0.9, sorti en 2013
Prise en charge supplémentaire pour les génériques TypeScript 1.0 a été publié lors de la version 2014
En juillet 2014, un nouveau TypeScript un compilateur est arrivé qui est cinq fois plus rapide que la version précédente.
En juillet 2015, support des modules ES6, mot-clé namespace, pour, bien sûr, décorateurs.
En novembre 2016, une fonctionnalité ajoutée telle que les types de clé et de recherche des types mappés, ainsi que le repos.
Le 27 mars 2018, les types conditionnels, la clé améliorée avec les types d'intersection, ont été ajoutés dans le TypeScript.

Pourquoi utiliser TypeScript?

Voici les avantages/avantages importants de l’utilisation TypeScript

Projet de grande envergure et complexe JavaLes scripts sont difficiles à coder et à maintenir.
TypeScript aide beaucoup à l'organisation du code tout en éliminant la plupart des erreurs lors de la compilation.
TypeScript prend en charge les bibliothèques JS et la documentation API
Il s'agit d'un langage de script éventuellement typé
TypeScript Le code peut être converti en clair JavaCode de script
Meilleures techniques de structuration du code et de programmation orientée objet
Permet une meilleure prise en charge des outils de temps de développement
Il peut étendre le langage au-delà des décorateurs standards, async/wait

Qui utilise TypeScript?

Voici quelques applications les plus courantes de TypeScript:

L'équipe angulaire utilise TypeScript.
Installation de NodeJS et NPM
TypeScript en un clic
Compiler TypeScript coder pour Javascript
Exécuter du code à l'aide de Nodejs
Exécution Javascript dans le navigateur
Compiler TypeScript coder pour Javascript en utilisant la version EcmaScript
Vous pouvez facilement compiler du code écrit en TypeScript à JavaScript utilisant NodeJS.
Donc travailler avec TypeScript vous devez d'abord télécharger et installer NodeJS.

Résumé

TypeScript est un sur-ensemble de JavaScénario. TypeScript est un pur langage de programmation orienté objet qui prend en charge les classes, les interfaces, etc.
TypeScript prend en charge toutes les fonctionnalités Ecmascript publiées et les développeurs peuvent les utiliser lors du codage.
Les variables sont utilisées pour stocker des valeurs et la valeur peut être une chaîne, un nombre, une valeur booléenne ou une expression.
In TypeScript, le type d'une variable est défini uniquement au début et tout au long de l'exécution, il doit conserver le même type. Toute modification entraînera une erreur de compilation lors de la compilation en javascript.
Un tableau dans TypeScript est un type de données dans lequel vous pouvez stocker plusieurs valeurs.
La classe est une nouvelle fonctionnalité ajoutée à partir d'ES6, donc plus tôt dans JavaLa fonctionnalité de type de classe de script a été essayée à l'aide d'une fonction avec une fonctionnalité de prototype pour réutiliser le code.
TypeScript prend en charge les modificateurs d'accès publics, privés et protégés à vos méthodes et propriétés.
L'une des caractéristiques essentielles de TypeScript ce sont les interfaces. L'interface est un ensemble de règles définies qui doivent être implémentées par l'entité qui l'utilise.
Les fonctions sont un ensemble d'instructions exécutées pour exécuter une tâche.
TypeScript Enum est un objet qui possède une collection de valeurs liées stockées ensemble.

Tu pourrais aimer:

Qu’est ce qu' TypeScript?

Comment télécharger et installer TypeScript

Compiler TypeScript coder pour Javascript

Exécution Javascript utiliser Nodejs

Compiler TypeScript coder pour Javascript en utilisant la version EcmaScript

ARTICLES LIÉS

Variables dans TypeScript

Déclaration de variables à l'aide de var

Déclaration de variables à l'aide de let

Déclaration de variables à l'aide de const

Tapez dans TypeScript

Numéro

Chaîne

Boolean

Toutes

vide

TypeScript tableau

Déclarer et initialiser un tableau

Différentes façons d'accéder aux éléments d'un tableau

En utilisant TypeScript pour la boucle

Utiliser la boucle for-in

Utiliser la boucle for-of

Utilisation de la boucle foreach

TypeScript Méthodes de tableau

propriété length

Revautre méthode

Méthode de tri

Méthode pop

Shift méthode

Méthode push

méthode concat

Exemple de propriété de longueur

Exemple de méthode inverse

Exemple de méthode de tri

Exemple de méthode pop

Exemple de méthode de décalage

Exemple de méthode push

Exemple de méthode concat

Classe en TypeScript

Définir une classe dans TypeScript

Exemple : un exemple fonctionnel sur Class

Constructeur dans un TypeScript Classe

Méthodes à l'intérieur d'un TypeScript Classe

Création d'une instance de classe dans TypeScript

Compilation TypeScript Classe à Javascénario

Héritage de classe

Syntaxe d'héritage de classe :

Modificateurs d'accès dans TypeScript

Interface dans TypeScript

Syntaxe d'une interface dans TypeScript

Utilisation de l'interface sur une fonction comme type de retour

Interface comme paramètre de fonction

Interface d’implémentation de classe

Fonctions dans TypeScript

Appeler la fonction : ajouter

Paramètres facultatifs d'une fonction

Attribuer des valeurs par défaut aux paramètres

Paramètres de repos

Fonctions de flèche

A quoi sert la fonction flèche ?

TypeScript Enums

Comment déclarer un Enum ?

Déclarer un Enum avec une valeur numérique

Comment accéder à une Enum ?

Déclarer une énumération avec une valeur de chaîne

Quels sont les modules dans TypeScript?

Pourquoi avez-vous besoin de modules dans TypeScript?

Utilisation de l'exportation et de l'importation

La syntaxe pour l'import et l'export 1 :

Syntaxe pour l'import et l'export 2 :

Chargeur de modules

Exemple de testCustomer.ts à testCustomer.js en utilisant Requirejs

Exemple Customer.ts vers Customer.js en utilisant Requirejs

Espaces de noms dans TypeScript

Syntaxe de l'espace de noms

Accéder à l'espace de noms

Déclarations ambiantes dans TypeScript

Syntaxe ambiante

Pour déclarer le module ambiant :

Le fichier ambiant doit être enregistré sous :