SlideShare une entreprise Scribd logo
1  sur  65
TYPESCRIPT
Une brève histoire de Typescript
en 2010,anders hejlsberg(le créateur du typescript) a commencé à travailler sur le typescript chez
Microsoft et en 2012, la première version du typescript a été rendue publique (typescript 0.8).
Bien que la publication du Typescript ait été saluée par de nombreuses personnes à travers le
monde, en raison du manque de prise en charge par les principaux ides, elle n'a pas été
majoritairement adoptée par la communauté JavaScript.
La première version de Typescript (Typescript 0.8) a été rendue publique en octobre 2012.
La dernière version de Typescript (Typescript 3.0) a été rendue publique en juillet 2018.
Pourquoi Typescript ?
Typescript est open source.
Typescript simplifie le code JavaScript, le rendant plus facile à lire et à déboguer.
Typescript est un sur-ensemble de ES3, ES5 et ES6.
Typescript fera gagner du temps aux développeurs.
Le code Typescript peut être compilé selon les normes ES5 et ES6 pour prendre en charge le dernier
navigateur.
Typescript peut nous aider à éviter les bogues douloureux que les développeurs rencontrent couramment
lors de l'écriture de JavaScript en vérifiant le code par type.
Typescript n'est rien d'autre que JavaScript avec quelques fonctionnalités supplémentaires.
…
Caractéristiques de Typescript
Multiplateforme:Typescript fonctionne sur n'importe quelle plate-forme sur laquelle JavaScript s'exécute. Le
compilateur TypeScript peut être installé sur n'importe quel système d'exploitation tel que Windows, Mac OS et Linux.
Langage orienté objet:TypeScript fournit des fonctionnalités puissantes telles que des classes, des interfaces et des
modules. Vous pouvez écrire du code purement orienté objet pour le développement côté client et côté serveur.
Vérification de type statique: TypeScript utilise le typage statique. Ceci est fait en utilisant des annotations de type. Il
aide à la vérification de type au moment de la compilation. Ainsi, vous pouvez trouver des erreurs lors de la saisie du
code sans exécuter votre script à chaque fois. De plus, en utilisant le mécanisme d'inférence de type, si une variable est
déclarée sans type, elle sera déduite en fonction de sa valeur.
Typage statique facultatif: TypeScript permet également le typage statique facultatif si vous préférez utiliser le typage
dynamique de JavaScript.
Manipulation DOM: tout comme JavaScript, le typescript peut être utilisé pour manipuler le DOM afin d'ajouter ou de
supprimer des éléments.
Caractéristiques de l'ES 6: TypeScript comprend la plupart des fonctionnalités prévu dans ECMAScript2015 (ES 6, 7)
telles que la classe, l'interface, les fonctions fléchées, etc.
CONFIGURATION DE L’ENVIRONNEMENT
DÉVELOPPEMENT
Installez Typescript à l'aide degestionnaire de paquets node.Js(npm).
Installez le plug-in Typescript dans votre IDE (environnement de développement intégré).
TYPESCRIPT PLAYGROUND
Typescript fournit un playground en ligne https://www.Typescriptlang.Org/play pour écrire et tester
votre code à la volée sans avoir besoin de télécharger ou d'installer quoi que ce soit.
 npm install –g typescript
 tsc -v
Version blablabla.blabla
Type de données TypeScript
• Number
• String
• Boolean
• Array
• Tuple
• Enum
• Union
• Any
• Void
• Never
Déclaration de variables
Les variables peuvent être
déclarées en utilisant :
var, let, const
Type de données TypeScript - NUMBER
Type de données TypeScript - STRING
Type de données TypeScript - BOOLEAN
Notez qu'un booléen avec un B majuscule est différent d'un booléen avec un b minuscule. Le booléen
majuscule est un type d'objet tandis que le booléen minuscule est un type primitif. Il est toujours
recommandé d'utiliser booléen, le type primitif dans vos programmes. En effet, alors que JavaScript
contraint un objet à son type primitif, le système de typescript ne le fait pas. Typescript le traite comme
un type d'objet.
Type de données TypeScript - ARRAY
1. Utiliser des crochets. Cette méthode est similaire à la façon dont vous
déclareriez des tableaux en JavaScript.
2. En utilisant un type de tableau générique, tableau<type d'élément>.
Bien sûr, vous pouvez toujours initialiser un tableau comme indiqué ci-dessous,
mais vous n'obtiendrez pas l'avantage du système de type de TypeScript.
TYPE DE DONNÉES TYPESCRIPT - TUPLE
Typescript à introduit un nouveau type de données appelé tuple. Il existe d'autres types de données
tels que les nombres, les chaînes, les booléens, etc. Dans le typescript qui ne stocke qu'une valeur
de ce type de données particulier. Tuple est un nouveau type de données qui comprend deux
ensembles de valeurs de types de données différents.
Ajouter des éléments dans Tuple
Vous pouvez également déclarer un tableau de tuples.
TYPESCRIPRT TYPE DE DONNÉES - ENUM
Les énumérations sont un nouveau type de données pris en charge dans le typescript. La
plupart des langages orientés objet comme Java et C# utilisent des énumérations. Ceci est
maintenant disponible en typescript aussi.
Il existe trois types d'énumérations :
Énumération numérique
Énumération de chaîne
Énumération hétérogène
Énumération numérique
Les énumérations numériques sont des énumérations basées sur des nombres, c'est-à-dire
qu'elles stockent des valeurs de chaîne sous forme de nombres.
Les énumérations numériques peuvent inclure des membres avec une valeur numérique calculée. La
valeur d'un membre enum peut être une constante ou calculée. L'énumération suivante inclut des
membres avec des valeurs calculées.
Lorsque l'énumération inclut des membres calculés et constants, les membres d'énumération non
initiés doivent venir en premier ou après les autres membres initialisés avec des constantes
numériques.
ÉNUMÉRATION DE CHAÎNE
Les énumérations de chaîne sont similaires aux énumérations numériques, sauf que les valeurs
d'énumération sont initialisées avec des valeurs de chaîne plutôt qu'avec des valeurs numériques.
La différence entre les énumérations numériques et de chaîne est que les valeurs d'énumération
numérique sont auto-incrémentées, tandis que les valeurs d'énumération de chaîne doivent être
initialisées individuellement.
ÉNUMÉRATION HÉTÉROGÈNE
Les énumérations hétérogènes sont des énumérations qui contiennent à la fois des valeurs
de chaîne et des valeurs numériques.
Typescript - UNION
Typescript nous permet d'utiliser plus d'un type de données pour une variable ou un paramètre de fonction.
C'est ce qu'on appelle le type d'union.
TYPE DE DONNÉES TYPESCRIPT - ANY
Typescript à une vérification de type et des vérifications au moment de la compilation. Cependant, nous
n'avons pas toujours une connaissance préalable du type de certaines variables, en particulier lorsqu'il existe
des valeurs saisies par l'utilisateur à partir de bibliothèques tierces. Dans de tels cas, nous avons besoin
d'une disposition qui peut traiter du contenu dynamique.
TYPE DE DONNEES TYPESCRIPT - VOID
Semblable à des langages comme Java, void est utilisé là où il n'y a pas de type de données. Par
exemple, dans le type de retour des fonctions qui ne renvoient aucune valeur.
* Il n'y a aucun sens à assigner void à une variable, car seul null ou undefined est
assignable à void.
TYPE DE DONNEES TYPESCRIPT - NEVER
Typescript à introduit un nouveau type never, qui indique les valeurs qui ne se produiront jamais.
Le type never est utilisé lorsque vous êtes sûr que quelque chose ne se produira jamais. Par exemple, vous
écrivez une fonction qui ne reviendra pas à son point final ou lèvera toujours une exception.
DIFFÉRENCE ENTRE NEVER ET VOID
Le type void peut avoir undefined ou null comme valeur cependant never ne peut avoir aucune valeur.
En typescript, une fonction qui ne renvoie pas de valeur renvoie en fait undefined.
TYPE INFÉRENCE DANS TYPESCRIPT
il n'est pas obligatoire pour annoter le type. TypeScript déduit les types de variables lorsqu'aucune information
explicite n'est disponible sous la forme d'annotations de type.
Les types sont déduits par le compilateur TypeScript
lorsque :
•Les variables sont initialisées
•Des valeurs par défaut sont définies pour les paramètres
•Les types de retour de fonction sont déterminés
Par exemple:
Le code ci-dessus affiche une erreur car lors de la déduction des types, le typescript a déduit le type de la
variable en étant une chaîne et la variable b en tant que nombre. Lorsque nous essayons d'affecter b à a, le
compilateur se plaint en disant qu'un type numérique ne peut pas être affecté à un type chaîne.
TYPE INFÉRENCE DANS LES OBJETS COMPLEXES
Par exemple:
Dans l'exemple ci-dessus, nous avons un tableau qui a les valeurs 10, null, 30 et 40 . typescript recherche le
type le plus courant pour déduire le type de l'objet. Dans ce cas, il sélectionne celui qui est compatible avec
tous les types, c'est-à-dire Number, ainsi que null.
Prenons un autre exemple:
Ici, le tableau a des valeurs de type nombre ainsi que de type chaîne. Dans de tels cas, le compilateur de
typescript recherche le type le plus courant pour déduire le type de l'objet mais ne trouve aucun super type
pouvant englober tous les types présents dans le tableau. Dans de tels cas, le compilateur traite le type
comme une union de tous les types présents dans le tableau. Ici, le type serait (string | number), ce qui signifie
que le tableau peut contenir des valeurs de chaîne ou des valeurs numériques. C'est ce qu'on appelle le type
d'union.
TYPE ASSERTION DANS TYPESCRIPT
Il existe deux manières de faire une assertion de type dans un script typescript :
• Utilisation de la syntaxe crochet angulaire <>.
• En utilisant le mot clé as
L'assertion de type vous permet de définir le type d'une valeur et d'indiquer au compilateur de ne pas
l'inférer. C'est à ce moment que vous, en tant que programmeur, pourriez avoir un Meilleur choix type d'une
variable plutot que de déduire par lui-même. Une telle situation peut se produire lorsque vous transférez du
code à partir de JavaScript et que vous connaissez peut-être un type de variable plus précis que celui qui est
actuellement attribué. C'est similaire au cast dans d'autres langages comme C# et Java. Cependant,
contrairement à C # et Java, il n'y a pas d'effet d'exécution de l'assertion de type dans typescript.C'est
simplement une façon de laisser le compilateur typescript connaître le type d'une variable.
TYPESCRIPT - FUNCTION
Les fonctions peuvent également inclure des types de paramètres et un type de retour.
Les paramètres sont des valeurs ou des arguments passés à une fonction. Dans typescript,le
compilateur s'attend à ce qu'une fonction reçoive le nombre et le type exacts d'arguments définis dans
la signature de la fonction. Si la fonction attend trois paramètres, le compilateur vérifie que l'utilisateur a
passé des valeurs pour les trois paramètres, c'est-à-dire qu'il vérifie les correspondances exactes.
PARAMÈTRES OPTIONNELS DANS LES FONCTIONS
Tous les paramètres facultatifs doivent suivre les paramètres requis et doivent se trouver à la
fin.
Dans l'exemple ci-dessus, le deuxième nom de paramètre est marqué comme facultatif avec un point
d'interrogation ajouté à la fin. Par conséquent, la fonction greet() accepte 1 ou 2 paramètres et renvoie une
chaîne de salutation. Si nous ne spécifions pas le deuxième paramètre, sa valeur sera indéfinie.
TYPESCRIPT - SURCHARGE DE FONCTIONS
Typescript fournit le concept de surcharge de fonctions. Vous pouvez avoir plusieurs fonctions avec
le même nom mais différents types de paramètres et types de retour. Cependant, le nombre de
paramètres doit être le même.
La surcharge de fonctions avec un nombre différent de paramètres et de types portant le même
nom n'est pas prise en charge.
TYPESCRIPT - PARAMÈTRES DE REPOS
N'oubliez pas que les paramètres de repos doivent venir en dernier dans la definition de la fonction,sinon le
compilateur typescript affichera une erreur. Ce qui suit n'est pas valide.
Typescript à introduit des paramètres de repos pour accueillir facilement n nombre de paramètres.
Lorsque le nombre de paramètres que recevra une fonction n'est pas connu ou peut varier, nous pouvons
utiliser des paramètres de repos. En JavaScript, ceci est réalisé avec la variable "arguments". Cependant, avec
le typescript, nous pouvons utiliser le paramètre rest indiqué par des points de suspension ....
TYPESCRIPT - INTERFACE
L'interface est une structure qui définit le contrat dans votre application. Il définit la syntaxe des classes à
suivre. Les classes dérivées d'une interface doivent suivre la structure fournie par leur interface.
Le compilateur TypeScript ne convertit pas l'interface en JavaScript. Il utilise l'interface pour la vérification de
type. Ceci est également connu sous le nom de "typage de canard" ou "sous-typage structurel".
Une interface est définie avec le mot-clé interface et peut inclure des déclarations de propriétés et de
méthodes à l'aide d'une fonction ou d'une fonction fléchée.
INTERFACE COMME TYPE
L'interface en typescript peut être utilisée pour définir un type et aussi pour l'implémenter dans la classe.
Dans l'exemple ci-dessus, une paire de clés d'interface comprend deux propriétés clé et valeur. Une variable kv1 est déclarée
de type KeyPair. Ainsi, il doit suivre la même structure que la paire de clés. Cela signifie que seul un objet avec une clé de
propriétés de type numérique et une valeur de type chaîne peut être affecté à une variable kv1. Le compilateur de typescript
affichera une erreur s'il y a un changement dans le nom des propriétés ou si le type de données est différent de la paire de
clés. Une autre variable kv2 est également déclarée comme type de paire de clés mais la valeur assignée est Val au lieu de
valeur, cela provoquera donc une erreur. De la même manière, kv3 attribue un numéro à la propriété value, ainsi le compilateur
affichera une erreur. Ainsi, le Typescrit utilise une interface pour assurer la bonne structure d'un objet.
INTERFACE COMME TYPE DE FONCTION
Dans l'exemple, une interface KeyValueProcessor inclut une signature de méthode. Ceci définit le type de
fonction. Maintenant, nous pouvons définir une variable de type KeyValueProcessor qui ne peut pointer que vers
des fonctions avec la même signature que celle définie dans l'interface KeyValueProcessor. Ainsi, la fonction
addKeyValue ou updateKeyValue est attribuée à kvp. Ainsi, kvp peut être appelé comme une fonction.
INTERFACE POUR LE TYPE DE TABLEAU
Une interface peut également définir le type d'un tableau où vous pouvez définir le type d'index ainsi que
des valeurs.
Dans l'exemple ci-dessus, l'interface numlist définit un type de tableau avec index comme nombre et
valeur comme type de nombre. De la même manière, istringlist définit un tableau de chaînes avec index
comme chaîne et valeur comme chaîne.
PROPRIÉTÉ OPTIONNELLE
Parfois, nous pouvons déclarer une interface avec des propriétés en excès, mais nous ne pouvons pas nous
attendre à ce que tous les objets définissent toutes les propriétés d'interface données. Nous pouvons avoir
des propriétés facultatives, marquées d'un "?". dans de tels cas, les objets de l'interface peuvent ou non
définir ces propriétés.
Dans l'exemple ci-dessus, empDept est marqué d'un ?, donc les objets de IEmployee peuvent inclure ou non
PROPRIÉTÉS EN LECTURE SEULE
Typescript fournit un moyen de marquer une propriété en lecture seule. Cela signifie qu'une fois qu'une
propriété a une valeur, elle ne peut plus être modifiée !
Dans l'exemple ci-dessus, la propriété SSN est en lecture seule. Nous définissons l'objet personobj de type
citizen et attribuons des valeurs aux deux propriétés d'interface. Ensuite, nous essayons de modifier les
valeurs attribuées à la fois au nom des propriétés et au SSN. Le compilateur de typescript affichera une
erreur lorsque nous essaierons de modifier la propriété SSN en lecture seule.
EXTENSION DES INTERFACES
Les interfaces peuvent étendre une ou plusieurs interfaces. Cela rend les interfaces d'écriture flexibles et
réutilisables.
Dans l'exemple ci-dessus, l'interface iemployee étend l'interface iperson. Ainsi, les objets de iemployee
doivent inclure toutes les propriétés et méthodes de l'interface iperson sinon, le compilateur affichera une
erreur.
METTRE EN ŒUVRE UNE INTERFACE
Semblables à des langages tels que Java et C #, les interfaces en dactylographié peuvent être
implémentées avec une classe. La classe implémentant l'interface doit se conformer strictement à la
structure de l'interface.
Dans l'exemple, l'interface iemployee est
implémentée dans la classe employee à
l'aide du mot clé implement. La classe
d'implémentation doit définir strictement les
propriétés et la fonction avec le même nom
et le même type de données. Si la classe
d'implémentation ne suit pas la structure, le
compilateur affichera une erreur.
Bien sûr, la classe d'implémentation peut
définir des propriétés et des méthodes
supplémentaires, mais elle doit au moins
définir tous les membres d'une interface.
TYPESCRIPT - CLASSE
Dans les langages de programmation orientés objet comme Java et C#, les classes sont les entités
fondamentales utilisées pour créer des composants réutilisables. Les fonctionnalités sont transmises aux
classes et les objets sont créés à partir des classes. Cependant, jusqu'à ECMAScript 6 (également appelé
ECMAScript 2015), ce n'était pas le cas avec JavaScript. JavaScript a été principalement un langage de
programmation fonctionnel où l'héritage est basé sur des prototypes. Les fonctions sont utilisées pour créer
des composants réutilisables. Dans ECMAScript 6, une approche basée sur les classes orientées objet a été
introduite. Typescript introduit des classes pour profiter des avantages des techniques orientées objet telles
que l'encapsulation et l'abstraction. La classe en Typescript est compilé en fonctions JavaScript simples par le
compilateur typescript pour fonctionner sur toutes les plates-formes et tous les navigateurs.
Une classe peut inclure les éléments suivants :
•Constructeur
•Propriétés
•Méthodes
Il n'est pas nécessaire qu'une classe ait un constructeur.
CRÉATION D'UN OBJET DE CLASSE
Un objet de la classe peut être créé en utilisant le mot clé new :
Ici, nous créons un objet appelé emp de type employé en utilisant let emp = new employee();.
La classe ci-dessus n'inclut aucun constructeur paramétré, nous ne pouvons donc pas transmettre de
valeurs lors de la création d'un objet. Si la classe inclut un constructeur paramétré, nous pouvons
transmettre les valeurs lors de la création de l'objet.
Dans l’exemple, nous transmettons des valeurs à
l'objet pour initialiser les variables membres.
Lorsque nous instancions un nouvel objet, le
constructeur de classe est appelé avec les valeurs
passées et les variables membres empCode et
empName sont initialisées avec ces valeurs.
HÉRITAGE
Tout comme les langages orientés objet tels que Java et C #, les classes de type script peuvent être
étendues pour créer de nouvelles classes avec héritage, en utilisant le mot-clé extend.
Dans le dernier exemple, la classe des employés étend la
classe des personnes à l'aide du mot clé extend. Cela
signifie que la classe des employés inclut désormais tous les
membres de la classe des personnes.
Le constructeur de la classe employee initialise ses propres
membres ainsi que les propriétés de la classe parent en
utilisant un mot-clé spécial 'super'. Le mot-clé super est
utilisé pour appeler le constructeur parent et transmet les
valeurs de propriété.
Nous devons d'abord appeler la méthode super()
avant d'attribuer des valeurs aux propriétés dans le
constructeur de la classe dérivée.
Une classe peut implémenter une ou plusieurs interfaces.
Dans le dernier exemple, la classe employee implémente deux interfaces - iperson et iemployee. Ainsi, une
instance de la classe employee peut être affectée à une variable de type iperson ou iemployee. Cependant, un
objet de type iemployee ne peut pas appeler la méthode display() car iemployee ne l'inclut pas. Vous ne
pouvez utiliser que des propriétés et des méthodes spécifiques au type d'objet.
L'INTERFACE ÉTEND LA CLASSE
Une interface peut également étendre une classe pour représenter un type.
Dans l'exemple ci-dessus, iemployee est une interface qui étend la classe person. Ainsi, nous pouvons
déclarer une variable de type iemployee avec deux propriétés. Alors maintenant, nous devons déclarer et
initialiser des valeurs en même temps.
TYPESCRIPT - CLASSE ABSTRAITE
Typescript nous permet de définir une
classe abstraite à l'aide du mot clé abstract.
Les classes abstraites sont principalement
destinées à l'héritage là où d'autres classes
peuvent en dériver. Nous ne pouvons pas
créer une instance d'une classe abstraite.
Une classe abstraite comprend
généralement une ou plusieurs méthodes
abstraites ou déclarations de propriété. La
classe qui étend la classe abstraite doit
définir toutes les méthodes abstraites.
La classe abstraite suivante déclare une
recherche de méthode abstraite et inclut
également un affichage de méthode normal.
Dans le dernier exemple, person est une classe
abstraite qui comprend une propriété et deux
méthodes, dont l'une est déclarée abstraite. La
méthode find() est une méthode abstraite et doit donc
être définie dans la classe dérivée. La classe des
employés dérive de la classe des personnes et doit
donc définir la méthode find() comme abstraite. La
classe employee doit implémenter toutes les
méthodes abstraites de la classe person, sinon le
compilateur affichera une erreur.
La classe qui implémente une
classe abstraite doit appeler
super() dans le constructeur.
Noter:
La classe abstraite peut également inclure une
propriété abstraite, comme indiqué ci-dessous.
TYPESCRIPT - MODIFICATEURS DE DONNÉES
Dans la programmation orientée objet, le concept d'« encapsulation » est utilisé pour rendre les membres de
classe publics ou privés, c'est-à-dire qu'une classe peut contrôler la visibilité de ses membres de données.
Cela se fait à l'aide de modificateurs d'accès.
Il existe trois types de modificateurs d'accès dans le tapuscrit : public, private et protected
Par défaut, tous les membres d'une classe dans Typescript sont publics. Tous les membres publics peuvent
être consultés n'importe où sans aucune restriction.
Dans le dernier exemple, empcode et empname sont déclarés publics. Ainsi, ils peuvent être accessibles en
dehors de la classe en utilisant un objet de la classe.
Veuillez noter qu'aucun modificateur n'est appliqué avant empname, car Typescript traite les propriétés et les
méthodes comme publiques par défaut si aucun modificateur ne leur est appliqué.
private
Le modificateur d'accès privé garantit que les membres de la classe ne sont visibles que pour cette classe et
ne sont pas accessibles en dehors de la classe contenante.
Dans l'exemple ci-dessus, nous avons marqué le membre empcode comme privé. Par conséquent, lorsque
nous créons un objet emp et essayons d'accéder au membre emp.Empcode, cela génère une erreur.
protected
Le modificateur d'accès protected est similaire au modificateur d'accès private, sauf que les membres protégés
sont accessibles à l'aide de leurs classes dérivées.
Dans le dernier exemple, nous avons une classe
employee avec deux membres, public empname et
protected empcode. Nous créons une sous-classe
salesemployee qui s'étend à partir de la classe parent
employee. Si nous essayons d'accéder au membre
protégé depuis l'extérieur de la classe, en tant que
emp.Empcode, nous obtenons l'erreur de compilation
suivante :
Erreur ts2445 : la propriété 'empcode' est protégée et
accessible uniquement dans la classe 'employee' et
ses sous-classes.
En plus des modificateurs d'accès, le typescript fournit
deux autres mots-clés : read-only et static.
TYPESCRIPT - LECTURE SEULE
Typescript à introduit le mot-clé read-only, qui rend une propriété en lecture seule dans la classe, le type ou
l'interface.
Le préfixe read-only est utilisé pour rendre une propriété en lecture seule. Les membres en lecture seule sont
accessibles en dehors de la classe, mais leur valeur ne peut pas être modifiée. Étant donné que les membres
en lecture seule ne peuvent pas être modifiés en dehors de la classe, ils doivent soit être initialisés lors de la
déclaration, soit initialisés à l'intérieur du constructeur de classe.
Dans le dernier exemple, nous avons la classe employee avec deux propriétés - empname et empcode. Comme
empcode est en lecture seule, il peut être initialisé au moment de la déclaration ou dans le constructeur.
Si nous essayons de modifier la valeur de empcode après l'initialisation de l'objet, le compilateur affiche l'erreur
de compilation suivante :
Erreur TS2540 : impossible d'attribuer à empcode' car il s'agit d'une constante ou d'une propriété en lecture
seule.
Une interface peut également avoir des propriétés de membre en lecture
seule.
Comme vous pouvez le voir ci-dessus, empcode est en lecture seule, nous pouvons donc attribuer une valeur
au moment de la création d'un objet mais pas après.
De la même manière, vous pouvez utiliser read-only<t> pour créer un type en lecture seule,
comme indiqué ci-dessous.
Dans l'exemple ci-dessus, emp1 est déclaré en lecture seule<iemployee> et les valeurs ne peuvent donc pas
être modifiées une fois initialisées.
TYPESCRIPT - STATIC
ES6 inclut des membres statiques, tout comme le typescript. Les membres statiques d'une classe sont
accessibles à l'aide du nom de la classe et de la notation par points, sans créer d'objet, par exemple
<Classname>.<Staticmember>.
Les membres statiques peuvent être définis à l'aide du mot-clé static. Considérez l'exemple suivant d'une
classe avec une propriété statique.
La classe de cercle ci-dessus inclut une propriété statique pi. Ceci est accessible en utilisant circle.Pi.
L'exemple suivant définit une classe avec une propriété et une méthode statiques et comment y
accéder.
La classe de cercle ci-dessus comprend une propriété statique et une méthode statique. Dans la méthode
statique calculateArea, la propriété statique est accessible à l'aide de ce mot-clé ou du nom de classe
circle.Pi.
Considérons maintenant l'exemple suivant avec des membres statiques et non statiques.
Comme vous pouvez le voir, les champs statiques et non statiques portant le même nom peuvent exister
sans aucune erreur. Le champ statique sera accessible à l'aide de la notation par points et le champ non
statique sera accessible à l'aide d'un objet.
Typescript - MODULE
Le code typescript que nous écrivons est dans la portée globale par défaut. Si nous avons plusieurs fichiers
dans un projet, les variables, fonctions, etc. écrites dans un fichier sont accessibles dans tous les autres
fichiers.
Par exemple, considérez les deux fichiers typescript suivants : fichier1.ts et fichier2.ts
Dans file1.ts, nous avons utilisé le mot-clé export avant la variable. Maintenant, accéder à une variable
dans file2.ts donnera une erreur. Cela est dû au fait que le message d'accueil n'est plus dans la portée
globale. Pour accéder au message d'accueil dans file2.ts, nous devons importer le module file1 dans
file2 à l'aide du mot-clé import.
Apprenons export et import en détail.
Export
Un module peut être défini dans un fichier .ts pouvant contenir des fonctions, des variables, des interfaces et des
classes. Utilisez le préfixe d’exportation avec toutes les définitions que vous souhaitez inclure dans un module et
auxquelles vous souhaitez accéder à partir d'autres modules.
Dans l'exemple ci-dessus, employee.ts est un module qui contient deux variables et une définition de classe. La
variable age et la classe Employee sont préfixées par le mot-clé d'exportation, alors que la variable companyName
ne l'est pas. Ainsi, employee.ts est un module qui exporte la variable age et la classe Employee pour etre utiliser
dans d'autres modules en important le module Employee à l'aide du mot-clé import. La variable companyname
n'est pas accessible en dehors de ce module employé, car elle n'est pas exportée.
IMPORTER (IMPORT)
Un module peut être utilisé dans un autre module à l'aide d'une instruction d'importation.
Voyons différentes manières d'importer un export de module.
* Une Seule exportation à partir d’un module
* Tout le Module dans une variable
* Renommer une exportation depuis un module
Compiler un module Typescript
Nous ne pouvons pas utiliser les modules Typescript directement dans notre application. Nous devons utiliser
le JavaScript pour les modules Typescript. Pour obtenir les fichiers JavaScript pour les modules de Typescript,
nous devons compiler les modules à l'aide du compilateur de Typescript.
La compilation d'un module dépend de l'environnement cible que vous visez. Le compilateur de Typescript
génère le code JavaScript en fonction de l'option cible du module spécifiée lors de la compilation.
Utilisez la commande suivante pour compiler un module Typescript et générer le code JavaScript.
tsc --module <cible> <chemin du fichier>
TYPESCRIPT - ESPACE DE NOM
L'espace de noms est utilisé pour le regroupement logique des fonctionnalités. Un espace de noms peut inclure
des interfaces, des classes, des fonctions et des variables pour prendre en charge une seule ou un groupe de
fonctionnalités associées.
Un espace de noms peut être créé à l'aide du mot-clé namespace suivi du nom de l'espace de noms. Toutes les
interfaces, classes etc. Peuvent être définies entre accolades { }.
Considérez l'exemple suivant de différentes fonctions de chaîne dans l'espace de noms stringutilities.
Le fichier StringUtility.ts ci-dessus inclut l'espace de nomsStringUtilityqui comprend deux fonctions de chaîne
simples. leStringUtility namespace constitue un regroupement logique des fonctions de chaîne importantes
pour notre application.
Par défaut, les composants d'espace de noms ne peuvent pas être utilisés dans d'autres modules ou espaces
de noms. Vous devez exporter chaque composant pour le rendre accessible à l'extérieur, en utilisant le mot-clé
export comme indiqué ci-dessous.
Maintenant, nous pouvons utiliser l'espace de noms stringutility ailleurs. Le code JavaScript
suivant sera généré pour l'espace de noms ci-dessus.
Comme vous pouvez le voir, le code JavaScript généré ci-dessus pour l'espace de noms utilise le
modèle IIFE pour arrêter de polluer la portée globale.
Utilisons l'espace de noms stringutility ci-dessus dans le module employee, comme indiqué ci-
dessous.
Afin d'utiliser des composants d'espace de noms à d'autres endroits, nous devons d'abord inclure l'espace de
noms en utilisant la syntaxe de référence à triple barre oblique /// <reference path="path to namespace file" />.
après avoir inclus le fichier d'espace de noms à l'aide de la balise de référence, nous pouvons accéder à toutes
les fonctionnalités à l'aide de l'espace de noms. Ci-dessus, nous avons utilisé la fonction tocapital() comme
ceci : stringutility.Tocapital()
TYPESCRIPT - GÉNÉRIQUE
Lors de l'écriture de programmes, l'un des aspects les plus importants est de construire des composants
réutilisables. Cela garantit que le programme est flexible et évolutif à long terme.
Les génériques offrent un moyen de créer des composants réutilisables. Les génériques permettent de faire
fonctionner les composants avec n'importe quel type de données sans se limiter à un seul type de données.
Ainsi, les composants peuvent être appelés ou utilisés avec une variété de types de données. Les génériques
en tapuscrit sont presque similaires aux génériques C#.
Voyons pourquoi nous avons besoin de génériques en utilisant l'exemple suivant.

Contenu connexe

Similaire à Typescript-V2_1.pptx

Les fondamentaux de langage C#
Les fondamentaux de langage C#Les fondamentaux de langage C#
Les fondamentaux de langage C#Youness Boukouchi
 
M2 INAE introduction python.pdf
M2 INAE introduction python.pdfM2 INAE introduction python.pdf
M2 INAE introduction python.pdfHajer Amdouni
 
Les bases de la programmation en JAVA
Les bases de la programmation  en JAVA   Les bases de la programmation  en JAVA
Les bases de la programmation en JAVA Asmaa BENGUEDDACH
 
Apprendre vba excel(1)
Apprendre vba excel(1)Apprendre vba excel(1)
Apprendre vba excel(1)FIDEL Wisly
 
Debuter en Python.ppt
Debuter en Python.pptDebuter en Python.ppt
Debuter en Python.pptSofienBoutaib
 
Chap1 Introduction à python
Chap1 Introduction à pythonChap1 Introduction à python
Chap1 Introduction à pythonMariem ZAOUALI
 
L’algorithme 1.pptx
L’algorithme 1.pptxL’algorithme 1.pptx
L’algorithme 1.pptxOkanimegamers
 
Formation python micro club.net
Formation python micro club.netFormation python micro club.net
Formation python micro club.netZakaria SMAHI
 
03_Prog_C_Fonctions.pdf
03_Prog_C_Fonctions.pdf03_Prog_C_Fonctions.pdf
03_Prog_C_Fonctions.pdfAhmed12314
 
Formation en Python_Niveau1_2023.pptx
Formation en Python_Niveau1_2023.pptxFormation en Python_Niveau1_2023.pptx
Formation en Python_Niveau1_2023.pptxbetalab
 
Les structures en c++ (1)
Les structures en c++ (1)Les structures en c++ (1)
Les structures en c++ (1)Wael Ismail
 
Les structures en c++
Les structures en c++Les structures en c++
Les structures en c++Wael Ismail
 
Chapitre 2-Concepts de base de l'algorithme-2024.pdf
Chapitre 2-Concepts de base de l'algorithme-2024.pdfChapitre 2-Concepts de base de l'algorithme-2024.pdf
Chapitre 2-Concepts de base de l'algorithme-2024.pdfAdjimbawNDIAYE
 
Généralités sur la notion d’Algorithme
Généralités sur la notion d’AlgorithmeGénéralités sur la notion d’Algorithme
Généralités sur la notion d’AlgorithmeInforMatica34
 
Initiation au JavaScript
Initiation au JavaScriptInitiation au JavaScript
Initiation au JavaScriptMouna Dhaouadi
 

Similaire à Typescript-V2_1.pptx (20)

Les fondamentaux de langage C#
Les fondamentaux de langage C#Les fondamentaux de langage C#
Les fondamentaux de langage C#
 
M2 INAE introduction python.pdf
M2 INAE introduction python.pdfM2 INAE introduction python.pdf
M2 INAE introduction python.pdf
 
De Java à .NET
De Java à .NETDe Java à .NET
De Java à .NET
 
Les bases de la programmation en JAVA
Les bases de la programmation  en JAVA   Les bases de la programmation  en JAVA
Les bases de la programmation en JAVA
 
Apprendre vba excel(1)
Apprendre vba excel(1)Apprendre vba excel(1)
Apprendre vba excel(1)
 
Ch02
Ch02Ch02
Ch02
 
Debuter en Python.ppt
Debuter en Python.pptDebuter en Python.ppt
Debuter en Python.ppt
 
Chap1 Introduction à python
Chap1 Introduction à pythonChap1 Introduction à python
Chap1 Introduction à python
 
Python chapitre 1.pdf
Python chapitre 1.pdfPython chapitre 1.pdf
Python chapitre 1.pdf
 
L’algorithme 1.pptx
L’algorithme 1.pptxL’algorithme 1.pptx
L’algorithme 1.pptx
 
Formation python micro club.net
Formation python micro club.netFormation python micro club.net
Formation python micro club.net
 
03_Prog_C_Fonctions.pdf
03_Prog_C_Fonctions.pdf03_Prog_C_Fonctions.pdf
03_Prog_C_Fonctions.pdf
 
Formation en Python_Niveau1_2023.pptx
Formation en Python_Niveau1_2023.pptxFormation en Python_Niveau1_2023.pptx
Formation en Python_Niveau1_2023.pptx
 
Les structures en c++ (1)
Les structures en c++ (1)Les structures en c++ (1)
Les structures en c++ (1)
 
Les structures en c++
Les structures en c++Les structures en c++
Les structures en c++
 
Chapitre 2-Concepts de base de l'algorithme-2024.pdf
Chapitre 2-Concepts de base de l'algorithme-2024.pdfChapitre 2-Concepts de base de l'algorithme-2024.pdf
Chapitre 2-Concepts de base de l'algorithme-2024.pdf
 
algorithmique.pdf
algorithmique.pdfalgorithmique.pdf
algorithmique.pdf
 
Généralités sur la notion d’Algorithme
Généralités sur la notion d’AlgorithmeGénéralités sur la notion d’Algorithme
Généralités sur la notion d’Algorithme
 
Initiation au JavaScript
Initiation au JavaScriptInitiation au JavaScript
Initiation au JavaScript
 
33_1180.pdf
33_1180.pdf33_1180.pdf
33_1180.pdf
 

Typescript-V2_1.pptx

  • 2. Une brève histoire de Typescript en 2010,anders hejlsberg(le créateur du typescript) a commencé à travailler sur le typescript chez Microsoft et en 2012, la première version du typescript a été rendue publique (typescript 0.8). Bien que la publication du Typescript ait été saluée par de nombreuses personnes à travers le monde, en raison du manque de prise en charge par les principaux ides, elle n'a pas été majoritairement adoptée par la communauté JavaScript. La première version de Typescript (Typescript 0.8) a été rendue publique en octobre 2012. La dernière version de Typescript (Typescript 3.0) a été rendue publique en juillet 2018.
  • 3. Pourquoi Typescript ? Typescript est open source. Typescript simplifie le code JavaScript, le rendant plus facile à lire et à déboguer. Typescript est un sur-ensemble de ES3, ES5 et ES6. Typescript fera gagner du temps aux développeurs. Le code Typescript peut être compilé selon les normes ES5 et ES6 pour prendre en charge le dernier navigateur. Typescript peut nous aider à éviter les bogues douloureux que les développeurs rencontrent couramment lors de l'écriture de JavaScript en vérifiant le code par type. Typescript n'est rien d'autre que JavaScript avec quelques fonctionnalités supplémentaires. …
  • 4. Caractéristiques de Typescript Multiplateforme:Typescript fonctionne sur n'importe quelle plate-forme sur laquelle JavaScript s'exécute. Le compilateur TypeScript peut être installé sur n'importe quel système d'exploitation tel que Windows, Mac OS et Linux. Langage orienté objet:TypeScript fournit des fonctionnalités puissantes telles que des classes, des interfaces et des modules. Vous pouvez écrire du code purement orienté objet pour le développement côté client et côté serveur. Vérification de type statique: TypeScript utilise le typage statique. Ceci est fait en utilisant des annotations de type. Il aide à la vérification de type au moment de la compilation. Ainsi, vous pouvez trouver des erreurs lors de la saisie du code sans exécuter votre script à chaque fois. De plus, en utilisant le mécanisme d'inférence de type, si une variable est déclarée sans type, elle sera déduite en fonction de sa valeur. Typage statique facultatif: TypeScript permet également le typage statique facultatif si vous préférez utiliser le typage dynamique de JavaScript. Manipulation DOM: tout comme JavaScript, le typescript peut être utilisé pour manipuler le DOM afin d'ajouter ou de supprimer des éléments. Caractéristiques de l'ES 6: TypeScript comprend la plupart des fonctionnalités prévu dans ECMAScript2015 (ES 6, 7) telles que la classe, l'interface, les fonctions fléchées, etc.
  • 5. CONFIGURATION DE L’ENVIRONNEMENT DÉVELOPPEMENT Installez Typescript à l'aide degestionnaire de paquets node.Js(npm). Installez le plug-in Typescript dans votre IDE (environnement de développement intégré). TYPESCRIPT PLAYGROUND Typescript fournit un playground en ligne https://www.Typescriptlang.Org/play pour écrire et tester votre code à la volée sans avoir besoin de télécharger ou d'installer quoi que ce soit.  npm install –g typescript  tsc -v Version blablabla.blabla
  • 6. Type de données TypeScript • Number • String • Boolean • Array • Tuple • Enum • Union • Any • Void • Never Déclaration de variables Les variables peuvent être déclarées en utilisant : var, let, const
  • 7. Type de données TypeScript - NUMBER Type de données TypeScript - STRING
  • 8. Type de données TypeScript - BOOLEAN Notez qu'un booléen avec un B majuscule est différent d'un booléen avec un b minuscule. Le booléen majuscule est un type d'objet tandis que le booléen minuscule est un type primitif. Il est toujours recommandé d'utiliser booléen, le type primitif dans vos programmes. En effet, alors que JavaScript contraint un objet à son type primitif, le système de typescript ne le fait pas. Typescript le traite comme un type d'objet.
  • 9. Type de données TypeScript - ARRAY 1. Utiliser des crochets. Cette méthode est similaire à la façon dont vous déclareriez des tableaux en JavaScript. 2. En utilisant un type de tableau générique, tableau<type d'élément>. Bien sûr, vous pouvez toujours initialiser un tableau comme indiqué ci-dessous, mais vous n'obtiendrez pas l'avantage du système de type de TypeScript.
  • 10.
  • 11. TYPE DE DONNÉES TYPESCRIPT - TUPLE Typescript à introduit un nouveau type de données appelé tuple. Il existe d'autres types de données tels que les nombres, les chaînes, les booléens, etc. Dans le typescript qui ne stocke qu'une valeur de ce type de données particulier. Tuple est un nouveau type de données qui comprend deux ensembles de valeurs de types de données différents.
  • 12. Ajouter des éléments dans Tuple Vous pouvez également déclarer un tableau de tuples.
  • 13. TYPESCRIPRT TYPE DE DONNÉES - ENUM Les énumérations sont un nouveau type de données pris en charge dans le typescript. La plupart des langages orientés objet comme Java et C# utilisent des énumérations. Ceci est maintenant disponible en typescript aussi. Il existe trois types d'énumérations : Énumération numérique Énumération de chaîne Énumération hétérogène
  • 14. Énumération numérique Les énumérations numériques sont des énumérations basées sur des nombres, c'est-à-dire qu'elles stockent des valeurs de chaîne sous forme de nombres.
  • 15. Les énumérations numériques peuvent inclure des membres avec une valeur numérique calculée. La valeur d'un membre enum peut être une constante ou calculée. L'énumération suivante inclut des membres avec des valeurs calculées. Lorsque l'énumération inclut des membres calculés et constants, les membres d'énumération non initiés doivent venir en premier ou après les autres membres initialisés avec des constantes numériques.
  • 16. ÉNUMÉRATION DE CHAÎNE Les énumérations de chaîne sont similaires aux énumérations numériques, sauf que les valeurs d'énumération sont initialisées avec des valeurs de chaîne plutôt qu'avec des valeurs numériques. La différence entre les énumérations numériques et de chaîne est que les valeurs d'énumération numérique sont auto-incrémentées, tandis que les valeurs d'énumération de chaîne doivent être initialisées individuellement.
  • 17. ÉNUMÉRATION HÉTÉROGÈNE Les énumérations hétérogènes sont des énumérations qui contiennent à la fois des valeurs de chaîne et des valeurs numériques.
  • 18. Typescript - UNION Typescript nous permet d'utiliser plus d'un type de données pour une variable ou un paramètre de fonction. C'est ce qu'on appelle le type d'union.
  • 19. TYPE DE DONNÉES TYPESCRIPT - ANY Typescript à une vérification de type et des vérifications au moment de la compilation. Cependant, nous n'avons pas toujours une connaissance préalable du type de certaines variables, en particulier lorsqu'il existe des valeurs saisies par l'utilisateur à partir de bibliothèques tierces. Dans de tels cas, nous avons besoin d'une disposition qui peut traiter du contenu dynamique.
  • 20. TYPE DE DONNEES TYPESCRIPT - VOID Semblable à des langages comme Java, void est utilisé là où il n'y a pas de type de données. Par exemple, dans le type de retour des fonctions qui ne renvoient aucune valeur. * Il n'y a aucun sens à assigner void à une variable, car seul null ou undefined est assignable à void.
  • 21. TYPE DE DONNEES TYPESCRIPT - NEVER Typescript à introduit un nouveau type never, qui indique les valeurs qui ne se produiront jamais. Le type never est utilisé lorsque vous êtes sûr que quelque chose ne se produira jamais. Par exemple, vous écrivez une fonction qui ne reviendra pas à son point final ou lèvera toujours une exception.
  • 22. DIFFÉRENCE ENTRE NEVER ET VOID Le type void peut avoir undefined ou null comme valeur cependant never ne peut avoir aucune valeur. En typescript, une fonction qui ne renvoie pas de valeur renvoie en fait undefined.
  • 23. TYPE INFÉRENCE DANS TYPESCRIPT il n'est pas obligatoire pour annoter le type. TypeScript déduit les types de variables lorsqu'aucune information explicite n'est disponible sous la forme d'annotations de type. Les types sont déduits par le compilateur TypeScript lorsque : •Les variables sont initialisées •Des valeurs par défaut sont définies pour les paramètres •Les types de retour de fonction sont déterminés Par exemple: Le code ci-dessus affiche une erreur car lors de la déduction des types, le typescript a déduit le type de la variable en étant une chaîne et la variable b en tant que nombre. Lorsque nous essayons d'affecter b à a, le compilateur se plaint en disant qu'un type numérique ne peut pas être affecté à un type chaîne.
  • 24. TYPE INFÉRENCE DANS LES OBJETS COMPLEXES Par exemple: Dans l'exemple ci-dessus, nous avons un tableau qui a les valeurs 10, null, 30 et 40 . typescript recherche le type le plus courant pour déduire le type de l'objet. Dans ce cas, il sélectionne celui qui est compatible avec tous les types, c'est-à-dire Number, ainsi que null. Prenons un autre exemple: Ici, le tableau a des valeurs de type nombre ainsi que de type chaîne. Dans de tels cas, le compilateur de typescript recherche le type le plus courant pour déduire le type de l'objet mais ne trouve aucun super type pouvant englober tous les types présents dans le tableau. Dans de tels cas, le compilateur traite le type comme une union de tous les types présents dans le tableau. Ici, le type serait (string | number), ce qui signifie que le tableau peut contenir des valeurs de chaîne ou des valeurs numériques. C'est ce qu'on appelle le type d'union.
  • 25. TYPE ASSERTION DANS TYPESCRIPT Il existe deux manières de faire une assertion de type dans un script typescript : • Utilisation de la syntaxe crochet angulaire <>. • En utilisant le mot clé as L'assertion de type vous permet de définir le type d'une valeur et d'indiquer au compilateur de ne pas l'inférer. C'est à ce moment que vous, en tant que programmeur, pourriez avoir un Meilleur choix type d'une variable plutot que de déduire par lui-même. Une telle situation peut se produire lorsque vous transférez du code à partir de JavaScript et que vous connaissez peut-être un type de variable plus précis que celui qui est actuellement attribué. C'est similaire au cast dans d'autres langages comme C# et Java. Cependant, contrairement à C # et Java, il n'y a pas d'effet d'exécution de l'assertion de type dans typescript.C'est simplement une façon de laisser le compilateur typescript connaître le type d'une variable.
  • 26. TYPESCRIPT - FUNCTION Les fonctions peuvent également inclure des types de paramètres et un type de retour. Les paramètres sont des valeurs ou des arguments passés à une fonction. Dans typescript,le compilateur s'attend à ce qu'une fonction reçoive le nombre et le type exacts d'arguments définis dans la signature de la fonction. Si la fonction attend trois paramètres, le compilateur vérifie que l'utilisateur a passé des valeurs pour les trois paramètres, c'est-à-dire qu'il vérifie les correspondances exactes.
  • 27. PARAMÈTRES OPTIONNELS DANS LES FONCTIONS Tous les paramètres facultatifs doivent suivre les paramètres requis et doivent se trouver à la fin. Dans l'exemple ci-dessus, le deuxième nom de paramètre est marqué comme facultatif avec un point d'interrogation ajouté à la fin. Par conséquent, la fonction greet() accepte 1 ou 2 paramètres et renvoie une chaîne de salutation. Si nous ne spécifions pas le deuxième paramètre, sa valeur sera indéfinie.
  • 28. TYPESCRIPT - SURCHARGE DE FONCTIONS Typescript fournit le concept de surcharge de fonctions. Vous pouvez avoir plusieurs fonctions avec le même nom mais différents types de paramètres et types de retour. Cependant, le nombre de paramètres doit être le même. La surcharge de fonctions avec un nombre différent de paramètres et de types portant le même nom n'est pas prise en charge.
  • 29. TYPESCRIPT - PARAMÈTRES DE REPOS N'oubliez pas que les paramètres de repos doivent venir en dernier dans la definition de la fonction,sinon le compilateur typescript affichera une erreur. Ce qui suit n'est pas valide. Typescript à introduit des paramètres de repos pour accueillir facilement n nombre de paramètres. Lorsque le nombre de paramètres que recevra une fonction n'est pas connu ou peut varier, nous pouvons utiliser des paramètres de repos. En JavaScript, ceci est réalisé avec la variable "arguments". Cependant, avec le typescript, nous pouvons utiliser le paramètre rest indiqué par des points de suspension ....
  • 30. TYPESCRIPT - INTERFACE L'interface est une structure qui définit le contrat dans votre application. Il définit la syntaxe des classes à suivre. Les classes dérivées d'une interface doivent suivre la structure fournie par leur interface. Le compilateur TypeScript ne convertit pas l'interface en JavaScript. Il utilise l'interface pour la vérification de type. Ceci est également connu sous le nom de "typage de canard" ou "sous-typage structurel". Une interface est définie avec le mot-clé interface et peut inclure des déclarations de propriétés et de méthodes à l'aide d'une fonction ou d'une fonction fléchée.
  • 31. INTERFACE COMME TYPE L'interface en typescript peut être utilisée pour définir un type et aussi pour l'implémenter dans la classe. Dans l'exemple ci-dessus, une paire de clés d'interface comprend deux propriétés clé et valeur. Une variable kv1 est déclarée de type KeyPair. Ainsi, il doit suivre la même structure que la paire de clés. Cela signifie que seul un objet avec une clé de propriétés de type numérique et une valeur de type chaîne peut être affecté à une variable kv1. Le compilateur de typescript affichera une erreur s'il y a un changement dans le nom des propriétés ou si le type de données est différent de la paire de clés. Une autre variable kv2 est également déclarée comme type de paire de clés mais la valeur assignée est Val au lieu de valeur, cela provoquera donc une erreur. De la même manière, kv3 attribue un numéro à la propriété value, ainsi le compilateur affichera une erreur. Ainsi, le Typescrit utilise une interface pour assurer la bonne structure d'un objet.
  • 32. INTERFACE COMME TYPE DE FONCTION Dans l'exemple, une interface KeyValueProcessor inclut une signature de méthode. Ceci définit le type de fonction. Maintenant, nous pouvons définir une variable de type KeyValueProcessor qui ne peut pointer que vers des fonctions avec la même signature que celle définie dans l'interface KeyValueProcessor. Ainsi, la fonction addKeyValue ou updateKeyValue est attribuée à kvp. Ainsi, kvp peut être appelé comme une fonction.
  • 33. INTERFACE POUR LE TYPE DE TABLEAU Une interface peut également définir le type d'un tableau où vous pouvez définir le type d'index ainsi que des valeurs. Dans l'exemple ci-dessus, l'interface numlist définit un type de tableau avec index comme nombre et valeur comme type de nombre. De la même manière, istringlist définit un tableau de chaînes avec index comme chaîne et valeur comme chaîne.
  • 34. PROPRIÉTÉ OPTIONNELLE Parfois, nous pouvons déclarer une interface avec des propriétés en excès, mais nous ne pouvons pas nous attendre à ce que tous les objets définissent toutes les propriétés d'interface données. Nous pouvons avoir des propriétés facultatives, marquées d'un "?". dans de tels cas, les objets de l'interface peuvent ou non définir ces propriétés. Dans l'exemple ci-dessus, empDept est marqué d'un ?, donc les objets de IEmployee peuvent inclure ou non
  • 35. PROPRIÉTÉS EN LECTURE SEULE Typescript fournit un moyen de marquer une propriété en lecture seule. Cela signifie qu'une fois qu'une propriété a une valeur, elle ne peut plus être modifiée ! Dans l'exemple ci-dessus, la propriété SSN est en lecture seule. Nous définissons l'objet personobj de type citizen et attribuons des valeurs aux deux propriétés d'interface. Ensuite, nous essayons de modifier les valeurs attribuées à la fois au nom des propriétés et au SSN. Le compilateur de typescript affichera une erreur lorsque nous essaierons de modifier la propriété SSN en lecture seule.
  • 36. EXTENSION DES INTERFACES Les interfaces peuvent étendre une ou plusieurs interfaces. Cela rend les interfaces d'écriture flexibles et réutilisables. Dans l'exemple ci-dessus, l'interface iemployee étend l'interface iperson. Ainsi, les objets de iemployee doivent inclure toutes les propriétés et méthodes de l'interface iperson sinon, le compilateur affichera une erreur.
  • 37. METTRE EN ŒUVRE UNE INTERFACE Semblables à des langages tels que Java et C #, les interfaces en dactylographié peuvent être implémentées avec une classe. La classe implémentant l'interface doit se conformer strictement à la structure de l'interface. Dans l'exemple, l'interface iemployee est implémentée dans la classe employee à l'aide du mot clé implement. La classe d'implémentation doit définir strictement les propriétés et la fonction avec le même nom et le même type de données. Si la classe d'implémentation ne suit pas la structure, le compilateur affichera une erreur. Bien sûr, la classe d'implémentation peut définir des propriétés et des méthodes supplémentaires, mais elle doit au moins définir tous les membres d'une interface.
  • 38. TYPESCRIPT - CLASSE Dans les langages de programmation orientés objet comme Java et C#, les classes sont les entités fondamentales utilisées pour créer des composants réutilisables. Les fonctionnalités sont transmises aux classes et les objets sont créés à partir des classes. Cependant, jusqu'à ECMAScript 6 (également appelé ECMAScript 2015), ce n'était pas le cas avec JavaScript. JavaScript a été principalement un langage de programmation fonctionnel où l'héritage est basé sur des prototypes. Les fonctions sont utilisées pour créer des composants réutilisables. Dans ECMAScript 6, une approche basée sur les classes orientées objet a été introduite. Typescript introduit des classes pour profiter des avantages des techniques orientées objet telles que l'encapsulation et l'abstraction. La classe en Typescript est compilé en fonctions JavaScript simples par le compilateur typescript pour fonctionner sur toutes les plates-formes et tous les navigateurs. Une classe peut inclure les éléments suivants : •Constructeur •Propriétés •Méthodes
  • 39. Il n'est pas nécessaire qu'une classe ait un constructeur.
  • 40. CRÉATION D'UN OBJET DE CLASSE Un objet de la classe peut être créé en utilisant le mot clé new : Ici, nous créons un objet appelé emp de type employé en utilisant let emp = new employee();. La classe ci-dessus n'inclut aucun constructeur paramétré, nous ne pouvons donc pas transmettre de valeurs lors de la création d'un objet. Si la classe inclut un constructeur paramétré, nous pouvons transmettre les valeurs lors de la création de l'objet.
  • 41. Dans l’exemple, nous transmettons des valeurs à l'objet pour initialiser les variables membres. Lorsque nous instancions un nouvel objet, le constructeur de classe est appelé avec les valeurs passées et les variables membres empCode et empName sont initialisées avec ces valeurs.
  • 42. HÉRITAGE Tout comme les langages orientés objet tels que Java et C #, les classes de type script peuvent être étendues pour créer de nouvelles classes avec héritage, en utilisant le mot-clé extend. Dans le dernier exemple, la classe des employés étend la classe des personnes à l'aide du mot clé extend. Cela signifie que la classe des employés inclut désormais tous les membres de la classe des personnes. Le constructeur de la classe employee initialise ses propres membres ainsi que les propriétés de la classe parent en utilisant un mot-clé spécial 'super'. Le mot-clé super est utilisé pour appeler le constructeur parent et transmet les valeurs de propriété. Nous devons d'abord appeler la méthode super() avant d'attribuer des valeurs aux propriétés dans le constructeur de la classe dérivée.
  • 43. Une classe peut implémenter une ou plusieurs interfaces.
  • 44. Dans le dernier exemple, la classe employee implémente deux interfaces - iperson et iemployee. Ainsi, une instance de la classe employee peut être affectée à une variable de type iperson ou iemployee. Cependant, un objet de type iemployee ne peut pas appeler la méthode display() car iemployee ne l'inclut pas. Vous ne pouvez utiliser que des propriétés et des méthodes spécifiques au type d'objet. L'INTERFACE ÉTEND LA CLASSE Une interface peut également étendre une classe pour représenter un type. Dans l'exemple ci-dessus, iemployee est une interface qui étend la classe person. Ainsi, nous pouvons déclarer une variable de type iemployee avec deux propriétés. Alors maintenant, nous devons déclarer et initialiser des valeurs en même temps.
  • 45. TYPESCRIPT - CLASSE ABSTRAITE Typescript nous permet de définir une classe abstraite à l'aide du mot clé abstract. Les classes abstraites sont principalement destinées à l'héritage là où d'autres classes peuvent en dériver. Nous ne pouvons pas créer une instance d'une classe abstraite. Une classe abstraite comprend généralement une ou plusieurs méthodes abstraites ou déclarations de propriété. La classe qui étend la classe abstraite doit définir toutes les méthodes abstraites. La classe abstraite suivante déclare une recherche de méthode abstraite et inclut également un affichage de méthode normal.
  • 46. Dans le dernier exemple, person est une classe abstraite qui comprend une propriété et deux méthodes, dont l'une est déclarée abstraite. La méthode find() est une méthode abstraite et doit donc être définie dans la classe dérivée. La classe des employés dérive de la classe des personnes et doit donc définir la méthode find() comme abstraite. La classe employee doit implémenter toutes les méthodes abstraites de la classe person, sinon le compilateur affichera une erreur. La classe qui implémente une classe abstraite doit appeler super() dans le constructeur. Noter: La classe abstraite peut également inclure une propriété abstraite, comme indiqué ci-dessous.
  • 47. TYPESCRIPT - MODIFICATEURS DE DONNÉES Dans la programmation orientée objet, le concept d'« encapsulation » est utilisé pour rendre les membres de classe publics ou privés, c'est-à-dire qu'une classe peut contrôler la visibilité de ses membres de données. Cela se fait à l'aide de modificateurs d'accès. Il existe trois types de modificateurs d'accès dans le tapuscrit : public, private et protected Par défaut, tous les membres d'une classe dans Typescript sont publics. Tous les membres publics peuvent être consultés n'importe où sans aucune restriction.
  • 48. Dans le dernier exemple, empcode et empname sont déclarés publics. Ainsi, ils peuvent être accessibles en dehors de la classe en utilisant un objet de la classe. Veuillez noter qu'aucun modificateur n'est appliqué avant empname, car Typescript traite les propriétés et les méthodes comme publiques par défaut si aucun modificateur ne leur est appliqué. private Le modificateur d'accès privé garantit que les membres de la classe ne sont visibles que pour cette classe et ne sont pas accessibles en dehors de la classe contenante. Dans l'exemple ci-dessus, nous avons marqué le membre empcode comme privé. Par conséquent, lorsque nous créons un objet emp et essayons d'accéder au membre emp.Empcode, cela génère une erreur.
  • 49. protected Le modificateur d'accès protected est similaire au modificateur d'accès private, sauf que les membres protégés sont accessibles à l'aide de leurs classes dérivées.
  • 50. Dans le dernier exemple, nous avons une classe employee avec deux membres, public empname et protected empcode. Nous créons une sous-classe salesemployee qui s'étend à partir de la classe parent employee. Si nous essayons d'accéder au membre protégé depuis l'extérieur de la classe, en tant que emp.Empcode, nous obtenons l'erreur de compilation suivante : Erreur ts2445 : la propriété 'empcode' est protégée et accessible uniquement dans la classe 'employee' et ses sous-classes. En plus des modificateurs d'accès, le typescript fournit deux autres mots-clés : read-only et static.
  • 51. TYPESCRIPT - LECTURE SEULE Typescript à introduit le mot-clé read-only, qui rend une propriété en lecture seule dans la classe, le type ou l'interface. Le préfixe read-only est utilisé pour rendre une propriété en lecture seule. Les membres en lecture seule sont accessibles en dehors de la classe, mais leur valeur ne peut pas être modifiée. Étant donné que les membres en lecture seule ne peuvent pas être modifiés en dehors de la classe, ils doivent soit être initialisés lors de la déclaration, soit initialisés à l'intérieur du constructeur de classe.
  • 52. Dans le dernier exemple, nous avons la classe employee avec deux propriétés - empname et empcode. Comme empcode est en lecture seule, il peut être initialisé au moment de la déclaration ou dans le constructeur. Si nous essayons de modifier la valeur de empcode après l'initialisation de l'objet, le compilateur affiche l'erreur de compilation suivante : Erreur TS2540 : impossible d'attribuer à empcode' car il s'agit d'une constante ou d'une propriété en lecture seule. Une interface peut également avoir des propriétés de membre en lecture seule. Comme vous pouvez le voir ci-dessus, empcode est en lecture seule, nous pouvons donc attribuer une valeur au moment de la création d'un objet mais pas après.
  • 53. De la même manière, vous pouvez utiliser read-only<t> pour créer un type en lecture seule, comme indiqué ci-dessous. Dans l'exemple ci-dessus, emp1 est déclaré en lecture seule<iemployee> et les valeurs ne peuvent donc pas être modifiées une fois initialisées.
  • 54. TYPESCRIPT - STATIC ES6 inclut des membres statiques, tout comme le typescript. Les membres statiques d'une classe sont accessibles à l'aide du nom de la classe et de la notation par points, sans créer d'objet, par exemple <Classname>.<Staticmember>. Les membres statiques peuvent être définis à l'aide du mot-clé static. Considérez l'exemple suivant d'une classe avec une propriété statique. La classe de cercle ci-dessus inclut une propriété statique pi. Ceci est accessible en utilisant circle.Pi.
  • 55. L'exemple suivant définit une classe avec une propriété et une méthode statiques et comment y accéder. La classe de cercle ci-dessus comprend une propriété statique et une méthode statique. Dans la méthode statique calculateArea, la propriété statique est accessible à l'aide de ce mot-clé ou du nom de classe circle.Pi.
  • 56. Considérons maintenant l'exemple suivant avec des membres statiques et non statiques. Comme vous pouvez le voir, les champs statiques et non statiques portant le même nom peuvent exister sans aucune erreur. Le champ statique sera accessible à l'aide de la notation par points et le champ non statique sera accessible à l'aide d'un objet.
  • 57. Typescript - MODULE Le code typescript que nous écrivons est dans la portée globale par défaut. Si nous avons plusieurs fichiers dans un projet, les variables, fonctions, etc. écrites dans un fichier sont accessibles dans tous les autres fichiers. Par exemple, considérez les deux fichiers typescript suivants : fichier1.ts et fichier2.ts Dans file1.ts, nous avons utilisé le mot-clé export avant la variable. Maintenant, accéder à une variable dans file2.ts donnera une erreur. Cela est dû au fait que le message d'accueil n'est plus dans la portée globale. Pour accéder au message d'accueil dans file2.ts, nous devons importer le module file1 dans file2 à l'aide du mot-clé import. Apprenons export et import en détail.
  • 58. Export Un module peut être défini dans un fichier .ts pouvant contenir des fonctions, des variables, des interfaces et des classes. Utilisez le préfixe d’exportation avec toutes les définitions que vous souhaitez inclure dans un module et auxquelles vous souhaitez accéder à partir d'autres modules. Dans l'exemple ci-dessus, employee.ts est un module qui contient deux variables et une définition de classe. La variable age et la classe Employee sont préfixées par le mot-clé d'exportation, alors que la variable companyName ne l'est pas. Ainsi, employee.ts est un module qui exporte la variable age et la classe Employee pour etre utiliser dans d'autres modules en important le module Employee à l'aide du mot-clé import. La variable companyname n'est pas accessible en dehors de ce module employé, car elle n'est pas exportée.
  • 59. IMPORTER (IMPORT) Un module peut être utilisé dans un autre module à l'aide d'une instruction d'importation. Voyons différentes manières d'importer un export de module. * Une Seule exportation à partir d’un module * Tout le Module dans une variable
  • 60. * Renommer une exportation depuis un module Compiler un module Typescript Nous ne pouvons pas utiliser les modules Typescript directement dans notre application. Nous devons utiliser le JavaScript pour les modules Typescript. Pour obtenir les fichiers JavaScript pour les modules de Typescript, nous devons compiler les modules à l'aide du compilateur de Typescript. La compilation d'un module dépend de l'environnement cible que vous visez. Le compilateur de Typescript génère le code JavaScript en fonction de l'option cible du module spécifiée lors de la compilation. Utilisez la commande suivante pour compiler un module Typescript et générer le code JavaScript. tsc --module <cible> <chemin du fichier>
  • 61. TYPESCRIPT - ESPACE DE NOM L'espace de noms est utilisé pour le regroupement logique des fonctionnalités. Un espace de noms peut inclure des interfaces, des classes, des fonctions et des variables pour prendre en charge une seule ou un groupe de fonctionnalités associées. Un espace de noms peut être créé à l'aide du mot-clé namespace suivi du nom de l'espace de noms. Toutes les interfaces, classes etc. Peuvent être définies entre accolades { }. Considérez l'exemple suivant de différentes fonctions de chaîne dans l'espace de noms stringutilities. Le fichier StringUtility.ts ci-dessus inclut l'espace de nomsStringUtilityqui comprend deux fonctions de chaîne simples. leStringUtility namespace constitue un regroupement logique des fonctions de chaîne importantes pour notre application.
  • 62. Par défaut, les composants d'espace de noms ne peuvent pas être utilisés dans d'autres modules ou espaces de noms. Vous devez exporter chaque composant pour le rendre accessible à l'extérieur, en utilisant le mot-clé export comme indiqué ci-dessous. Maintenant, nous pouvons utiliser l'espace de noms stringutility ailleurs. Le code JavaScript suivant sera généré pour l'espace de noms ci-dessus.
  • 63. Comme vous pouvez le voir, le code JavaScript généré ci-dessus pour l'espace de noms utilise le modèle IIFE pour arrêter de polluer la portée globale. Utilisons l'espace de noms stringutility ci-dessus dans le module employee, comme indiqué ci- dessous.
  • 64. Afin d'utiliser des composants d'espace de noms à d'autres endroits, nous devons d'abord inclure l'espace de noms en utilisant la syntaxe de référence à triple barre oblique /// <reference path="path to namespace file" />. après avoir inclus le fichier d'espace de noms à l'aide de la balise de référence, nous pouvons accéder à toutes les fonctionnalités à l'aide de l'espace de noms. Ci-dessus, nous avons utilisé la fonction tocapital() comme ceci : stringutility.Tocapital()
  • 65. TYPESCRIPT - GÉNÉRIQUE Lors de l'écriture de programmes, l'un des aspects les plus importants est de construire des composants réutilisables. Cela garantit que le programme est flexible et évolutif à long terme. Les génériques offrent un moyen de créer des composants réutilisables. Les génériques permettent de faire fonctionner les composants avec n'importe quel type de données sans se limiter à un seul type de données. Ainsi, les composants peuvent être appelés ou utilisés avec une variété de types de données. Les génériques en tapuscrit sont presque similaires aux génériques C#. Voyons pourquoi nous avons besoin de génériques en utilisant l'exemple suivant.