TypeScript Tutoriel : Qu’est-ce qu’une interface, une énumération ou un tableau ?

Qu'est-ce que le TypeScript?

TypeScript est un sur-ensemble de JavaScénario. TypeScript est un langage de programmation orienté objet qui prend en charge les classes, les interfaces, et plus encore. C'est 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 dans Node.js.

Toutes les dernières fonctionnalités publiées pour ECMAScript sont prises en charge dans TypeScriptet en outre TypeScript possède ses propres fonctionnalités orientées objet telles que les interfaces, les déclarations ambiantes et l'héritage de classes, qui facilitent le développement.ping une application de grande envergure qui serait autrement difficile à développer dans Javascénario.

La relation est unidirectionnelle. Chaque valide JavaLe fichier de script est déjà valide TypeScriptmais l'inverse n'est pas vrai, car les annotations de type n'existent que dans TypeScript et sont effacées lors de la compilation.

Pourquoi utiliser TypeScript?

Voici les principaux avantages de son utilisation TypeScript:

• Projets importants et complexes dans JavaLes scripts sont difficiles à coder et à maintenir.
• TypeScript Cela facilite grandement l'organisation du code et permet d'éliminer la plupart des erreurs lors de la compilation plutôt qu'à l'exécution.
• TypeScript Prend en charge les bibliothèques JS et la documentation API.
• Il s'agit d'un langage de script à typage optionnel, ce qui permet d'adopter les types progressivement.
• TypeScript Le code peut être converti en texte brut JavaCode script pour toute cible de navigateur.
• Il offre une meilleure structuration du code et des techniques de programmation orientée objet.
• Il permet une meilleure prise en charge des outils de développement, notamment la saisie semi-automatique et la refactorisation sécurisée.
• Il peut étendre le langage au-delà de la norme, avec des fonctionnalités telles que les décorateurs.

Le principal avantage pratique réside dans la prise en charge par l'éditeur. Le compilateur connaissant la structure de chaque valeur, un éditeur peut renommer une propriété dans l'ensemble d'un projet et signaler chaque occurrence de non-correspondance.

TypeScript Histoire

Passons en revue les étapes importantes de l'histoire de TypeScript:

• Après deux ans de développement interne chez Microsoft, TypeScript La version 0.9 est sortie en 2013.
• TypeScript La version 1.0, avec une prise en charge supplémentaire des génériques, a été publiée lors de la conférence Build 2014.
• En juillet 2014, un nouveau TypeScript Le compilateur arrivé était cinq fois plus rapide que la version précédente.
• En juillet 2015, la prise en charge des modules ES6, du mot-clé namespace, de for…of et des décorateurs a été ajoutée.
• En novembre 2016, les types mappés, les types clés et de recherche, ainsi que le repos et la propagation des objets ont été ajoutés.
• Le 27 mars 2018, des types conditionnels et une fonction keyof améliorée avec des types d'intersection ont été ajoutés.
• TypeScript La version 5.0, sortie en mars 2023, a modernisé les décorateurs et réduit la taille des emballages.
• TypeScript La version 6.0 est arrivée en mars 2026 en tant que version finale basée sur JavaCode source du script.
• TypeScript La version 7.0 déplace le compilateur vers une implémentation Go native, ce qui Microsoft Il semblerait qu'il soit environ dix fois plus rapide que la version 6.0.

Qui utilise TypeScript?

TypeScript n'est plus un choix de niche. Il est à la base de plusieurs outils front-end et back-end parmi les plus utilisés, et la liste ci-dessous indique où un débutant est le plus susceptible de le rencontrer.

• Angulaire: Le framework Angular est écrit en TypeScriptet le code de l'application devrait également y être écrit.
• Projets React et Vue : Les deux écosystèmes sont des navires officiels TypeScript Les modèles, et la plupart des thèmes modernes, l'activent par défaut.
• Côté serveur Node.js : Les frameworks serveur tels que NestJS sont construits autour de TypeScript cours et décorateurs.
• Outils de l'éditeur : Visual Studio Code est en soi un grand TypeScript Le code source, c'est pourquoi sa prise en charge des langages est si complète.
• Interfaces utilisateur pour grandes entreprises : Les équipes travaillant avec de nombreux contributeurs l'adoptent pour détecter les erreurs d'intégration avant le déploiement.

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

Rendez-vous sur le site officiel de Nodejs, https://nodejs.org/en/download/Téléchargez et installez Node.js pour votre système d'exploitation. Des instructions détaillées sont disponibles dans le guide sur Comment télécharger et installer Node.js.

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

Pour vérifier si Nodejs et npm sont installés, vérifiez la version dans votre invite de commandes.

D:\typeproject>node --version
v22.14.0

D:\typeproject>npm --version
10.9.2

Toute version LTS actuelle de Node fonctionne. TypeScript Il suffit qu'une version de Node prise en charge soit nécessaire pour exécuter le compilateur.

Étape 3) TypeScript Installation

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

Cela crée le fichier 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 globalement. L'avantage d'utiliser -g est que vous pourrez utiliser TypeScript tsc Vous pouvez utiliser cette commande depuis n'importe quel répertoire, car elle est installée globalement. Si vous ne souhaitez pas l'installer, vous pouvez également l'utiliser. TypeScript Globalement, utilisez la commande ci-dessous :

npm install --save-dev typescript

Créez un dossier src\ dans le répertoire de votre projet, et à l'intérieur de src\, créez le 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 dans votre projet, vous devez utiliser le chemin d'accès de TypeScript depuis node_modules, comme indiqué, ou exécutez-le via npx :

node_modules\typescript\bin\tsc test.ts

OR

npx tsc test.ts

La commande ci-dessus créera un fichier test.js contenant le code compilé. JavaScénario.

Exemple : test.js

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

Exécution Javascript utiliser Nodejs

Nous allons maintenant exécuter test.js dans Nodejs comme suit :

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

La valeur transmise à console.log est affichée lors de l'exécution de test.js.

Exécution JavaScript dans le navigateur

Exemple :

<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 Il prend en charge toutes les fonctionnalités ECMAScript publiées, et les développeurs peuvent les utiliser lors du développement. Cependant, certaines nouvelles fonctionnalités ne sont pas compatibles avec les navigateurs plus anciens ; il peut donc être nécessaire de compiler avec une version antérieure d’ECMAScript. TypeScript propose des options de compilation qui font exactement cela.

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, le compilateur classique utilise ES3 comme cible. Pour la modifier, utilisez la commande ci-dessus.

Pour le moment, nous utiliserons ES6 comme cible :

tsc --target ES6  test.ts

test.ts à test.js

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

addnumbers(10, 20);

Le code reste inchangé, car la fonction fléchée que vous avez utilisée est une fonctionnalité ES6 et reste inchangée lors de la compilation en ES6.

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

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

Ici, la fonction fléchée est donc 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énarioApprenons donc à déclarer des variables et à leur attribuer une valeur. TypeScript.

Les variables ne peuvent pas être utilisées dans le code sans être définies. 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 utilisateurs familiers avec JavaLe script le trouvera très facilement. Dans le code moderne, laisser et const sont préférés à var, car leur portée de bloc empêche toute une catégorie de bogues.

Déclaration de variables à l'aide de var

syntaxe:

var firstname = "Roy";

Examinons-en quelques-uns. TypeScript des exemples pour comprendre le fonctionnement du mot-clé `var` et la portée des variables déclarées à l'aide de `var` var mot-clé.

Exemple 1:

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

function test() {
    var c = 1; // variable c is local and accessible only inside function test
    return k++;
}

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

Exemple 2:

var t = 0; // variable t is declared in global scope
function test() {
    var t = 10; // t is redeclared inside the function, so changes stay local
    return t;
}
test(); // will return 10
console.log(t); // will console 0

Exemple 3:

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

test(); // returns undefined. The if block did not run, yet t is still declared
        // because var declarations are hoisted to the whole function.
i++;    // value of i is incremented
test(); // since i > 0 the if block runs and the value returned is 1

Déclaration de variables à l'aide de let

Le TypeScript la syntaxe de let est la suivante :

syntaxe:

let name = "Roy";

Le fonctionnement du laisser la variable est presque identique à varmais avec une différence importante, que l'exemple ci-dessous illustre.

Exemple :

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

test(); // throws an error: Cannot find name 't'

Le dessus TypeScript L'exemple génère une erreur, mais le même code aurait fonctionné avec le var mot-clé. Variables déclarées à l'aide de laisser Ces variables ne sont disponibles que dans le bloc où elles sont déclarées. Dans cet exemple, la variable `t` n'existe que dans le bloc `if`, et non dans la fonction entière.

Il en va de même à l'intérieur de toute fonction, boucle `for`, boucle `while` ou bloc `switch`. Une variable `let` n'est accessible qu'à l'intérieur de ce bloc ; y faire référence en dehors de celui-ci provoque une erreur. C'est la principale différence entre `var` et `let`.

Déclaration de variables à l'aide de const

Le mot « const » désigne une variable constante. Elle est similaire à la variable « let », à la différence qu'une fois sa valeur assignée, elle ne peut plus être modifiée. Une déclaration de variable constante doit donc être initialisée sur la même ligne.

syntaxe:

const name = "Roy";

Exemple :

const age = "25";
age = "30"; // error: Cannot assign to 'age' because it is a constant

const total; // error: 'const' declarations must be initialized

Utilisez donc `const` lorsque vous savez que la valeur assignée ne sera pas modifiée. Notez que `const` empêche la modification de la liaison, et non la modification de l'objet qu'elle référence.

Tapez dans TypeScript

TypeScript est un langage fortement typé, tandis que JavaLe script ne l'est pas. Une variable dont la valeur est définie comme une chaîne de caractères peut être modifiée en un nombre sans aucun problème. JavaScript. La même chose n'est pas tolérée dans TypeScript. En TypeScriptLe type d'une variable est défini au début du programme et doit le conserver tout au long de l'exécution. Toute modification entraîne une erreur de compilation. JavaScénario.

Voici les types de base :

Numéro

Accepte uniquement les entiers, les nombres à virgule flottante, les fractions et les valeurs numériques similaires.

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 numériques :

àFixe() – elle convertira le nombre en chaîne de caractères et conservera le nombre de décimales indiqué à la méthode.

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

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 numériques

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 de caractères : uniquement des valeurs de type chaîne de caractères.

syntaxe:

let str :string = "hello world";

Voici quelques méthodes importantes qui peuvent être utilisées sur les types de chaînes de caractères :

• scission() – cette méthode divisera la chaîne en un tableau.
• caractère() – cette méthode renverra le caractère à l'index donné.
• Indice de() – cette méthode renverra la position de la première occurrence de la valeur qui lui est attribuée.
• remplacer() – Cette méthode prend deux chaînes de caractères. Elle recherche la première valeur dans la chaîne et, si elle est présente, la remplace par la seconde, renvoyant une nouvelle chaîne.
• réduire() – cette méthode supprimera les espaces blancs des deux côtés de la chaîne.
• substr() – cette méthode renverra une partie de la chaîne, en fonction de la position de départ et de la longueur donnée.
• sous-chaîne() – Cette méthode renvoie une partie de la chaîne, en fonction des positions de début et de fin. Le caractère en position finale est exclu.
• vers majuscule() – convertira la chaîne en majuscules.
• en minuscules() – convertira la chaîne en minuscules.

Exemple :

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 if the value does not exist
_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

Un booléen n'accepte que les valeurs logiques vrai et faux. Contrairement aux valeurs logiques simples JavaDans ce script, les chiffres 0 et 1 ne sont pas acceptés, car ils sont de type numérique.

syntaxe:

let status :boolean = true;
let isDone :boolean = false;

let bflag :boolean = 1;
// error: Type 'number' is not assignable to type 'boolean'

Toutes

syntaxe:

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

Variables déclarées à l'aide de tout Le type peut contenir une chaîne de caractères, un nombre, un tableau, un booléen ou une valeur vide. TypeScript ne générera aucune erreur de compilation, ce qui est similaire aux variables dans JavaScript. N'utilisez le type « any » que lorsque vous n'êtes pas sûr du type de valeur qui sera associé à cette variable, car il désactive toute vérification de cette valeur.

vide

Le type void est principalement utilisé comme type de retour d'une fonction qui ne renvoie rien.

syntaxe:

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

TypeScript tableau

An tableau in TypeScript Un tableau est un type de données permettant de stocker plusieurs valeurs. Apprenons à déclarer et à assigner des valeurs pour les opérations sur les tableaux. TypeScript.

Depuis que TypeScript S'agissant d'un langage fortement typé, vous devez spécifier le type de données des valeurs d'un tableau. À défaut, elles seront considérées comme étant de type quelconque.

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 with all numbers

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

let alltypes: Array<any> = [true, false, "Harry", 2000, { "a": "50", "b": "20" }]; // any type

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

Pour obtenir les éléments d'un tableau, les valeurs commencent à l'indice 0 et vont jusqu'à la longueur du tableau moins un.

let years: Array<number> = [2016, 2017, 2018, 2019];
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 un TypeScript pour boucle, comme indiqué ci-dessous.

L'utilisation de TypeScript pour la boucle

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

Sortie :

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]);
}

Sortie :

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

Sortie :

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

Sortie :

2016
2017
2018
2019

TypeScript Méthodes de tableau

Le TypeScript L'objet tableau possède de nombreuses propriétés et méthodes qui facilitent et optimisent sa manipulation. Vous pouvez obtenir la valeur d'une propriété en spécifiant `nom_du_tableau.propriété`, et le résultat d'une méthode en spécifiant `nom_du_tableau.méthode()`.

Exemple de propriété de longueur

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

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

Exemple de méthode inverse

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

Exemple de méthode de tri

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

Exemple de méthode pop

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

Exemple de méthode de décalage

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

Exemple de méthode push

let years: Array<number> = [2015, 2016, 2017, 2018, 2019];
console.log(years.push(2020)); // 6, the new length
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 dans JavaLe script est également possible dans TypeScriptLa classe est une fonctionnalité ajoutée à partir d'ES6. Auparavant, JavaUn script, offrant des fonctionnalités similaires à celles d'une classe, a été implémenté grâce à une fonction dotée de méthodes prototypes permettant la réutilisation du code. L'utilisation d'une classe permet à votre code de se rapprocher de celui de langages tels que… Java, C# et Python, où le code est facilement réutilisable.

Définir une classe dans TypeScript

Voici la syntaxe de base des classes 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 Students. Elle possède les propriétés age, name et roll_no.

Constructeur dans un TypeScript Classe

La classe Students définie ci-dessus possède 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 prend en paramètres l'âge, le nom et le numéro d'étudiant. Le constructeur initialise les propriétés lors de l'instanciation de la classe. On accède aux propriétés via… ceci. Un mot-clé, par exemple `this.age` pour accéder à l'âge et `this.roll_no` pour accéder au numéro d'inscription. Vous pouvez également définir un constructeur par défaut, comme indiqué ci-dessous :

constructor () {}

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

Dans la classe Students, il existe des méthodes définies, par exemple getRollNo(), getName() et getAge(), qui renvoient les valeurs des 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 d'une classe dans TypeScript

In TypeScriptPour créer une instance d'une classe, vous utilisez l'opérateur `new`. Lorsque vous créez une instance avec `new`, vous obtenez un 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 d'un TypeScript Classe à Javascénario

Vous pouvez utiliser la commande tsc comme indiqué ci-dessous pour compiler en JavaScénario.

Command: tsc  Students.ts

La sortie du JavaLe code du script compilé est présenté ci-dessous :

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 JavaDans ce script, la classe est convertie en une fonction auto-invoquée.

Héritage de classe

Les classes peuvent être héritées en utilisant le S'étend 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 de 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 Étudiant hérite de Personne, et l’objet créé à partir de la classe Étudiant peut accéder à ses propres méthodes et propriétés ainsi qu’à celles de la classe dont elle hérite.

Ajoutons maintenant quelques modifications à la classe ci-dessus.

Exemple :

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);
        this.tmarks = tmarks; // the derived property must be assigned too
    }
    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

La différence par rapport à l'exemple précédent réside dans le constructeur défini dans la classe Student. Ce constructeur prend les mêmes paramètres que la classe de base, ainsi que d'éventuels paramètres supplémentaires qui lui sont propres.

In TypeScript Vous devez appeler `super` avec tous les paramètres de la classe de base. Cet appel doit être la première instruction du constructeur, car `super` exécute le constructeur de la classe dérivée. Toute propriété déclarée par la classe dérivée, comme `tmarks`, doit ensuite être assignée explicitement ; sinon, `getMarks` renverra `undefined`.

Modificateurs d'accès dans TypeScript

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

Dans le cas des modificateurs d'accès privés, les membres ne sont pas accessibles depuis l'objet de la classe et sont destinés à un usage interne uniquement. Ils ne sont pas accessibles à une classe héritée.

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

Exemple :

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

Interface dans TypeScript

L'une des caractéristiques essentielles de TypeScript Les interfaces sont des ensembles de règles que l'entité qui les utilise doit respecter. Cette entité peut être une classe, une fonction ou une variable. Une interface est composée de propriétés et de méthodes. On peut indiquer qu'une propriété ou une méthode est optionnelle en utilisant le symbole « ? ». L'interface impose un typage fort à toute fonction, variable ou classe qui l'implémente.

Syntaxe d'une interface dans TypeScript

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

Vous avez défini une interface nommée Dimension qui possède les propriétés width et height, toutes deux de type chaîne de caractères.

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

Exemple :

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

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

La signature de l'interface Dimension comporte une largeur et une hauteur, toutes deux obligatoires. Toute propriété manquante ou tout type modifié entraînera une erreur de compilation. JavaScénario.

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

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

Voyons maintenant comment utiliser une interface avec une fonction.

Utiliser une interface sur une fonction comme type de retour

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 utilisée comme type de retour de la fonction getDimension(). La valeur de retour doit correspondre aux propriétés et aux types déclarés dans l'interface.

Le compilé JavaLe code du script sera le suivant :

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 levée.

Interface en tant que 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"}); // "300px-250px"

Dans l'exemple ci-dessus, vous avez utilisé l'interface Dimension comme paramètre de la fonction getDimension(). Lors de l'appel de cette fonction, le paramètre passé doit respecter les règles définies par l'interface.

Le compilé JavaLe code du script sera le suivant :

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

Classe implémentant une interface

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

Syntaxe d'une classe implémentant une interface :

class NameofClass implements InterfaceName {
}

L'exemple suivant illustre une interface fonctionnant avec une 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, toutes deux de type chaîne de caractères, et une méthode appelée getWidth() qui renvoie une chaîne de caractères.

Le compilé JavaLe code du script sera le suivant :

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 des ensembles d'instructions exécutées pour réaliser une tâche. JavaDans le script, la majeure partie du code est écrite sous forme de fonctions et celles-ci jouent un rôle majeur. TypeScript Vous disposez de classes, d'interfaces, de modules et d'espaces de noms, mais les fonctions conservent un rôle important. La différence entre une fonction dans JavaScénario et TypeScript est le paramètre et les types de retour disponibles avec un 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 la fonction ci-dessus, le nom de la fonction est add, les paramètres sont a1 et b1Les deux arguments sont de type numérique, et le type de retour est également un nombre. Si vous passez une chaîne de caractères à la fonction, une erreur de compilation sera levée lors de la compilation. JavaScénario.

Appel de la fonction : ajouter

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

Les paramètres a1 et b1 Ces paramètres sont obligatoires et leur absence entraînera une erreur. Le type des paramètres et le type de retour sont tout aussi importants et ne peuvent plus être modifiés une fois définis.

Paramètres facultatifs d'une fonction

In JavaDans un script, tous les paramètres des fonctions sont optionnels et sont considérés comme indéfinis s'ils ne sont pas fournis. Ce n'est pas le cas dans… TypeScriptUne fois les paramètres définis, vous devez les fournir. Si vous souhaitez qu'un paramètre soit facultatif, ajoutez un point d'interrogation après son nom, comme indiqué ci-dessous :

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

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

Veuillez noter que les paramètres optionnels doivent être définis en dernier. Il est impossible d'avoir un premier paramètre optionnel et un second obligatoire, car le compilateur ne saurait pas quelle valeur a été fournie.

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

À l'instar des paramètres optionnels, les paramètres initialisés par défaut doivent également être conservés à la fin de la liste des paramètres.

Paramètres de repos

Vous avez vu comment TypeScript Il gère les paramètres obligatoires, les paramètres optionnels et les paramètres de valeur par défaut. Nous allons maintenant examiner les paramètres REST. Les paramètres REST sont un groupe de paramètres optionnels définis ensemble, à 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, le paramètre rest est un tableau précédé de trois points. Ce tableau contiendra tous les arguments restants passés à la fonction.

Exemple :

let a = testFunc("Monday", "Tuesday", "Wednesday", "Thursday");
// output is 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 La syntaxe comporte également une flèche épaisse, d'où son nom.

Syntaxe de la fonction flèche :

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

À quoi sert une fonction fléchée ?

Prenons un exemple pour comprendre le cas d'utilisation d'une fonction fléchée.

Exemple :

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 avec une propriété `score` initialisée à 0, et une méthode `getScore` qui utilise en interne `setTimeout` et, après une seconde, affiche `this.score` dans les journaux. La valeur affichée est `undefined` même si `this.score` est définie et initialisée. Le problème vient de… ceci. Le mot-clé `this` est utilisé par la fonction `setTimeout`, et comme `score` n'y est pas défini, le résultat est indéfini.

On peut obtenir le même résultat à l'aide d'une fonction fléchée, 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();

Une fonction flèche n'a pas la sienne ceci.et partage plutôt celle de sa portée parente, de sorte que les variables déclarées en dehors de cette portée sont accessibles avec `this` à l'intérieur d'une fonction fléchée. Elles sont utiles en raison de leur syntaxe plus courte, ainsi que pour les fonctions de rappel, les gestionnaires d'événements et les fonctions de temporisation.

TypeScript Enums

A TypeScript Un enum est un objet qui contient une collection de valeurs liées stockées ensemble. JavaScript ne prend pas en charge nativement les énumérations. La plupart des langages de programmation tels que Java, C et C++ les énumérations de support et TypeScript les rend également disponibles. 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 avec les valeurs Nord, Sud, Est et Ouest. Les valeurs sont numérotées à partir de 0 pour la première entrée et augmentent de 1 pour chaque entrée suivante.

Déclarez une énumération avec une valeur numérique

Par défaut, si aucun élément d'une énumération n'est spécifié, il prend un nombre commençant par 0. L'exemple suivant illustre une énumération avec des valeurs numériques explicites.

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

Vous pouvez également attribuer une valeur initiale, et les membres suivants recevront des valeurs incrémentées. Par exemple :

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

Le Nord commence à 5, donc le Sud est 6, l'Est est 7 et l'Ouest est 8.

Vous pouvez également attribuer des valeurs de votre choix au lieu des valeurs 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 une énumération 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 compilé JavaLe script 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 JavaLe script ne prend pas en charge les énumérations ; le compilateur convertit l’énumération en une fonction auto-appelée, comme indiqué ci-dessus. La double affectation crée la table de correspondance inversée.ping Du numéro au nom.

Déclarez une énumération avec une valeur de chaîne.

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

Exemple :

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 undefined

Le compilé JavaLe script 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?

Fichiers créés dans TypeScript L'accès global signifie que les variables déclarées dans un fichier sont accessibles depuis un autre fichier. Cette globalité peut engendrer des conflits de code et des problèmes d'exécution. Les fonctionnalités d'exportation et d'importation de modules permettent d'éviter ces conflits. Cette fonctionnalité est apparue dans [référence manquante]. JavaScript avec la version ES6 et est également pris en charge dans TypeScript.

Pourquoi avez-vous besoin de modules dans TypeScript?

L'exemple suivant illustre 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 test2.ts, vous pouvez 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;

Cela peut engendrer de nombreux problèmes, car les variables sont accessibles globalement et peuvent être modifiées depuis n'importe où.

Avec modulesLe code écrit reste local au fichier et n'est pas accessible en dehors de celui-ci. Pour partager des éléments d'un fichier, il faut l'exporter à l'aide du mot-clé `export`. Télécharger On utilise cette méthode lorsqu'on souhaite utiliser une variable, une classe, une fonction ou une interface dans un autre fichier. Global Cette méthode est utilisée pour accéder à un élément exporté. Elle permet de conserver l'intégrité du code dans le fichier et d'éviter toute confusion entre les noms de variables utilisés, même en cas de définition de noms identiques.

Utilisation de l'exportation et de l'importation

Il existe de nombreuses méthodes d'exportation et d'importation. Nous aborderons la syntaxe la plus couramment utilisée.

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

export  nameofthevariable or class name or interface name etc

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

import {nameofthevariable or class name or interfacename} from "file path here without .ts"

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

test1.ts

export let age: number = 25;

Le mot-clé « export » est utilisé pour partager la variable « âge » avec un autre fichier.

test2.ts

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

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

Syntaxe pour l'importation et l'exportation 2 :

Il existe une autre méthode d'exportation et d'importation, dont la syntaxe est présentée ci-dessous :

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

Voici un exemple concret illustrant ce cas.

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 de manière autonome ; vous avez donc besoin d’un chargeur de modules pour localiser les dépendances d’importation, comme illustré dans le TypeScript Les exemples ci-dessus illustrent ce point. Les chargeurs de modules disponibles sont CommonJS pour Node.js et Require.js pour une exécution dans le navigateur.

Pour compiler du code au format de module CommonJS, utilisez la commande suivante :

tsc --module commonjs testCustomer.ts

Pour compiler du code au format de module Requirejs, utilisez la commande suivante :

tsc --module amd testCustomer.ts

Les fichiers dépendants seront convertis en fichiers js à l'aide de la commande ci-dessus.

Exemple de conversion de testCustomer.ts en testCustomer.js avec RequireJS

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

Exemple de conversion de Customer.ts en Customer.js avec 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 avec require.js, vous devez créer un fichier appelé main.js qui référence les 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

Un espace de noms regroupe dans un seul fichier une collection de classes, d'interfaces, de variables et de fonctions.

Syntaxe de l'espace de noms

namespace name{

export class {
}

export interface {
}

export const constname;

}

Le code correspondant 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 de l'étudiant, et vous avez ajouté une interface StudDetails, une fonction addSpace et une classe appelée Student.

Accéder à un espace de noms

Voici le code où vous utilisez l'espace de noms Configuration de l'étudiant.

testStudentSetup.ts

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

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

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

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

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

Vérifiez le résultat dans l'invite de commandes à l'aide de la commande ci-dessous :

node namespace.js

Sortie :

The name is :H a r r y

Déclarations ambiantes dans TypeScript

TypeScript vous permet d'utiliser des tiers JavaFichiers de script utilisant des déclarations ambiantes. L'avantage de cette fonctionnalité est qu'il n'est pas nécessaire de réécrire la bibliothèque, tout en conservant l'accès à toutes ses fonctionnalités avec vérification de type. TypeScript.

Syntaxe ambiante

Pour déclarer un module ambiant :

declare module moduleName {
   //code here
}

Le fichier d'ambiance doit être enregistré sous le nom :

filename.d.ts

Pour utiliser le fichier nom de fichier.d.ts Dans votre fichier .ts, vous devez y faire référence comme suit :

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

La déclaration de type ambiant dans TypeScript fait référence à la bibliothèque tierce et redéclare les fonctions requises avec leurs propres types. Par exemple, considérons le petit JavaBibliothèque de scripts présentée ci-dessous.

Parties tierces JavaFichier de script : 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 possède les fonctions isString, convertToUpperCase, convertToLowerCase et convertToStringBold.

Création d'un module ambiant dans TypeScript

Nous allons maintenant créer un module d'ambiance qui référence le JavaLes fonctions du script sont indiquées ci-dessus et des vérifications de type sont ajoutées selon les besoins.

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 définissez un module nommé TestString et exportez l'interface StringsFunc. Chaque signature indique ce que la fonction accepte et renvoie :

• isString(str: string): booléen Cette fonction prend une chaîne de caractères et renvoie une valeur booléenne. Le passage d'un nombre ou de tout autre type provoque une erreur de compilation.
• convertToUpperCase(str: chaîne): chaîne – prend une chaîne de caractères et renvoie une chaîne de caractères.
• convertToLowerCase(str: chaîne): chaîne – prend une chaîne de caractères et renvoie une chaîne de caractères.
• convertToStringBold(str: chaîne): chaîne – prend une chaîne de caractères et renvoie une chaîne de caractères.

Depuis l' JavaLe fichier de script expose le nom de l'objet StringChecks, nous faisons finalement référence à ce même nom dans le fichier .d.ts :

declare var StringChecks: TestString.StringsFunc;

Utilisation d'un module Ambient dans TypeScript

Voici le fichier test.ts qui utilise le fichier ambiant tstring.d.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);

Compilez avec tsc test.ts pour produire 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 désormais utiliser test.js dans un fichier HTML conjointement avec le fichier de bibliothèque testString.js.

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

Sortie :

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

Pour continuer, comparez directement les deux langues dans TypeScript vs Javascénario, revisit Javaméthodes de tableau de script pour les équivalents non typés utilisés ici, et étude boucles dans Javascénario et interne et externe Javascénario pour les éléments fondamentaux du navigateur sur lesquels repose la sortie compilée.

FAQ