TypeScript

Références :

Introduction

TypeScript est un langage open source et il a été créé par Microsoft. Il faut compiler TypeScript pour obtenir du javascript car seul ce dernier est compris des navigateurs. TypeScript est une surcouche au javascript. Cela signifie qu'il fournit toutes les fonctionnalités du js "vanilla" et en ajoute de nouvelles dont voici les principales :

un mécanisme de cohérence des types de données (d'où le nom) qui fait en sorte que le TypeScript soit en "typage statique" (comme Java ou C++) alors que le js est en "typage dynamique"
code completion
refactoring,
...

Installation

npm install -g typescript

Compilation

tsc test.ts

Paramétrage du compilateur

tsc --init

Puis opérer les modifications suivantes dans le fichier tsconfig.json:

"target": "ES2016",

"rootDir": "./src", 

"outDir": "./dist"

Première application avec node et TypeScript

Suivre le tuto suivant : https://khalilstemmler.com/blogs/typescript/node-starter-project/
Vérifier que vous pouvez bien utiliser les commandes :
```
npm run start:dev 
```
et
```
npm run build
```
Ajouter les répertoires src/mocks, src/services et src/models
Dans le répertoire mocks, ajouter le fichier user.json
```
{
	    "id": 1,
	    "name": "Dylan"
	}
```
Dans le répertoire services, ajouter le fichier user.ts qui exporte la fonction getUser qui renvoie une promesse. Dans le cas favorable, la promesse renvoie l'utilisateur que l'on a importé depuis user.json. Attention à typer le retour de getUser avec une interface UserInterface que l'on aura déclaré dans /models/Users.ts
```
export interface UserInterface {
	    id: number;
	    name: string;
	}
```
Enfin, dans le fichier index.ts, créer une fonction anonyme immédiate asynchrone qui fait appel à getUser() et afficher dans la console l'utilisateur. Vous devriez obtenir dans le terminal un message du type :
```
[nodemon] starting `npx ts-node ./src/index.ts`
user :  { id: 1, name: 'Dylan' }
[nodemon] clean exit - waiting for changes before restart
```

Create-react-app + typescript

Documentation :

Pour créer une application react utilisant typescript :

npx create-react-app my-app --template typescript

Exemples de typages avancés :

Objet qui requiert au moins une propriété d'une interface :

type RequireAtLeastOne<T> = {
  [K in keyof T]-?: Required<Pick<T, K>> & Partial<Pick<T, Exclude<keyof T, K>>>
}[keyof T]

interface TaskInterfacePost {
  description: string;
  done: boolean;
  order: number;
}

const test:RequireAtLeastOne<TaskInterfacePost> = {
  done: true
}

coopernet Réussir son site web et ses applications de la conception à la réalisation