---
title: Typescript
theme: ./_themes/5ika.css
highlightTheme: github
verticalSeparator: <!--v-->
revealOptions:
  transition: 'fade'
---


# TypeScript

---

## Qu'est-ce que TypeScript ?

- TypeScript est un langage de programmation Open Source développé par Microsoft
- C'est une sorte de surcouche à Javascript qui rend le langage **typé**.
- TypeScript est conçu pour améliorer le développement d'applications JavaScript à grande échelle en ajoutant des outils de vérification des types, d'autocomplétion et de refactorisation.

---

## Avantages de TypeScript

- **Vérification des types :** TypeScript permet de détecter les erreurs de type pendant la phase de développement, dans l'IDE, ce qui facilite le débogage et rend le code plus robuste.
- **Intellisense améliorée :** Grâce aux annotations de type, TypeScript offre une meilleure prise en charge de l'autocomplétion et de l'analyse statique du code dans les éditeurs de code.
- **Meilleure maintenabilité :** Les fonctionnalités avancées de TypeScript, telles que les interfaces, les classes et les modules, favorisent une meilleure organisation et une meilleure maintenabilité du code.

---

## Installation de TypeScript

Pour installer TypeScript, vous pouvez utiliser npm :

```bash
npm install -g typescript
```

On peut ainsi utiliser la commande `tsc` qui peut convertir le Typescript en Javascript.
Même si généralement, on utilise des outils qui s'occupent de cette conversion automatiquement.

---

## Exemple de code

```typescript
function add(a: number, b: number): number {
  return a + b;
}

const result = add(2, 3);
```

> L'extension de fichier utilisée est `.ts` plutôt que `.js`.
> `.tsx` plutôt que `.jsx`.

---

## Types de données Typescript

TypeScript comprend plusieurs types de données prédéfinis, tels que number, string, boolean, object, etc.

Voici quelques exemples :

```typescript
let age: number = 25;
let name: string = "John";
let isStudent: boolean = true;
let person: object = { name: "John", age: 25 };
let weekdays: string[] = ["lundi", "jeudi", "samedi"];
```

Il est également possible de définir des types personnalisés à l'aide des interfaces et des types.

---

## Interfaces en TypeScript

Les interfaces sont utilisées pour définir des contrats de structure de données en TypeScript.

Voici un exemple d'utilisation d'interfaces :

```typescript
interface Person {
  name: string;
  age: number;
  greet: () => void;
}

const person: Person = {
  name: "John",
  age: 25,
  greet: () => {
    console.log(`Hello, my name is ${person.name}`);
  },
};

person.greet();
```

---

## Composant React

Typescript nous permet notamment de typer les `props` des composants:

```typescript
interface Props {
    posts: Post[];
    getPost: (id: string) => void;
}

const PostsLists = (props: Props) => {
    const {posts, getPost} = props;

    return ...
}
```

---

## Hooks

De même, on peut typer les states pour assurer un code consistant:

```typescript
const Compo = () => {
    const [count, setCount] = useState<number>(0);
    const [name, setName] = useState<string>('');
    const [profile, setProfile] = useState<{name: string, age: number}>();

    // Cela affiche des erreurs:
    setCount({value:2});
    setName(13);
    setProfile({firstname: 'Tim'})
}
```

---

## Inférence

Typescript est capable de faire de l'*inférence*.
C'est à dire qu'il est capable parfois de deviner un type de variable sans qu'on ait besoin
de lui indiquer. Par exemple avec les hooks:

```typescript
const Compo = () => {
    const [count, setCount] = useState(0); // number
    const [name, setName] = useState('Tim'); // string
    const [profile, setProfile] = useState({age: 45, city: 'GE'}); // {age: number, city: string}

    const arr = [1, 'yop', null]; // (number | string | null)
}
```

---

## Union

Parfois, une variable peut avoir plusieurs types potentiels.
On peut utiliser une *union* pour la définir:

```typescript
let id: string | number = 10;

id = '13'; // OK
id =  13: // OK
id = [11, 12]; // Pas OK
```

Pour déterminer dans notre code le type actuel d'une variable:

```typescript
if(typeof id === 'string') console.log(`ID est un string`);
else if(typeof id === 'number') console.log('ID est un nombre');
```

---

Les interfaces peuvent avoir des propriétés facultatives qui ont le droit
d'être `undefined`.

```typescript
interface MyCompoProps {
    className?: string;
    isFocused?: boolean;
    style: object;
}
```

---

## Any

Le type `any` est une triche qui permet de bypasser le système de type.
Une variable de type `any` peut stocker tout type de données sans
lever d'erreur.

Son utilisation n'est pas recommandée et sert à des cas très particuliers.

---

De plus en plus de libs sont écrites en Typescript, comme React.
Cela permet notamment d'avoir de l'auto-complétion quand on développe
et d'avoir une mini-doc toujours à disposition.

Pour avoir les interfaces et types d'une lib externe, il est nécessaire
de les télécharger séparemment. Par convention, ce sont des modules
qui commencent par `@types/`.

```bash
npm install --dev @types/react @types/react-dom
```

---

## Dans la pratique

Au début, Typescript est plutôt contraignant.
Il lève des erreurs partout et en tant que néophyte, on veut typer absolument
tout.

Ce n'est pas nécessaire de vouloir faire parfait dès le début.
Installer Typescript en faisant du Javascript standard (dans des fichiers `.ts`)
est déjà une bonne chose qui améliore le code.

---

**Hands-on**: Convertir un projet NextJS fait en classe en Typescript

Doc: https://nextjs.org/docs/app/building-your-application/configuring/typescript

---