Arrêtez de coder en JavaScript!

JavaScript n’est pas un nouveau langage. Avec 23 ans derrière la cravate, JS a fait sa place parmi les langages web malgré toutes les embûches connues. On a qu’à penser à Internet Explorer qui fait des siennes avec certaines fonctions non prises en charge, ou encore à Internet Explorer qui exécute le JS assez lentement, ou Internet Explorer qui ne se conforme pas aux avancées de ECMAScript… 😛

J’ai soif 🍺

Ajourd’hui, on va parler de TypeScript. Je vais vous montrer comment monter un environnement de développement facilement. Si vous avez l’habitude de travailler avec JS + jQuery, vous ne voudrez plus jamais en refaire 😉

Les sources de cet article sont disponibles sur GitHub.

Prérequis

Avant de partir, assurons-nous que vous avez le strict minimum pour développer en TS.

NodeJS

Les dépendances

Une fois Node installé, vous devrez ajouter des dépendances globales pour npm, le gestionnaire de paquets de Node. Lorsqu’installées globalement, ces dépendances seront disponibles pour toutes vos futures applications. Vous pouvez exécuter les commandes suivantes de n’importe où dans un shell.

TypeScript

npm install -g typescript

1	npm install -g typescript

GruntJS

npm install -g grunt-cli

1	npm install -g grunt-cli

Configuration du projet

Trouvez un répertoire vide où vous allez créer votre projet. Depuis ce répertoire vide, ouvrez une invite de commande et exécuter :

npm init

npm init

Puis répondez aux questions du meilleur de votre connaissance 😉 laissez vide ou par défaut si vous ne connaissez pas la réponse. Vous devriez avoir un nouveau fichier appellé package.json qui devrait ressembler à :

{
  "name": "tsdemo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

{

"name": "tsdemo",

"version": "1.0.0",

"description": "",

"main": "index.js",

"scripts": {

"test": "echo \"Error: no test specified\" && exit 1"

"author": "",

"license": "ISC"

}

GruntJS

Grâce à ce fichier, nous allons pouvoir configurer des dépendances spécifiques au projet et lancer la compilation du TypeScript. Dans un premier temps, nous allons configurer Grunt qui nous servira à compiler le code TypeScript en JavaScript. Exécuter :

npm install --save-dev grunt

1	npm install --save-dev grunt

Grunt est un peu l’équivalent de Ant. Il nous permet de scripter des processus répétitifs facilement en proposant une multitude de plugins différents. Par exemple, installons celui de TypeScript :

npm install --save-dev grunt-ts
npm install --save-dev typescript

1 2	npm install --save-dev grunt-ts npm install --save-dev typescript

Ces plugins vont nous permettre d’exécuter la compilation. Installons maintenant un plugin pour supprimer un répertoire, question de le nettoyer avant de compiler :

npm install --save-dev grunt-contrib-clean

1	npm install --save-dev grunt-contrib-clean

Le Gruntfile

Après avoir installé tous ces modules pour Grunt, nous allons créer un fichier de configuration qui va définir les actions à exécuter. À la racine du projet, à côté de package.json , créer un fichier nommé Gruntfile.js .

module.exports = function (grunt) {
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json')
  });
	
  grunt.registerTask('default', []);
};

module.exports = function (grunt) {

grunt.initConfig({

pkg: grunt.file.readJSON('package.json')

});

grunt.registerTask('default', []);

};

À l’intérieur de ce fichier, nous allons charger les plugins préallablement installés via npm :

module.exports = function (grunt) {
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json')
  });
	
  grunt.loadNpmTasks('grunt-ts'); 
  grunt.loadNpmTasks('grunt-contrib-clean');

  grunt.registerTask('default', []);
};

module.exports = function (grunt) {

grunt.initConfig({

pkg: grunt.file.readJSON('package.json')

});

grunt.loadNpmTasks('grunt-ts');

grunt.loadNpmTasks('grunt-contrib-clean');

grunt.registerTask('default', []);

};

À la racine du projet, si vous ouvrez une invite de commande et tapez grunt, vous devriez voir done. Je reprendrai plus bas pour la configuration des différents plugins.

La structure de répertoire

Cette étape est facultative. Il n’y a pas de structure de répertoire meilleure qu’une autre, tant que ça reste compréhensible. Voici un exemple :

À la racine : Ne laissez que les fichiers de configuration. Créer plutôt un répertoire build et un src.

Hello World!

Cet article prend en compte que vous connaissez la syntaxe de TypeScript. Si vous ne connaissez pas, lisez ceci. Peu importe la nature de l’application, nous allons considérer que votre code est dans src , sans regard aux sous répertoires. Voici un exemple qui n’est qu’un Hello World en MVC :

export class SomeModel {
    public message: string;
}

export class SomeModel {

public message: string;

}

Puis :

import {SomeModel} from './some.model';

export class SomeService {
    public getMessage(): SomeModel {
        return {
            message: 'Hello world!'
        };
    }
}

import {SomeModel} from './some.model';

export class SomeService {

public getMessage(): SomeModel {

return {

message: 'Hello world!'

};

}

Et finalement… :

import {SomeService} from './some.service';

export class SomeController {
    private service: SomeService;

    constructor(service: SomeService) {
        this.service = service;
        this.initializeEvents();
    }

    public writeMessage() {
        let model = this.service.getMessage();
        document.getElementById('hello-world').innerText = model.message;
    }

    private initializeEvents() {
        document.getElementById('btn-print').onclick = () =&gt; this.writeMessage();
    }
}

import {SomeService} from './some.service';

export class SomeController {

private service: SomeService;

constructor(service: SomeService) {

this.service = service;

this.initializeEvents();

}

public writeMessage() {

let model = this.service.getMessage();

document.getElementById('hello-world').innerText = model.message;

}

private initializeEvents() {

document.getElementById('btn-print').onclick = () => this.writeMessage();

}

Le principe est simple, nous utiliserons le service pour générer une instance du model et l’afficher dans la vue lorsque nous cliquerons sur un bouton. Remarquez aussi que le service sera injecté au contrôleur. Voici la vue :

<!DOCTYPE html>
<html>
<head>
    <title>DemoTS</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.5/require.min.js"></script>
</head>
<body>
<button id="btn-print">Message</button>
<output id="hello-world"></output>

<script src="../build/bundle.js"></script>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>DemoTS</title>

</head>

<body>

<button id="btn-print">Message</button>

</body>

</html>

Remarquez ici qu’on n’importe un seul fichier JavaScript qui sera notre code TS compilé. Notez aussi l’utilisation de RequireJS, puisque les modules de TypeScript que nous avons créés seront compilés pour être des modules RequireJS.

Le point d’entrée

Afin de démarrer notre application TS, il nous faut un point d’entrée qui sera responsable d’initialiser les différents composants. Voici un exemple simple qui ne sera responsable que d’injecter le service au contrôleur :

import {SomeService} from './some.service';
import {SomeController} from './some.controller';

export class Main {
    constructor() {
        const service = new SomeService();
        const controller = new SomeController(service);
    }
}

const main = new Main();

import {SomeService} from './some.service';

import {SomeController} from './some.controller';

export class Main {

constructor() {

const service = new SomeService();

const controller = new SomeController(service);

}

const main = new Main();

Vous remarquerez aussi l’instanciation de Main . Ceci va démarrer l’application.

Configuration de Grunt

Un peu plus haut, nous avons créé un Gruntfile.js , mais ne l’avons pas configuré. Commençons par le nettoyage d’un dossier qui accueillera le code compilé. La configuration de Grunt va dans l’objet passé en paramètre à grunt.initConfig().

Clean

Consulter la documentation du plugin.

clean: {
  default: ['build']
}

clean: {

default: ['build']

}

Ceci supprimera le contenu du dossier build.

Compiler

Consulter la documentation du plugin.

ts: {
  default: {
    src: ['src/**/*.ts'],
    out: 'build/bundle.js'

  },
  options: {
    module: 'amd',
    fast: 'never',
    target: 'es5',
    declaration: false,
    sourceMap: false,
    removeComments: true,
    noImplicitAny: false
  }
}

ts: {

default: {

src: ['src/**/*.ts'],

out: 'build/bundle.js'

options: {

module: 'amd',

fast: 'never',

target: 'es5',

declaration: false,

sourceMap: false,

removeComments: true,

noImplicitAny: false

}

Ceci compilera tous les fichiers portant l’extension ts dans un seul fichier bundle.js .

Configurer la tâche par défaut

Éditez simplement le paramètre passé à la fonction registerTask() afin de lister les plugins à appeler :

grunt.registerTask('default', ['clean', 'ts']);

1	grunt.registerTask('default', ['clean', 'ts']);

Puis, exécutez grunt via l’invite de commande!

Conclusion

Espérons-le, vous avez appris à vous débarrasser une fois pour toute de JS dans vos projets web! Le principal avantage d’utiliser TS est qu’il y a de la compilation en place, donc aussi une certaine validation du code avant l’exécution de ce dernier, contrairement à JS.

Les sources de cet article sont disponibles sur GitHub.

Si vous avez apprécié, partagez 🙂 Nous produisons chaque semaine du contenu gratuit et sans pub pour vous, chère communauté.

Partager sur Facebook

Partager sur Twitter

Arrêtez de coder en JavaScript!

Prérequis

Les dépendances

Configuration du projet

GruntJS

Le Gruntfile

La structure de répertoire

Hello World!

Le point d’entrée

Configuration de Grunt

Clean

Compiler

Configurer la tâche par défaut

Conclusion

60

SHARES

Écrit par

Sylvain Cloutier

Tags

Commentaires

Laisser un commentaire

Annuler la réponse.

Catégories

Suivez-nous par courriel!

Publications récentes

Ce qu’on dit sur Twitter

Arrêtez de coder en JavaScript!

Prérequis

Les dépendances

Configuration du projet

GruntJS

Le Gruntfile

La structure de répertoire

Hello World!

Le point d’entrée

Configuration de Grunt

Clean

Compiler

Configurer la tâche par défaut

Conclusion

60

SHARES

Articles qui pourraient vous intéresser :

Écrit par

Sylvain Cloutier

Tags

Commentaires

Laisser un commentaire

Annuler la réponse.

Catégories

Suivez-nous par courriel!

Publications récentes

Ce qu’on dit sur Twitter

Suivez-nous!