---
gitea: none
include_toc: true
---
[TOC]
# JavaScript et TypeScript
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 :
- **WASM** : une sorte de langage bas niveau vers lequel d'autres languages peuvent être compilés (e.g. C, C++, Rust, Java, etc).
- **JavaScript**
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.
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.
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.
## Utilisation de JavaScript
```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.
## Types de bases
JavaScript distingue 6 types de base :
| Déclaration | JS Type | Python Type |
| -------------------- | ----------- | ------------ |
| `let a = 42;` | `number` | `float` |
| `let a = true;` | `boolean` | `bool` |
| `let a = "str";` | `string` | `str` |
| `let a = undefined;` | `undefined` | ≈ `NoneType` |
| `let a = {a: 42}` | `object` | ≈ `dict` |
| `let a = foo;` | `function` | `function` |
Il existe plusieurs valeurs spéciales :
| Valeur | JS Type | En Python | Remarques |
| -------------------------- | ----------- | ----------------- | ------------------------------- |
| `NaN` | `number` | `float('nan')` | Not a Number (e.g. 0/0) |
| `Number.POSITIVE_INFINITY` | `number` | `float('inf')` | |
| `Number.NEGATIVE_INFINITY` | `number` | `float('-inf')` | |
| `0b01010111` | `number` | `0b01010111` | Nombre en binaire. |
| `0o777` | `number` | `0o777` | Nombre en octal |
| `0xFF` | `number` | `0xFF` | Nombre en hexadécimal |
| `1.2e2` | `number` | `1.2e2` | Nombre en notation scientifique |
| `true` | `boolean` | `True` | |
| `false` | `boolean` | `False` | |
| `` `val: ${value}` `` | `string` | `f"val: {value}"` | littéraux de gabarits |
| `null` | `object` | ≈ `None` | valeur "pas de valeurs" |
| `undefined` | `undefined` | ≈ `None` | valeur inexistante |
Pour retrouver le type d'une variable, vous pouvez utiliser `typeof $VAR`, qui est l'équivalent de `type($VAR)` en Python.
# Structures de données [TODO]
base object/array (vs tupple list python)
## Opérateurs
JavaScript utilise les mêmes opérateurs que Python à quelques exceptions près.
### Opérateurs bit à bits :
| Opérateur | Nom |
| --------- | ----------- |
| `a\|b` | OU binaire |
| `a&b` | ET binaire |
| `a^b` | XOR binaire |
| `~a` | NOT binaire |
### Opérateurs logique
| JavaScript | Python | Commentaires |
| ---------- | --------- | --------------------- |
| `a\|\|b` | `a or b` | OU logique |
| `a&&b` | `a and b` | ET logique |
| `!a` | `not a` | NON logique |
| `a??b` | | Coallescence des nuls |
💡 *Astuce :* l'opérateur de coallescence des nuls peut être utilisé pour indiquer des valeurs par défauts :
```javascript
let a ??= b; // si a est null ou undefined, a = b.
let a ||= b; // si a est évalué à false, a = b
```
### Opérateurs de comparaison
| JavaScript | Python | Commentaires |
| ---------- | ------------ | ---------------------------- |
| `a == b` | `a == b` | égalité de valeur (à éviter) |
| `a != b` | `a != b` | |
| `a === b` | `a is b` | égalité stricte |
| `a !== b` | `a is not b` | |
Opérateurs communs : `>`, `>=`, `<`, `<=`.
### Opérateurs arithmétiques
Opérateurs communs : `+` (binaire et unaire), `-` (binaire et unaire), `/`, `%`, `*`, `**`
| JavaScript | Python | Commentaires |
| ---------- | ------ | ---------------------------------- |
| `++a` | `a+=1` | incrément |
| `a++` | | retourne la valeur puis incrémente |
| `--a` | `a-=1` | décrément |
| `a--` | | retourne la valeur puis décrémente |
### Opérateurs d'affectations
Comme en python, il s'agit des opérateurs arithmétiques suffixé d'un `=`.
Par exemple `a += b` est équivalent à `a = a+b`.
### Autres opérateurs [TODO]
- destructuration / décomposition / chaînage opt (.?)
- []
- in
- delete
### Conversions
```javascript
let a = +$VALUE; // number
let a = !!$VALUE; // boolean
let a = (5).toString(); // string "5"
let a = (5).toString(2);// string "101"
```
📖 `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
TODO: intérêt
```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**.
```typescript
type A = typeof a; // TS, number | string
console.log(typeof a); // JS, string
```
### Types pour les structures de données
- generics TS `Array` / types array / `Record` / typescript []
# Structures de contrôle
## Conditions
```javascript
// [JS] Javascript
if( $COND2 ) {
} else if($COND2) {
} else {
}
```
```python
# [🐍] Python
if $COND1:
pass
elif $COND2
pass
else
pass
```
## Opérateur ternaire
```javascript
// [JS] Javascript
let a = $COND ? $IF_TRUE : $IF_FALSE
let a = $COND
? $IF_TRUE
: $IF_FALSE
```
```python
# [🐍] Python
a = $IF_TRUE if $COND else $IF_FALSE
```
## Switch
```javascript
// [JS] Javascript
switch(value) {
case 'value':
//...
break;
default:
//...
}
```
```python
# [🐍] Python
match value:
case 'value':
pass
case _:
pass
```
## Boucles
### While
```javascript
// [JS] Javascript
while($COND) {
}
```
```python
# [🐍] Python
while $COND:
pass
```
### Do while
```javascript
// [JS] Javascript
do {
// s'exécute au moins une fois.
} while( $COND );
```
### For in (parcours les clefs)
```javascript
// [JS] Javascript
for( let value in $OBJ ) {
}
```
### For of (parcours les valeurs)
```javascript
// [JS] Javascript
for( let value of $OBJ ) {
}
```
## Exceptions
```javascript
// [JS] Javascript
try {
throw new Error($MESSAGE)
} catch(error) {
} finally {
}
```
```python
# [🐍] Python
try:
raise Exception($MESSAGE)
except Exception as error:
pass
finally:
pass
```
# Fonctions
## Déclaration
```javascript
// [JS] JavaScript
function foo(arg1, arg2 = "2") {
//...
return 2.3;
}
foo(1)
```
```python
# [🐍] Python
def foo(arg1, arg2 = "2", /): # les paramètres positionnel uniquement
# ...
return 2.3
foo(1)
```
```typescript
//[TS] TypeScript
function foo(arg1: number, arg2?: string = "2"): number {
// ...
return 2.3;
}
foo(1)
```
## Paramètre du reste (rest parameter)
```javascript
// [JS] JavaScript
function foo(arg1, ...arg2) {
// arg2 = ["2", "3"]
return 2.3;
}
foo(1, "2", "3")
```
```python
# [🐍] Python
def foo(arg1, /, *arg2):
# arg2 = ("2", "3")
return 2.3
foo(1, "2", "3")
```
```typescript
//[TS] TypeScript
function foo(arg1: number, ...arg2: readonly string[]): number {
// arg2 = ["2", "3"]
return 2.3;
}
foo(1, "2", "3")
```
## Opérateur de décomposition (spread operator) comme argument
```javascript
// [JS] JavaScript
function foo(arg1, arg2, arg3) {
//...
return 2.3;
}
const args = ["2", "3"];
foo(1, ...args)
```
```python
# [🐍] Python
def foo(arg1, arg2, arg3, /):
# ...
return 2.3
args = ("2", "3")
foo(1, *args )
```
```typescript
//[TS] TypeScript
function foo(arg1: number, arg2: string, arg3: string): number {
return 2.3;
}
const args = ["2", "3"] as const; // ou as ["string", "string"]
foo(1, ...args)
```
## Fonctions génératrices
TODO: utilité
```javascript
// [JS] JavaScript
function * foo(nb) {
for(let i = 0; i < nb; ++i)
yield i;
}
for( let val of foo(5) )
console.log(val);
```
```python
# [🐍] Python
def foo(nb, /) {
for i in range(nb):
yield i;
}
for val in foo(5)
console.log(val);
```
```typescript
//[TS] TypeScript
function * foo(nb: number): Generator {
for(let i = 0; i < nb; ++i)
yield i;
}
for(let val of foo(5) )
console.log(val);
```
## Fonctions fléchées
TODO: pas d'équivalent en python + utilité (callbacks)
```javascript
const foo = arg => arg[0]; // est équivalent à :
const foo = function(arg){ return arg[0]; }
// si plusieurs paramètres, utiliser des parenthèses ().
// si valeur retournée plus complexe, utiliser des accolades {}.
const foo = (arg1, args) => { ... ; return x; } // est équivalent à :
const foo = function(arg1, arg2){ ... ; return x; }
```
# Asynchronisme
/!\ Diff with Python
- Promise
- motivation + pas bloquer thread principal
# CM2
## Fonctions avancées ?
## Classes
- class + getter/setter + private/protected + interface + iterator / async inter / héritage + fonctionnement prototype (méthode => fct et inversement + bind)
- - ts enum + mixins
- + well-known symbols
## Importations et exportations (CM2?)
## Quelques API utiles (CM2 ?)
- Math API
- Crypto
- Date / RegExp
- object / array / Map / Set / string APIs
## Futur
- Manipuler URL => move 2 JS-DOM API ?
- console/assert => move 2 JS-DOM API ?