Au semestre précédent, nous avons utilisé Brython afin d'exécuter du Python dans le navigateur. En réalité Brython transforme le code Python en JavaScript qui est ensuite interprété par le navigateur. En effet, le navigateur ne peut exécuter que deux langages :
+ types de bases / array / object / Map / Set + conversions + Date / RegExp
- **WASM** : une sorte de langage bas niveau vers lequel d'autres languages peuvent être compilés (e.g. C, C++, Rust, Java, etc).
+ == vs ===
- **JavaScript**
+ Math API
JavaScript signale uniquement les erreurs d'exécutions. Ainsi certaines erreurs de programmations peuvent être silencieuses, ou ne pas être détectées lors de vos tests. Nous utiliserons TypeScript, un sur-ensemble de JavaScript permettant de détecter des erreurs en amont, facilitant grandement les étapes de tests et de développements.
+ Manipuler URL => move 2 JS-DOM API
Typescript permet d'indiquer le type des variables permettant à la fois de documenter l'usage des fonctions, mais aussi de vérifier et garantir qu'une fonction est bien appelée avec les bons paramètres. Ainsi en à peine quelques millisecondes, Typescript est capable de vous avertir d'erreurs de programmations que vous pourriez ne pas détecter, puis passer une journée à chercher. Il facilite aussi grandement les étapes de refactoring, e.g. lorsque la signature d'une fonction change, et requiert alors de changer son appel dans l'intégralité de votre code.
+ class + getter/setter + private/protected + interface + iterator / async inter / héritage + fonctionnement prototype (méthode => fct et inversement + bind)
Au semestre précédent, nous avons utilisé l'API JS/DOM via Brython. Nous utiliserons la même API ce semestre, i.e. vous réutiliserez les mêmes fonctions et paramètres, seul le langage utlisé change.
+ + ts enum
## Utilisation de JavaScript
+ commentaires / const / readonly / frozen
```html
<!DOCTYPE html>
<html>
<head>
<!-- ... -->
<scriptsrc="$JS_FILE"type="module"defer></script>
</head>
<body>
</body>
</html>
```
## Utilisation de TypeScript
TypeScript est tout d'abord converti en JavaScript à l'aide de la commande shell `tsc`. Les options sont soient données en paramètre de la commande, ou indiquées dans le fichier `tsconfig.json`.
L'option `--watch` permet de générer les fichiers JS à chaque modifications du fichier TS correspondant. Son avantage majeur est d'intégrer un cache en RAM permettant d'éviter de re-générer les fichiers JS de fichiers TS non-modifiés. Il permet ainsi un gain de temps significatif lors du développement, passant de plusieurs minutes de traduction pour de gros projets, à quelques millisecondes.
## Exécution de TypeScript côté serveur
JavaScript et TypeScript peuvent non seulement s'exécuter sur le navigateur, côté client, mais aussi côté serveur à l'aide d'interpréteurs comme `Node` ou `Deno`. Utiliser le même langage côté client et côté serveur possède plusieurs avantages :
- **factoriser** des parties de codes utilisés à la fois côté client et côté serveur.
- **déplacer** aisément des calculs du côté serveur vers le côté client et inversement.
- évite d'avoir à apprendre et **maîtriser deux langages** différents.
Dans le cadre de ce module, nous utiliserons `Deno` qui permet d'exécuter directement des fichiers TS sans avoir à générer des fichiers JS via `tsc`.
Nous étudierons plus en détails `Deno` dans le cours suivant.
# Types et structures de données natives
## Déclaration d'une variable
Contrairement à Python, JS possède 3 manières de déclarer une variable :
```javascript
let a = ...; // "block-scoped".
var a = ...; // "function-scoped".
const A = ...; // une constante, i.e. ne peut être modifiée.
```
*Note:* contrairement à Python, JS n'a pas besoin du mot clef `global` pour accéder à une variable globale. L'object `globalThis` contient l'ensemble des variables globales.
📖 `0`, `""`, `null`, `undefined`, sont évalués à `false`.
## Indications de type avec Typescript
### Indication explicite de type
```typescript
let a = 42; // TS déduit que a est un number.
let a: number = 42; // on indique explicitement le type.
```
### Union de types
Il arrive qu'une variable puisse prendre des valeurs de plusieurs types différents :
```typescript
let a = 42; // TS déduit que a est un number.
a = "42"; // erreur, a ne peut être qu'un number.
let a: number | string = 42;
a = "42"; // légal
```
### Valeur optionnelle
Il arrive qu'une variable puisse ne pas avoir de valeurs à l'initialisation :
```javascript
let a: number; // erreur.
let a: number|undefined; // légal
```
### Alias de types
<mark>TODO: intérêt</mark>
```typescript
type X = number | string;
let a: X = 42; // équivaut à let a: number | string = 42;
```
### TS typeof
⚠ Il existe 2 `typeof`, un JS qui déduit le type de la **valeur** à l'exécution, et un TS qui, dans les indications de types, indique le type TS de la **variable**.
