# TypeScript

**How To use**
- Cloner le projet
- Exécuter npm i pour installer les dépendances
- Exécuter npm start pour lancer le projet
- Accéder au projet sur http://localhost:1234

**Structure d'un projet**

En général, les projets de développement auront une structure comme on l'a fait pour celui ci avec : à la racine :
- package.json => fichier qui contient toutes les informations du projet (sa version, les scripts de lancement, la liste de ses dépendances/librairies)
- README.md => qui contiendra en markdow une présentation du projet
- .gitignore => pour indiquer les dossiers/fichiers qu'on souhaite que git ne prenne pas en compte (en général on aura le dossier node_modules, dist, et d'autres)
- node_module => dossier contenant tous les fichiers des dépendances du projet qu'on a installé avec npm
- dist => dossier contient le résultat du build du projet (c'est généralement le contenu de ce dossier qu'on mettra en ligne au moment du déploiement)
- src => dossier contenant les sources, ce que sont les sources va dépendre un peu selon les projets, mais en JS/TS, on aura les fichier typescript
- public => dossier contenant les fichiers static, comme le html, le favicon, potentiellement le css et les graphismes

*prise de notes*

ecma script

node.js

parcel transforme en bundle qui peut être lu par le navigateur
- ts -> js

Il existe webpack, un autre logiciel similaire

npm = node package manager
- gestionnaires de projet Java Script
- Dépendances

npm init
- initialise un projet -> crée package.json

npm i / install “nom package” ‘-D’
- ( "-D" = dev dependencies )

npm install
- installe ce qu’il y a dans le package.json
- à faire quand on clone ou pull / push

npm start / npm run start ( marche tout le temps )
- déclenche le script start dans le package.json

**Les Variables**

Elles se déclarent avec :
let
const (ne pourra pas etre réasigner)

**Les Boucles**

for ( let i = 0 ; i < … ; i ++ ) {
- let i = 0 -> Crée une variable I
- i < … -> ... représente un chiffre
- i++ -> Incrémentation de la variable

}

while ( condition ) {

Bien penser à mettre une condition d’arrêt !
Sinon boucle infini et qui dit boucle infini dit ordi qui prends feu :scream:

}

for ( let i = 0 ; i < 10 ; i ++ ) {

- for ( let j = 0 ; j < 10 ; j++ ) {

- }

}

On peut aussi mettre une boucle dans une boucle !
Donc la variable J va s'exécuter dix fois (j) + dix fois depuis la variable (i)

**Les Tableaux**

Pour déclarer un tableau cela se fait un peu comme une variable, il suffit de respecter cette syntaxe :

*let array = [1,2,3,4,5];*

* Accéder a une valeur d'un tableau :

*console.log(array[3]);*
Output : 4

* Parcourir un tableau :

for (let *item* of *array*) {
console.log(*item*);
}

*item* représentant un élément du tableau

* Ajouter une valeur a la fin d'un tableau :

*array.push('');*

* Supprimer une valeur a la fin d'un tableau :

*array.pop();*

* Supprimer une valeur au début d'un tableau :

*array.shift();*

* Avoir la position d'un élément dans un tableau :

*array.indexOf('élémentRecherché');*

* Ajouter/Remplacer d'un élément dans un tableau :

*array.splice(3, 0, 'élément')*
Cela va ajouter 'élément' a l'index 3 du tableau

*array.splice(3, 1, 'élément')*
Cela va remplacer la valeur a l'index 3 du tableau par 'élément'

* Afficher une partie d'un tableau :

*array.slice(2, 6)*
Cela va renvoyer lea valeurs entre l'index 2 et 6 et du tableau

**Evenement**

* Lors du click de la souris sur un élément :

monElement.addEventListener('click', () => {
*code exécuter lors du click de la souris sur 'monElement'*
})
Ici on utilise une fonction lors du click de la souris, sans lui donner d'arguments.

**Créer un élément HTML depuis typescript** :

document.createElement('h1')
Ceci va créer un titre

parent.append('h1')
Ajouter l'élément dans le document HTML

**Objets** :

En JS tout est un objet.
La POO est une façon d'organiser son code. Cela permet de regrouper des variables ensembles. Et aussi des fonctions (cela s'apelle des méthodes).
Lorsqu'on assigne un objet a un autre, ce dernier pointera vers l'objet qu'on lui a assigné

*Exemple* :
objet2 = objet1;
Si on modifie objet2 cela modifiera objet1

/!\ Ce n'est pas le cas pour les type primitifs (string, number, boolean) /!\

###### tags: `FRONT`