Chapitre 4 - Les Bases de TypeScript

Angular
Chapitre 4: Les bases de

TypeScript
Enseignant: Mouhamed Amar

Licence 3
Université Amadou Hampaté BA de Dakar
Année 2023-2024
1
Plan
1. Variable
2. Les types
3. Interface
4. Fonction
5. Classe
6. Composant
7. Constructeur
8. Décorateur
2
Variable: déﬁnition
Une variable est un élément qui

associe un nom (l'identifiant) à une
valeur, la valeur pouvant être de
nature (type) différente
3
Variable: var, let, const
var : La déclaration traditionnelle d'une variable en

JavaScript
let : restreint certaines possibilités de var
const : continuité de let empêchant la

réaffectation
4
Variable: Règles
● Les noms de variables peuvent contenir des

lettres et des chiffres.
● Les noms de variables ne peuvent pas
commencer par un chiffre.
● Les caractères spéciaux autorisés sont _ et
＄.
5
Les Types: simples
age:number =30 passer: boolean = true
Booléen
Nombre
Chaîne de caractères
niveau: string = "Terminal"

6
Les types: Tableaux
les_moyennes : number [ ] = [12,17,14.5,19]
les_prenoms: string[] = [
"Lamine",
"Sayba",
"Pape Malick"
]
7
Les types: Tuples
user: [string, string, number] = ["Mouhamed", "Amar", 14]
8
Les Types: objet
etudiant: { prenom: string, nom: string, age: number } = {

prenom: "Hamidou",
nom: "Barry",
age: 21
}
9
Les types: any
les_moyennes : any = [12, 17, 14.5, 19]
les_prenoms : any = ["Lamine", "Sayba", "Pape Malick"]
user : any = ["Mouhamed", "Amar", 14]
10
Interface
let une_entreprise : Entreprise ={

“IBM” ,
création “International Business Machines”,
15.5
interface Entreprise{ }
sigle : string, utilisation
nom : string,
chiffre_affaire : number
} 11
Fonction: sans retour
test(valeur:string):void{
console.log(valeur)
}
12
Fonction: avec retour
moyenne(les_notes: number[]): number {
const taille: number = les_notes.length
let m: number = 0
for (let i = 0; i < taille; i++) {
const une_note: any = les_notes[i];
m += une_note / taille
}
return m
}
ngOnInit(): void {
console.log(this.moyenne([10,15,17,11.5]))
}
13
Fonction: paramètres optionnels
somme(a: number, b: number, c?: number): number {
if (c) {
return a + b + c
} else {
return a + b
}
} ngOnInit(): void {
console.log(this.somme(10,15))
console.log(this.somme(10,15,19))
}
14
Fonction: paramètres par défaut
somme(a: number, b: number, c: number=2): number {

return a + b + c
}
ngOnInit(): void {
console.log(this.somme(10,15))
console.log(this.somme(10,15,19))
}
15
Classe: Class
Une classe est un modèle de définition

pour des objets ayant le même ensemble
d'attributs, et le même ensemble
d'opérations. A partir d'une classe on peut
créer un ou plusieurs objets par
instanciation ; chaque objet est une
instance d'une seule classe
16
Classe: visibilité attributs
● public - (par défaut) autorise l'accès aux membres de

la classe de n'importe où
● privé - n'autorise l'accès aux membres de la classe
qu'à partir de la classe
● protégé - permet l'accès aux membres de la classe à
partir de lui-même et de toutes les classes qui en
héritent, ce qui est couvert dans la section héritage
ci-dessous
17
Classe: héritage
interface Forme{
surface: () => number;
}
class Rectangle implements Forme{

public constructor(......) {}
public surface(): number {

return …….;
}
} 18
Classe: extension
class Rectangle {
public constructor(......) {}
public surface(): number {

return ……;
}
}
class Carre extends Rectangle {

public constructor(width: number) {
super(width, width);
}
// la fonction surface est hérité de Rectangle
} 19
TypeScript
avec Angular
20
Composant: structure
21
Composant: logique
Importations des dépendances
Décorateur qui montre qu’une classe

est un composant et fournit des
métadonnées de configuration qui
déterminent comment le composant
doit être traité, instancié et utilisé
lors de l'exécution.
La class proprement dite ou

sera implémenté toute la
logique du composant en
question 22
Composant: constructeur
Le constructeur est une fonction particulière

exécutée lors de la création d’une classe.
Il permet :
● d’initialiser les données membres de la classe
● d’injecter des dépendances dans la classe
● créer une nouvelle instance de la classe
23
Composant: ngOnInit()
Une méthode de rappel appelée immédiatement

après que le constructeur est appelé, et avant que
l'un des enfants(composant) de vue ou de contenu
ait été vérifié. Elle n'est invoquée qu'une seule fois
lorsque la classe est instanciée.
Son utilisation est possible grâce à l’implémentation
de l’interface OnInit.
24
Décorateur: déﬁnition
Un décorateur stocke les métadonnées d’une

classe, une méthode ou une propriété.
Exemple: pour créer un composant, on définit une
métadonnée pour cette classe qui indique à
Angular que vous avez un composant et que ce
composant a une configuration spécifique.
25
Décorateur: @Component
@NgModule
@NgModule({
declarations: [],
imports: [
@Component
CommonModule, @Component ({
EnseigantRoutingModule selector: 'app-apropos' ,
] templateUrl:
'./apropos.component.html' ,
}) styleUrls: ['./apropos.component.css' ]
})
26
FIN De chapitre
Pour plus de ressources, vous pouvez consulter:

https://angular.io
https://blog.jant.tech
27

Chapitre 4 - Les Bases de TypeScript

Transféré par

Droits d'auteur :

Formats disponibles

Chapitre 4 - Les Bases de 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

Chapitre 4 - Les Bases de TypeScript

Transféré par

Droits d'auteur :

Formats disponibles

Angular

Chapitre 4: Les bases de

Enseignant: Mouhamed Amar

Une variable est un élément qui

var : La déclaration traditionnelle d'une variable en

let : restreint certaines possibilités de var

const : continuité de let empêchant la

● Les noms de variables peuvent contenir des

age:number =30 passer: boolean = true

niveau: string = "Terminal"

les_moyennes : number [ ] = [12,17,14.5,19]

user: [string, string, number] = ["Mouhamed", "Amar", 14]

etudiant: { prenom: string, nom: string, age: number } = {

les_moyennes : any = [12, 17, 14.5, 19]

les_prenoms : any = ["Lamine", "Sayba", "Pape Malick"]

user : any = ["Mouhamed", "Amar", 14]

let une_entreprise : Entreprise ={

somme(a: number, b: number, c: number=2): number {

Une classe est un modèle de définition

● public - (par défaut) autorise l'accès aux membres de

class Rectangle implements Forme{

public surface(): number {

public surface(): number {

class Carre extends Rectangle {

// la fonction surface est hérité de Rectangle

Décorateur qui montre qu’une classe

La class proprement dite ou

Le constructeur est une fonction particulière

Une méthode de rappel appelée immédiatement

Un décorateur stocke les métadonnées d’une

Pour plus de ressources, vous pouvez consulter:

Vous aimerez peut-être aussi