Cours TypeScript

Choix des technologies
Introduction sur javascript

TypeScript Ecole Supérieure Polytechnique
Mise en place d’environnement
Introduction à la programmation Web et mobile
Aboubecrine MOHAMED LAGHDAF

aboubecrine.mohamed-laghdaf@esp.mr
http://www.esp.mr
Ecole Supérieure Polytechnique

Département IRT
18 Mars 2021
A. MED LAGHDAF 18 Mars 2021 Téchnologies Web 1 / 35

Plan du cours
• Introduction à la programmation Web et mobile;

• Rappel sur javascript;
• Typescript;
• Framework Angular pour le développement web;
• Développement mobile Hybride.

Plan
TypeScript

Contexte historique du Web

Contexte
Présentation : l’évolution du contexte historique du développement
en web peut être résumé comme suit :


Contexte
• 1989 : HTML: World Wide Web /HyperText Markup
Language;
• 1995: Javascript;


Contexte
Language;
• 1998: Ajax asynchronous JavaScript and XML;


Contexte
Language;
• 2009: NodeJS (node) ;


Contexte
Language;
• 2010 AngularJS;


Contexte
Language;
• 2010 AngularJS;
• 2012 TypeScript;


Contexte
Language;
• 2010 AngularJS;
• 2013 React;


Contexte
Language;
• 2010 AngularJS;
• 2013 React;
• 2014 : Angular, Vue.
Étude de StackOverflow de 2020

HTML et javascript
Figure: Insertion du javascript dans le code HTML

Déclaration des variables
Pour la déclaration des variables en javascript, vous avez 4

manières présentées comme suit :


• let nom varibale= valeur portée par bloc si la déclaration dans
un bloc. Portée de fichier ou module sinon.


• global.nom variable = valeur;
• window.nom variable = valeur; création/modification d’une
variable globale.


variable globale.
• nom varibale = valeur ; modification de la valeur d’une
variable si elle existe déjà, sinon la création d’une variable
globale


variable globale.
• nom varibale = valeur ; modification de la valeur d’une
variable si elle existe déjà, sinon la création d’une variable
globale
• var nom varibale = valeur ; portée de fonction si déclaration
dans une fonction. variable globale si déclaration en dehors de
la fonction.

Figure: Déclaration des variables avec var dans une fonction

Figure: La bonne
A. MED LAGHDAF
manière de créer des variables
18 Mars 2021
en javascript
Téchnologies Web 9 / 35
Figure: Différence entre var et let

Types des variables
Types primitifs :
• String : let =’ESP, y=’IRT’+’SID’;
• Number : let x=30, y=1.5;
• Boolean let x= true;
• Undefined : let x, y = undefined;
• Null: let x =null;
Types primitifs =⇒ copie par valeur :

• let x =3; x −→ 3
• let y =x; y −→ 3

Les objets
Figure: création et accès à des objets javascript

Les tableaux
Il faut noter que les tableaux sont des objets.
Figure: création et accès à des tableaux

Typage dynamique
Figure: Typage dynamique

Les constantes
Figure: Exemples des constantes en javascript

Création des objets
Il existe quatre manière pour créer des objets :

• création par assignation;
• création par factory;
• création par constructeur;
• création par classe.

Création des objets par assignation
Figure: création d’objet par assignation

Création des objets par factory

Création des objets par constructeur

Création des objets par classe

Présentation
Définition
typeScript est un langage de programmation libre et open source
développé par Microsoft qui a pour but d’améliorer et de sécuriser
la production de code JavaScript. Il s’agit d’un sur-ensemble
syntaxique strict de JavaScript.
• Principe d’utilisation :
1 Écrire du code en Typescript (mon code.ts);
2 Le compiler (transpiler) en JavaScript tsc mon code.ts produit
mon code.js;
3 Exécuter le JavaScript produit(mon code.js)
• Ajout principaux par rapport à JavaScript :
1 Typage fort =⇒ facilité les débuggages;
2 Notion orienté objet : interface, classe, etc;
3 Erreur à la compilation.

Les types en TypeScript

Typage fort

Le type any

Imposer le type d’une variable

Les tableaux et les tuples

Les énumérations

Les fonction

Les arrow fonction

Les interfaces

Les constructeurs

Installation des outils
Installation des outils

Pour faciliter le développement d’une application Angular, les
outils suivants doivent être installés
• Node Js : https://nodejs.org/en/download/
• Node Js installe l’outil npm(Node Package Manager) qui
permet de télécharger et installer des bibliothèques Java Script;
• Installer ensuite Angular Cli (Command Line Interface) qui
vous permet de générer, compiler, tester et déployer des projet
Angular https://angular.io/guide/setup-local

Introduction
Démarrer avec Angular
Pour commencer le travail avec Angular, il faut installer nodejs via
le lien suivant : https://nodejs.org/en/download/
Figure: NodeJs
Introduction
Démarrer avec Angular
Ensuite, il faut installer le module @angular/cli via le ce lien
https://angular.io/guide/setup-local
Figure: Angular/cli
Architecture
Figure: Full Stack

Cours TypeScript

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Cours TypeScript

Transféré par

Droits d'auteur :

Formats disponibles

Choix des technologies

Introduction sur javascript

Introduction à la programmation Web et mobile

Aboubecrine MOHAMED LAGHDAF

Ecole Supérieure Polytechnique

A. MED LAGHDAF 18 Mars 2021 Téchnologies Web 1 / 35

• Introduction à la programmation Web et mobile;

A. MED LAGHDAF 18 Mars 2021 Téchnologies Web 2 / 35

Choix des technologies

Introduction sur javascript

Mise en place d’environnement

A. MED LAGHDAF 18 Mars 2021 Téchnologies Web 3 / 35

Contexte historique du Web

A. MED LAGHDAF 18 Mars 2021 Téchnologies Web 4 / 35

Contexte historique du Web

A. MED LAGHDAF 18 Mars 2021 Téchnologies Web 4 / 35

Contexte historique du Web

A. MED LAGHDAF 18 Mars 2021 Téchnologies Web 4 / 35

Contexte historique du Web

A. MED LAGHDAF 18 Mars 2021 Téchnologies Web 4 / 35

Contexte historique du Web

A. MED LAGHDAF 18 Mars 2021 Téchnologies Web 4 / 35

Contexte historique du Web

A. MED LAGHDAF 18 Mars 2021 Téchnologies Web 4 / 35

Contexte historique du Web

A. MED LAGHDAF 18 Mars 2021 Téchnologies Web 4 / 35

Contexte historique du Web

Étude de StackOverflow de 2020

A. MED LAGHDAF 18 Mars 2021 Téchnologies Web 5 / 35

Figure: Insertion du javascript dans le code HTML

A. MED LAGHDAF 18 Mars 2021 Téchnologies Web 6 / 35

Déclaration des variables

Pour la déclaration des variables en javascript, vous avez 4

A. MED LAGHDAF 18 Mars 2021 Téchnologies Web 7 / 35

Déclaration des variables

Pour la déclaration des variables en javascript, vous avez 4

A. MED LAGHDAF 18 Mars 2021 Téchnologies Web 7 / 35

Déclaration des variables

Pour la déclaration des variables en javascript, vous avez 4

A. MED LAGHDAF 18 Mars 2021 Téchnologies Web 7 / 35

Déclaration des variables

Pour la déclaration des variables en javascript, vous avez 4

A. MED LAGHDAF 18 Mars 2021 Téchnologies Web 7 / 35

Déclaration des variables

Pour la déclaration des variables en javascript, vous avez 4

A. MED LAGHDAF 18 Mars 2021 Téchnologies Web 7 / 35

Déclaration des variables

Figure: Déclaration des variables avec var dans une fonction

A. MED LAGHDAF 18 Mars 2021 Téchnologies Web 8 / 35

Déclaration des variables

Déclaration des variables

Figure: Différence entre var et let

A. MED LAGHDAF 18 Mars 2021 Téchnologies Web 10 / 35

Types des variables

Types primitifs =⇒ copie par valeur :

A. MED LAGHDAF 18 Mars 2021 Téchnologies Web 11 / 35

Figure: création et accès à des objets javascript

A. MED LAGHDAF 18 Mars 2021 Téchnologies Web 12 / 35

Il faut noter que les tableaux sont des objets.

Figure: création et accès à des tableaux

A. MED LAGHDAF 18 Mars 2021 Téchnologies Web 13 / 35

Figure: Typage dynamique

A. MED LAGHDAF 18 Mars 2021 Téchnologies Web 14 / 35