1---
  2title: Typescript
  3theme: ./_themes/5ika.css
  4highlightTheme: github
  5verticalSeparator: <!--v-->
  6revealOptions:
  7  transition: 'fade'
  8---
  9
 10
 11# TypeScript
 12
 13---
 14
 15## Qu'est-ce que TypeScript ?
 16
 17- TypeScript est un langage de programmation Open Source développé par Microsoft
 18- C'est une sorte de surcouche à Javascript qui rend le langage **typé**.
 19- 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.
 20
 21---
 22
 23## Avantages de TypeScript
 24
 25- **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.
 26- **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.
 27- **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.
 28
 29---
 30
 31## Installation de TypeScript
 32
 33Pour installer TypeScript, vous pouvez utiliser npm :
 34
 35```bash
 36npm install -g typescript
 37```
 38
 39On peut ainsi utiliser la commande `tsc` qui peut convertir le Typescript en Javascript.
 40Même si généralement, on utilise des outils qui s'occupent de cette conversion automatiquement.
 41
 42---
 43
 44## Exemple de code
 45
 46```typescript
 47function add(a: number, b: number): number {
 48  return a + b;
 49}
 50
 51const result = add(2, 3);
 52```
 53
 54> L'extension de fichier utilisée est `.ts` plutôt que `.js`.
 55> `.tsx` plutôt que `.jsx`.
 56
 57---
 58
 59## Types de données Typescript
 60
 61TypeScript comprend plusieurs types de données prédéfinis, tels que number, string, boolean, object, etc.
 62
 63Voici quelques exemples :
 64
 65```typescript
 66let age: number = 25;
 67let name: string = "John";
 68let isStudent: boolean = true;
 69let person: object = { name: "John", age: 25 };
 70let weekdays: string[] = ["lundi", "jeudi", "samedi"];
 71```
 72
 73Il est également possible de définir des types personnalisés à l'aide des interfaces et des types.
 74
 75---
 76
 77## Interfaces en TypeScript
 78
 79Les interfaces sont utilisées pour définir des contrats de structure de données en TypeScript.
 80
 81Voici un exemple d'utilisation d'interfaces :
 82
 83```typescript
 84interface Person {
 85  name: string;
 86  age: number;
 87  greet: () => void;
 88}
 89
 90const person: Person = {
 91  name: "John",
 92  age: 25,
 93  greet: () => {
 94    console.log(`Hello, my name is ${person.name}`);
 95  },
 96};
 97
 98person.greet();
 99```
100
101---
102
103## Composant React
104
105Typescript nous permet notamment de typer les `props` des composants:
106
107```typescript
108interface Props {
109    posts: Post[];
110    getPost: (id: string) => void;
111}
112
113const PostsLists = (props: Props) => {
114    const {posts, getPost} = props;
115
116    return ...
117}
118```
119
120---
121
122## Hooks
123
124De même, on peut typer les states pour assurer un code consistant:
125
126```typescript
127const Compo = () => {
128    const [count, setCount] = useState<number>(0);
129    const [name, setName] = useState<string>('');
130    const [profile, setProfile] = useState<{name: string, age: number}>();
131
132    // Cela affiche des erreurs:
133    setCount({value:2});
134    setName(13);
135    setProfile({firstname: 'Tim'})
136}
137```
138
139---
140
141## Inférence
142
143Typescript est capable de faire de l'*inférence*.
144C'est à dire qu'il est capable parfois de deviner un type de variable sans qu'on ait besoin
145de lui indiquer. Par exemple avec les hooks:
146
147```typescript
148const Compo = () => {
149    const [count, setCount] = useState(0); // number
150    const [name, setName] = useState('Tim'); // string
151    const [profile, setProfile] = useState({age: 45, city: 'GE'}); // {age: number, city: string}
152
153    const arr = [1, 'yop', null]; // (number | string | null)
154}
155```
156
157---
158
159## Union
160
161Parfois, une variable peut avoir plusieurs types potentiels.
162On peut utiliser une *union* pour la définir:
163
164```typescript
165let id: string | number = 10;
166
167id = '13'; // OK
168id =  13: // OK
169id = [11, 12]; // Pas OK
170```
171
172Pour déterminer dans notre code le type actuel d'une variable:
173
174```typescript
175if(typeof id === 'string') console.log(`ID est un string`);
176else if(typeof id === 'number') console.log('ID est un nombre');
177```
178
179---
180
181Les interfaces peuvent avoir des propriétés facultatives qui ont le droit
182d'être `undefined`.
183
184```typescript
185interface MyCompoProps {
186    className?: string;
187    isFocused?: boolean;
188    style: object;
189}
190```
191
192---
193
194## Any
195
196Le type `any` est une triche qui permet de bypasser le système de type.
197Une variable de type `any` peut stocker tout type de données sans
198lever d'erreur.
199
200Son utilisation n'est pas recommandée et sert à des cas très particuliers.
201
202---
203
204De plus en plus de libs sont écrites en Typescript, comme React.
205Cela permet notamment d'avoir de l'auto-complétion quand on développe
206et d'avoir une mini-doc toujours à disposition.
207
208Pour avoir les interfaces et types d'une lib externe, il est nécessaire
209de les télécharger séparemment. Par convention, ce sont des modules
210qui commencent par `@types/`.
211
212```bash
213npm install --dev @types/react @types/react-dom
214```
215
216---
217
218## Dans la pratique
219
220Au début, Typescript est plutôt contraignant.
221Il lève des erreurs partout et en tant que néophyte, on veut typer absolument
222tout.
223
224Ce n'est pas nécessaire de vouloir faire parfait dès le début.
225Installer Typescript en faisant du Javascript standard (dans des fichiers `.ts`)
226est déjà une bonne chose qui améliore le code.
227
228---
229
230**Hands-on**: Convertir un projet NextJS fait en classe en Typescript
231
232Doc: https://nextjs.org/docs/app/building-your-application/configuring/typescript
233
234---