Différences

Ci-dessous, les différences entre deux révisions de la page.

--- web:javascript:typescript [2017/09/12 22:23] – [Classes] sgariepy
+++ web:javascript:typescript [2019/07/16 16:11] – [Linting] sgariepy
@@ Ligne 1: / Ligne 1: @@
 ====== TypeScript ======
-====== Installation ======
+===== Installation =====
   - Installer node.js
@@ Ligne 7: / Ligne 7: @@
-====== Compilation / Transpile ======
+===== Linting =====
-En installant TypeScript, on installe un //transpiler// qui transforme le code TypeScript en JavaScript.
+<note>Il n'est plus recommendé d'utiliser TSLint, utiliser ''@typescript/eslint'' plutôt.</note>
-  tsc fichier.ts
+  * Visual Studio Code a une extension : TSLint
+  * Linter Documentation : [[https://palantir.github.io/tslint/|TSLint]] ([[https://palantir.github.io/tslint/rules/|Rules]])
+Pour installer:
+  $ npm i -g tslint
-====== TSD ======
+Fichier ''tslint.json'' de base :
-**Remplacé par [[https://www.npmjs.com/package/typings|typings]]**.
 <code>
-// Place your settings in this file to overwrite default and user settings.
 {
-	"files.exclude": {
+    "extends": [
-		"**/.git": true,
+        "tslint:recommended"
-		"**/.DS_Store": true,
+    ],
-        "**/*.js": true,
+    "rules": {
-        "**/*.js.map": true,
-        "**/*.css": true
+    }
-	}
 }
+</code>
+Exemple de fichier ''tslint.json'' : [[https://gitlab.sgy.io/sgy/typescript-base/raw/master/tslint.json|tslint.json]]
+===== Compilation / Transpile =====
+En installant TypeScript, on installe un //transpiler// qui transforme le code TypeScript en JavaScript.
+  $ tsc fichier.ts
+Avec le sourcemap:
+  $ tsc --sourceMap true fichier.ts
+===== Types definitions =====
+Souvent on peut retrouver les définitions de types avec les packages ''@types/*'', où ''*'' est le nom du package original.  Par exemple, pour ''boxen'', on aura ''@types/boxen''.  Quand même vérifier avant d'installer n'importe quel package.
+On peut aussi créer un fichier ''types.d.ts'' au niveau racine du projet.  Dans ce fichier, on peut alors ajouter:
+<code javascript>
+declare module "boxen";
 </code>
+===== Testing =====
+On peut utiliser Jasmine.
+  $ npm install jasmine
+  $ jasmine init
+Karma
+Jest
@@ Ligne 41: / Ligne 77: @@
 <code javascript>
-class ICat {
+interface ICat {
     name: string;
     age: number;
@@ Ligne 48: / Ligne 84: @@
 let fluffy: ICat;
 </code>
+On peut permettre d'ajouter n'importe quelle propriété en utilisant ''[prop]'':
+<code javascript>
+interface ICat {
+    name: string;
+    age: number;
+    [prop: string]: any;
+}
+let fluffy: ICat = {
+    name: "Fluffy",
+    age: 2,
+    eyeColor: "Brown"
+};
+</code>
+On peut le faire pour des fonctions.
+<code>
+interface myFn {
+    (n: number, m: number): number;
+}
+let addition: myFn;
+addition = function(myNumber1: number, myNumber2: number): number {
+    return myNumber1 + myNumber2;
+}
+</code>
+TSLint semble plutôt privilégier cette syntaxe:
+<code>
+type IAdditionFn = (n: number, m: number) => number;
+let addition: IAdditionFn;
+addition = (myNumber1: number, myNumber2: number): number => {
+    return myNumber1 + myNumber2;
+};
+</code>
 ====== Classes ======