TypeScript

Partager par email

×

Le langage TypeScript peut s'appliquer à tout projet JavaScript et ses frameworks tel que React, Angular, Vue, Node.JS, Electron, Jquery... Ce qui le rend incontournable de nos jours.
Le TypeScript est aussi un moyen permettant aux développeurs JavaScript de véritablement monter en compétences et prouver leurs capacités d'appréhender et d'intervenir sur les gros projets à fort trafic et autres applications sensibles et ne permettant pas les libertés hasardeuses du JavaScript classique.

Code Titre Durée Prix HT
JSES6 TypeScript 2 jours Nous consulter

Objectifs

  • Comprendre et maîtriser véritablement le TypeScript et son fonctionnement.
  • Apprendre le TypeScript sur le plan théorique avant de l'appliquer à des cas réels d'utilisation et sur de vrais projets.
  • Apprendre à utiliser le TypeScript et ses diverses fonctionnalités comme les types, les classes, les modules, les interfaces, les Tuples, les Array, les types aliases, les types Assertion, les generics, les utility Types, les decorators, entre autres.
  • Comprendre pourquoi le TypeScript offre un réel avantage par rapport au Vanilla JavaScript.
  • Apprendre à travailler avec des modules en TypeScript
  • Apprendre à travailler avec les classes avec TypeScript

Public

  • Développeurs Web Frontend.
  • Ce cours s'adresse à toute personne qui souhaite étendre ses connaissances au-delà du Vanilla JavaScript, coder proprement et générer un code fiable.
  • Les personnes sans expérience en TypeScript et qui veulent apprendre à coder avec ce langage.

Pré-requis

  • Les connaissances de bases en JavaScript suffisent.
  • Les connaissances en ES6 est un plus apprécié, mais absolument pas obligatoire.
  • Aucune expérience préalable en TypeScript n'est requise.

Post-Formation

Méthodes

50% Pratique 50% Théorique

Programme

Introduction

   Présentation

Les premiers pas en TypeScript

   C'est quoi TypeScript

   Exemple JavaScript vs TypeScript + Compilateur

   Var Const et Let

   Types Stricts vs Dynamiques - Inference vs Assignation

Bases de TypeScript 1

   Type Array

   Type Tuple

   Type Object

Révision et Excercices

Bases de TypeScript 2

   Type Enum

   Type Any

   Type Unknown

   Type Void

   Type Function

   Paramètres facultatifs et par défaut

   Type Rest

   Callback Function Type

   Union Types

   Type Aliases

   Literal Types

   Type Never

   Type Null et Undefined

   Type Assertions

   Type Assertions (Suite)

Les Classes et Interfaces

   Les classes

   Type Array Object d'une Instance

   Héritage et Polymorphisme

   Classes (Private, Public, Protected, Readonly)

   Interfaces

   Interfaces avec les classes

   Propriétés et Méthodes en Static

   Classes Abstraites - Abstract

Les Generics - Utility Types

   Generics

   Generics avec Interfaces

   Generics avec les classes

   Utility Types - Partial

   Utility Types - Readonly

   Utility Types - Record

   Utility Types - Pick

   Utility Type - Omit

   Utility Type - Exclude

   Utility Type - Extract

   Utility Type - NonNullable

   Utility Type - Paramètres

   Utility Type - ReturnType

Configuration du compilateur

   TypeScript Compiler

   tsconfig - RootDir - OutDir

   tsconfig - Include - Exclude

   tsconfig - Lib

   tsconfig - Options de base

Les Modules ES6 et les Namespaces

   Modules Namespaces

   Modules ES6 - Import - Export

Excercice Pratique Le Facturier

Les Décorateurs en TypeScript - Decorators

   Introduction aux Decorators

   Decorators Factories

   Decorator Factories - Exemple Angular Component

   Decorator Composition - Evaluation

   Decorator pour une propriété de classe

   Decorators Méthodes - Accessors

   Decorator sur Paramètres

   Decorator - Return Constructor Function

   Decorator Extends Constructor Function

Excerice sur les Décorateurs

   Exercice 1: Méthode decorator pour bind this

   Exercice 2: Méthode decorator pour bind this sur application facturier

Annexe

   Conditional Types

   Mapped Types

   Mixins

   Singleton Design Pattern - Private Constructor

   Projet NPM

   Typescript avec Webpack

   Webpack SourceMap Debug

   Webpack Dev Server

   Webpack en Production

   Paramétrer le plugin CleanWebpackPlugin et Type definitions

Environnement

Windows, Linux

Mot-clés

Javascript Vanilla, Javascript ES6

Commander