Chapitre 1 Introduction

1.1 Histoire du développement web
1.2 Limitations du JavaScript Web

Type à 2 feuilles

2.1 Qu'est-ce qu'un type ?
2.2 Le système de types de TypeScript
2.3 Types primitifs
2.4 Types d'objets

Chapitre 3 Type avancé

3.1 Le système de types unique de TypeScript
3.2 Combinaison de types
3.3 Comment utiliser les génériques

Chapitre 4 : Types d’expansion et de rétrécissement

4.1 Extension du type
4.2 Réduction du nombre de caractères - Protection des caractères
4.3 Réduction du type - Identification des unions
4.4 Maintien d'une arborescence de types précise avec vérification d'exhaustivité

Chapitre 5 : Utilisation des types

5.1 Types conditionnels
5.2 Utilisation des types littéraux de gabarit
5.3 Utilisation des types d'utilitaires personnalisés
5.4 Son utilisation en tant que type d'objet immuable
5.5 Amélioration des clés de type primitif d'enregistrement

Chapitre 6 : Compilation de TypeScript

6.1 Environnement d'exécution JavaScript et compilation TypeScript
6.2 Comportement du compilateur TypeScript
6.3 Structure du compilateur TypeScript

Chapitre 7 Appels asynchrones

7.1 Requêtes API
7.2 Gestion de l'état de l'API
7.3 Gestion des erreurs de l'API
7.4 Simulation d'API

Chapitre 8 : De JSX à TSX

8.1 Types de composants React
8.2 Création de composants React avec TypeScript
8.3 Résumé

Chapitre 9 Accroche

9.1 Hooks React
9.2 Crochets personnalisés

Chapitre 10 Gestion de l'État

10.1 Gestion d'État
10.2 Bibliothèque de gestion d'état

Chapitre 11 CSS-in-JS

11.1 Qu'est-ce que le CSS-in-JS ?
11.2 Éviter les déclarations de type dupliquées dans les composants stylisés à l'aide de fonctions utilitaires

Chapitre 12 : Gestion de projet TypeScript

12.1 Utilisation des types ambiants
12.2 Utilisation de scripts et de fichiers de configuration
Migration TypeScript 12.3
12.4 Monorepo

Chapitre 13 TypeScript et orientation objet

13.1 Orientation objet en TypeScript
13.2 Comment utiliser Elegant Brothers
13.3 Encapsulation et abstraction
13.4 Résumé

Quelles sont les technologies utilisées par le développeur front-end chez Elegant Brothers ?

Woowahan Brothers a utilisé JavaScript et son propre framework web, WoowahanJS, comme pile technologique officielle pour le développement front-end de son site web.
Cependant, à mesure que le service s'est développé en une application web à grande échelle, les technologies existantes n'ont plus été en mesure de répondre aux besoins métiers en constante évolution.
En raison des difficultés rencontrées pour modifier et maintenir diverses fonctions dues aux limitations de JavaScript, notamment la difficulté à comprendre l'interface, Woowa Brothers a adopté TypeScript basé sur React comme pile technologique standard pour le front-end web.


Pourquoi TypeScript ?

TypeScript est un langage d'extension 100% compatible avec JavaScript et prenant en charge le typage statique pour garantir sa stabilité.
Il offre également un environnement de programmation orienté objet, ce qui est très utile lors du développement d'applications complexes.
Grâce à ces différents avantages, l'introduction de TypeScript + React améliore non seulement les performances et la stabilité, mais facilite également la maintenance.


Guide pratique TypeScript + React par Elegant Brothers

Ce livre présente l'utilisation de TypeScript et de React à travers le cas de développement de Baedal Minjok par Woowa Brothers.
En apprenant la grammaire et les caractéristiques de base de TypeScript et en examinant comment utiliser TypeScript dans React, vous pouvez apprendre à appliquer les deux technologies en pratique.


Pourquoi devrais-je apprendre TypeScript ?

Il existe de nombreuses raisons pour lesquelles vous devriez apprendre TypeScript.
- Prévention des erreurs : Les types étant vérifiés lors de la phase de compilation, les erreurs susceptibles de survenir lors de la phase d'exécution peuvent être détectées et corrigées à l'avance.
- Amélioration de la lisibilité et de la maintenabilité du code : en spécifiant explicitement les types, vous pouvez exprimer clairement la signification du code et accroître sa réutilisabilité et sa maintenabilité.
- Amélioration de l'efficacité de la collaboration : les types de code peuvent améliorer l'efficacité de la collaboration car ils communiquent clairement l'intention du code.
- Compatible avec JavaScript : TypeScript est 100 % compatible avec JavaScript, vous pouvez donc utiliser TypeScript partout où JavaScript est utilisé.

Ces caractéristiques expliquent pourquoi de nombreuses organisations de développement utilisent TypeScript.
Elle est considérée comme l'une des compétences qui vous aideront à devenir un meilleur développeur, il est donc judicieux pour les développeurs front-end de l'apprendre.

Public cible de ce livre

Ce cours s'adresse aux développeurs front-end juniors ayant une expérience de TypeScript ou JavaScript mais souhaitant apprendre TypeScript en profondeur, depuis les bases.
Ce livre présente les concepts et fonctionnalités de base de TypeScript et explique comment utiliser TypeScript et React en pratique, à partir d'exemples d'utilisation fournis par Woowa Brothers.

Connaissances nécessaires avant de lire ce livre

Si vous avez déjà appris les bases du HTML, du CSS et du JavaScript, vous pourrez lire ce livre sans difficulté.
Vous devez également posséder des connaissances de base en React, car cela explique comment utiliser TypeScript dans React.

Structure de ce livre

Chapitre 1 Introduction : Nous allons brièvement passer en revue l’histoire et les limites de JavaScript et examiner le contexte qui a conduit à l’émergence de TypeScript.
Chapitre 2 Types : Nous allons examiner les types fournis par TypeScript pour le typage statique.
Nous allons examiner ce que sont les types, comment ils fonctionnent dans d'autres langages et comment les utiliser en TypeScript.
Chapitre 3 Types avancés : Présente le système de types unique de TypeScript, qui n’existe pas dans les types de données JavaScript.
Nous examinerons ensuite les connaissances nécessaires pour effectuer des vérifications de types plus avancées en appliquant le concept de types.
Chapitre 4 : Extension et restriction de types : Nous examinerons les concepts d’extension et de restriction de types et apprendrons à écrire un code plus extensible et explicite.
Chapitre 5 : Utilisation des types : Présentation d’exemples de la façon dont les Elegant Brothers utilisent TypeScript.
Nous examinerons des exemples de code pratiques tirés des Elegant Brothers et résoudrons les problèmes liés à une saisie incorrecte en utilisant diverses techniques et types utilitaires TypeScript.
Chapitre 6 Compilation TypeScript : Nous examinerons le flux global d’exécution de TypeScript et découvrirons le rôle principal et la structure du compilateur TypeScript.
Voyons maintenant comment cela se compile réellement.
Chapitre 7 Appels asynchrones : Toutes les actions de requête d’une API et de réception d’une réponse sont effectuées de manière asynchrone.
Ce chapitre explique comment gérer les requêtes asynchrones en TypeScript.
Chapitre 8 : De JSX à TSX : Présente comment appliquer la syntaxe JSX utilisée dans React à TypeScript.
Chapitre 9 Hooks : Présente comment gérer l’état ou les effets secondaires à l’aide de plusieurs hooks fournis par React.
Nous aborderons également les hooks personnalisés, qui permettent de réutiliser la logique d'état et de réduire la complexité des composants.
Chapitre 10 : Gestion de l’état : Découvrez l’état, qui joue un rôle crucial dans les applications React.
Apprenez les concepts de base des états et découvrez comment les gérer efficacement.
Chapitre 11 : CSS-in-JS : Le CSS-in-JS est une méthode permettant d’écrire du CSS en JavaScript. Son utilisation simplifie la gestion des styles CSS en les abstrayant au niveau du composant plutôt qu’au niveau du document.
Au chapitre 11, nous apprendrons les concepts et l'utilisation du CSS-in-JS.
Chapitre 12 : Gestion des projets TypeScript : Présente des concepts et des conseils utiles pour les projets TypeScript.
Chapitre 13 : TypeScript et l’orientation objet : Apprenez à tirer parti et à améliorer l’orientation objet dans les environnements TypeScript et React.