web:javascript:typescript
Différences
Ci-dessous, les différences entre deux révisions de la page.
Les deux révisions précédentesRévision précédenteProchaine révision | Révision précédenteProchaine révisionLes deux révisions suivantes | ||
web:javascript:typescript [2017/09/12 22:23] – [Classes] sgariepy | web:javascript:typescript [2019/04/01 19:19] – [Types] sgariepy | ||
---|---|---|---|
Ligne 1: | Ligne 1: | ||
====== TypeScript ====== | ====== TypeScript ====== | ||
- | ====== Installation | + | ===== Installation ===== |
- Installer node.js | - Installer node.js | ||
Ligne 7: | Ligne 7: | ||
- | ====== Compilation / Transpile ====== | + | ===== Linting |
- | En installant TypeScript, on installe un //transpiler// qui transforme le code TypeScript en JavaScript. | + | * Visual Studio Code a une extension : TSLint |
+ | * Linter Documentation : [[https://palantir.github.io/tslint/|TSLint]] ([[https:// | ||
- | tsc fichier.ts | + | Pour installer: |
+ | $ npm i -g tslint | ||
+ | Fichier '' | ||
+ | < | ||
+ | { | ||
+ | " | ||
+ | " | ||
+ | ], | ||
+ | " | ||
+ | | ||
+ | } | ||
+ | } | ||
+ | </ | ||
- | ====== TSD ====== | ||
- | **Remplacé par [[https://www.npmjs.com/package/typings|typings]]**. | + | Exemple de fichier '' |
+ | ===== Compilation / Transpile ===== | ||
+ | En installant TypeScript, on installe un // | ||
+ | $ tsc fichier.ts | ||
+ | | ||
+ | Avec le sourcemap: | ||
- | < | + | $ tsc --sourceMap |
- | // Place your settings in this file to overwrite default and user settings. | + | |
- | { | + | |
- | " | + | |
- | " | + | |
- | "**/.DS_Store": | + | |
- | " | + | |
- | " | + | |
- | " | + | |
- | } | + | |
- | } | + | |
+ | |||
+ | |||
+ | |||
+ | ===== Types definitions ===== | ||
+ | |||
+ | Souvent on peut retrouver les définitions de types avec les packages '' | ||
+ | |||
+ | On peut aussi créer un fichier '' | ||
+ | |||
+ | <code javascript> | ||
+ | declare module " | ||
</ | </ | ||
+ | |||
+ | ===== Testing ===== | ||
+ | |||
+ | |||
+ | On peut utiliser Jasmine. | ||
+ | |||
+ | $ npm install jasmine | ||
+ | $ jasmine init | ||
+ | |||
+ | |||
+ | |||
+ | Karma | ||
+ | |||
+ | |||
+ | Jest | ||
Ligne 41: | Ligne 74: | ||
<code javascript> | <code javascript> | ||
- | class ICat { | + | interface |
name: string; | name: string; | ||
age: number; | age: number; | ||
Ligne 48: | Ligne 81: | ||
let fluffy: ICat; | let fluffy: ICat; | ||
</ | </ | ||
+ | |||
+ | On peut permettre d' | ||
+ | |||
+ | |||
+ | <code javascript> | ||
+ | interface ICat { | ||
+ | name: string; | ||
+ | age: number; | ||
+ | [prop: string]: any; | ||
+ | } | ||
+ | |||
+ | let fluffy: ICat = { | ||
+ | name: " | ||
+ | age: 2, | ||
+ | eyeColor: " | ||
+ | }; | ||
+ | </ | ||
+ | |||
+ | On peut le faire pour des fonctions. | ||
+ | |||
+ | < | ||
+ | interface myFn { | ||
+ | (n: number, m: number): number; | ||
+ | } | ||
+ | |||
+ | let addition: myFn; | ||
+ | addition = function(myNumber1: | ||
+ | return myNumber1 + myNumber2; | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | TSLint semble plutôt privilégier cette syntaxe: | ||
+ | |||
+ | < | ||
+ | type IAdditionFn = (n: number, m: number) => number; | ||
+ | |||
+ | let addition: IAdditionFn; | ||
+ | addition = (myNumber1: number, myNumber2: number): number => { | ||
+ | return myNumber1 + myNumber2; | ||
+ | }; | ||
+ | </ | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
====== Classes ====== | ====== Classes ====== |
web/javascript/typescript.txt · Dernière modification : 2022/02/02 00:42 de 127.0.0.1