Initiation au langage de programmation
TypeScript
Khadime Wade Ingénieur Génie Logiciel
Contenu de la section
• Variables, Types de base et Opérateurs
• Les Structures de Contrôle
• Les Fonctions
• Les tableaux et Collections
• Programmation Orientée Objet
• Programmation Asynchrone
• Les Espaces de nom et les Modules
• Les décorateurs
Initiation à TypeScript
TypeScript est un langage de programmation libre et open source
• développé par Microsoft qui a pour but d'améliorer et de sécuriser
la production de code JavaScript.
C'est un sur-ensemble de JavaScript (c'est-à-dire que tout code
• JavaScript correct peut être utilisé avec TypeScript).
Le code TypeScript est transcompilé en JavaScript, pouvant ainsi être
• interprété par n'importe quel navigateur web ou moteur JavaScript.
Q
Q
• a
Installer TypeScript
Configuration du workSpace
• Créer dans le dossier de travail un sous-dossier nommé
exemple1 ou avec le nom de votre choix et ouvrez le dans
visual studio code
• Créer un ficher [Link] et un fichier [Link] où vous
importerez le fichier [Link]
• Lancer la commande de transcompilation dans le dossier
exemple1 avec l’option –w
• Autre alternative à préférer: pour la configuration avec
déploiement sur serveur et utilisation fichiers de
configuration à la section avant les décorateurs
Q
• a
Q
• a
Q
• a
Q
• a
Vérifier si vous avez lancé la
commande npm install –g typescript
Q
• a
Q
• a
Q
• a
Q
• a
Q
• a
Le fichier JavaScript issu de la
transcompilation du fichier
TypeScript
Q
• a
Lancer la commande tsc avec l’option –w qui fera
que le fichier typecript sera automatiquement
transcompilé à chaque fois que des changements
seront détectés
Q
• a
chaque fois, il faut installer un serveur
Configuration possible du projet utilisant les fichiers de
configuration et un serveur
• Lancer dans le dossier du projet la commande npm init pour générer le fichier de
configuration [Link]
• Ajouter la ligne "start":"lite-server" dans la partie script du fichier [Link]
• Installer le serveur lite-server et le démarrer npm install –g lite-server
• Executer la commande tsc --init pour générer le fichier de configuration
[Link] file.
• Le fichier [Link] : contient l’ensemble des dépendances
(genre [Link] sous java) de l’application
• Le fichier [Link] spécifie les fichiers racine et les options
Q
• a
Q
• a
Q
• a
Q
• a
Q
• a
Q
• a
Q
• a
Q
• a
Q
• a
Q
• a
Q
• a
Q
• a
Q
Variables, Types de base et Opérateurs
Contenu de la section
• Variables, Types de base et Opérateurs
• Les Structures de Contrôle
• Les Fonctions
• Les tableaux et Collections
• Programmation Orientée Objet
• Programmation Asynchrone
• Les Espaces de nom et les Modules
• Les décorateurs
Initiation à TypeScript: déclaration des variables
• TypeScript suit les mêmes règles que JavaScript pour les
déclarations de variable. Les variables peuvent être déclarées en
utilisant: var, let et const.
• Déclaration avec var : Les variables dans TypeScript peuvent être
déclarées à l'aide du mot clé var, comme dans JavaScript. Les
règles de détermination de la portée restent les mêmes qu'en
JavaScript.
Initiation à TypeScript: Déclaration des variables
• Déclaration avec let et const pour résoudre les problèmes liés
aux déclarations var, ES6 a introduit deux nouveaux types de
déclarations de variable en JavaScript, à l'aide des mots-clés let
et const. TypeScript, étant un sur-ensemble de JavaScript, prend
Initiation à TypeScript: les types de base
Initiation à TypeScript: les types de base
Initiation à TypeScript: les types de base
• Pour que les programmes soient utiles, nous devons être
capables de travailler avec certaines des types de données :
boolean, number, string, array, tuple, enum, any, void, null and
undefined, never, object, etc. Dans TypeScript.
• Ce sont les mêmes types qu’en JavaScript.
Initiation à TypeScript: les types de base
Méthodes associées au type number
Initiation à TypeScript: les types de base
Méthodes associées au type String
Développement Web et Mobile avec les Frameworks Angular
Interpolation de chaînes de caractères
Q
Initiation à TypeScript: les types de base
• a
Développement Web et Mobile avec les Frameworks Angular
Q
Initiation à TypeScript: les types de base – Les Objets
• a
Développement Web et Mobile avec les Frameworks Angular
Q
• a
Développement Web et Mobile avec les Frameworks Angular
Initiation à TypeScript: les types de base
• enum : Comme dans les langages objet comme C#, une enum est un moyen de définir un ensemble de
constantes nommées.
• any : Normalement, vous avez utilisé ce type si vous développez en TypeScript. Il est possible
d’utiliser ce type pour remplacer n’importe quel autre type:
Initiation à TypeScript: les types de base Types
multiples avec Union
Opérateurs
• Opérateurs d'incrémentation et de décrémentation ("++", "--")
• Opérateurs binaires ("+", "-", "/", "*", "%","**")
• Opérateurs bit à bit ("~" , "&", "|", "^", "<<", ">>")
• Opérateurs de comparaison ("==", "!=", ">", "<", "<=" , "> =")
• Opérateurs logiques ("&&", "||", "!")
• Opérateurs conditionnels ("??", "?:", "??=")
L'opérateur conditionnel ??
• expr1 ?? expr2
• Si expr1 est non-nulle, retourne savaleur. Sinon expr2 est évaluée
est retournée
L'opérateur d'affectation conditionnelle ??=
• TypeScript propose des opérateurs pratiques pour traiter les
valeurs qui peuvent être nulles. L'un est l'opérateur d'affectation
??=, qui affecte une valeur à une variable uniquement si cette
variable est actuellement nulle:
L'opérateur d'affectation conditionnelle ??=
Les Structures de Contrôle
Les Structures de Contrôle dans TypeScript
If… else Boucle Boucle
Et Switch for while
Structures de
do
for…in contrôle dans
while
TypeScript
For Elvis
for…of operator
each
Initiation à TypeScript : les structures
conditionnelles : if
Initiation à TypeScript : les structures
conditionnelles : elvis operator
Initiation à TypeScript : les structures
conditionnelles : switch
Initiation à TypeScript : les structures itératives :
for…each
Initiation à TypeScript : les structures itératives :
for, for…of, for…in
Initiation à TypeScript : les structures itératives :
while et do… while
Q
Les Fonctions
Initiation à TypeScript: les fonctions
• Séquence d'instructions réalisant un calcul ou une tâche.
• Permet de découper un problème global en plusieurs éléments plus
simples et réutilisables.
• La syntaxe suivante est une des manières de définir une fonction en
TypeScript
Initiation à TypeScript: les Paramètres de fonctions
Paramètres de fonctions optionnels avec "?"
Q fonctions fléchées ou Lambda Functions
Les
• Une expression de fonction fléchée (arrow function en anglais)
permet d’avoir une syntaxe plus courte que les expressions de
fonction et ne possède pas ses propres valeurs pour this,
arguments, super, ou [Link].
• Les fonctions fléchées sont souvent anonymes et ne sont pas
destinées à être utilisées pour déclarer des méthodes.
Q fonctions fléchées ou Lambda Functions
Les
Q
Les tableaux et Collections
Les Collections
• Une collection est un objet qui représente un groupe d'objets,
appelés éléments. Les ittérables sont une sorte de collection.
• Une collection peut être vide ou contenir de nombreux éléments.
Selon l'objectif, les collections peuvent avoir différentes structures
et implémentations. Voici quelques-uns des types de collections les
plus courants:
• List: Utilisé pour lire les éléments par leurs index.
• Set: Utilisé pour contenir des éléments qui ne peuvent apparaître
qu'une seule fois.
• Map: Utilisé pour lire des éléments à l'aide d'une clé.
Initiation à TypeScript: les tableaux avec [] et ou
Array<elemType>
• Array : Comme en JavaScript, les tableaux en TypeScript sont
définis par []. Il y a également un autre moyen de les définir avec
Array<type>:
let list: number[] = [1, 2, 3];
let list: Array<number> = [1, 2, 3];
Q
• a
Méthodes associées aux Tableaux
[Link]
Q
• a
Initiation à TypeScript: Les collections Les Maps
• L'objet Map est une simple paire clé / valeur. Les clés et les
valeurs d’un Map peuvent être de n'importe quel type. Un Map
est une collection dynamique.
• En d'autres termes, Maps peut croître et se réduire au moment
de l'exécution
• Un Map peut être déclarés en utilisant un constructeur
Q
• a
Q
• a
Les objets
• Un objet est une instance qui contient un ensemble de paires clé
/ valeur. Les valeurs peuvent être des valeurs scalaires ou des
fonctions ou même un tableau d'autres objets. La syntaxe est
donnée ci-dessous
Q
• a
Q
Programmation Orientée Objet
Initiation à TypeScript: Programmation
orientée objet - Notions de classe
• TypeScript est un langage orienté objet. Il prend en
charge les fonctionnalités de programmation orientée
objet comme les classes, les interfaces, etc. Une classe
en termes de POO est un modèle pour la création
d'objets. Une classe encapsule les données de l'objet.
TypeScript fournit un support intégré pour ce concept
appelé classe.
• Utilisez le mot-clé class pour déclarer une classe dans
TypeScript. Une définition de classe commence par le
mot-clé class suivi du nom de la classe; et le corps de la
classe entouré par une paire d'accolades. La syntaxe est
donnée cicontre.
Q
• a
Q
• a
Q
• a
Q
• a
Initiation à TypeScript: Les classes - Visibilités des
attributs et Accesseurs
• public: Par défaut, tous les membres d'une classe dans TypeScript
sont publics. Tous les membres du public sont accessibles
n'importe où sans aucune restriction.
• private: Le modificateur d'accès privé garantit que les membres
de la classe sont visibles uniquement pour cette classe et ne sont
pas accessibles en dehors de la classe conteneur.
• protected: Le modificateur d'accès protégé est similaire au
modificateur d'accès privé, sauf que les membres protégés sont
accessibles à l'aide de leurs classes dérivées.
Q
• a
Développement Web et Mobile avec les Frameworks Angular
Q
• a
Initiation à TypeScript: Les classes - Héritage avec
le mot clé extends
Q
• a
Q
• a
Q
• a
