Connexion
S'inscrire
Actualités
Quoi de neuf
Activités générales
Auteurs
Forums
Nouveaux messages
Rechercher un forum
Wiki
Pages
Dernière activité
Quoi de neuf
Nouveaux messages
Nouveaux articles
Nouveaux messages de profil
Activités générales
Membres
Membres inscrits
Visiteurs actuels
Nouveaux messages de profil
Rechercher dans les messages des profils
Teams
Créé ton équipe
Magasin
Quoi de neuf ?
Nouveaux messages
Rechercher un forum
Menu
Connexion
S'inscrire
Install the app
Install
Forums
Forums généraux
Informatique
Développement
TypeScript - JavaScript
JavaScript is disabled. For a better experience, please enable JavaScript in your browser before proceeding.
Vous utilisez un navigateur non à jour ou ancien. Il ne peut pas afficher ce site ou d'autres sites correctement.
Vous devez le mettre à jour ou utiliser un
navigateur alternatif
.
Répondre à la discussion
Message
<blockquote data-quote="deleted535977" data-source="post: 6684583"><p style="text-align: center">Salut a tous <img src="/data/assets/smilies/joueur.gif" class="smilie" loading="lazy" alt=":p" title="Joueur :p" data-shortname=":p" /></p> <p style="text-align: center"></p> <p style="text-align: center">Ont se retrouve sur un Tutoriels [FA]fa-terminal[/FA] Propose par Grafikart - <a href="https://www.grafikart.fr/" target="_blank">GrafiKart </a></p> <p style="text-align: center"><a href="https://www.grafikart.fr/" target="_blank"></a></p> <p style="text-align: center">Le <a href="https://www.typescriptlang.org/" target="_blank">TypeScript</a> est un langage de programmation open-source développé par Microsoft. Le langage se présente comme un sur-ensemble du JavaScript avec notemment l'apport d'un typage statique optionnel des variables et des fonctions, la création de classes et d'interfaces, la création de namespace et de modules.</p> <p style="text-align: center"></p> <p style="text-align: center"><span style="font-size: 18px"><strong>Installation</strong></span></p> <p style="text-align: center"><span style="font-size: 18px"></span></p> <p style="text-align: center"><span style="font-size: 15px">Pour commencer à expérimenter avec le TypeScript vous pouvez utiliser le <a href="https://www.typescriptlang.org/play/index.html" target="_blank">playground</a>. Si vous souhaitez utiliser TypeScript pour vos projets vous pouvez installer le transpiler via npm :</span></p> <p style="text-align: center"><span style="font-size: 15px"></span></p> <p style="text-align: center"><span style="font-size: 15px">[CODE]npm i -g typescript[/CODE]</span></p> <p style="text-align: center"><span style="font-size: 15px"></span></p> <p style="text-align: center"><span style="font-size: 15px">Cette installation vous donnera accès à la commande tsc qui vous permettra de transpiler votre code en JavaScript (ES3, ES5 ou ES2015).</span></p> <p style="text-align: center"><span style="font-size: 15px"></span></p> <p style="text-align: center"><span style="font-size: 15px">[CODE]tsc index.ts[/CODE]</span></p> <p style="text-align: center"><span style="font-size: 15px"></span></p> <p style="text-align: center"><span style="font-size: 15px">Si vous souhaitez transpiler pour le web il vous faudra passer par webpack ou browserify avec l'utilisation de plugin ou de loaders.</span></p> <p style="text-align: center"><span style="font-size: 15px"></span></p> <p style="text-align: center"><span style="font-size: 15px"><span style="font-size: 18px"><strong>Typage</strong></span></span></p> <p style="text-align: center"></p> <p style="text-align: center"></p> <p style="text-align: center"><span style="font-size: 15px"><span style="font-size: 15px">Comme son nom l'indique le TypeScript va vous permettre de définir le type de vos variables, paramètres et retours de fonctions.</span></span></p> <p style="text-align: center"><span style="font-size: 15px"><span style="font-size: 15px"></span></span></p> <p style="text-align: center"><span style="font-size: 15px"><span style="font-size: 15px">[CODE]let a: number[/SIZE][/SIZE][/CENTER]</span></span></p> <p style="text-align: center"><span style="font-size: 15px"><span style="font-size: 15px">[SIZE=4][SIZE=4]</span></span></p> <p style="text-align: center"><span style="font-size: 15px"><span style="font-size: 15px">[CENTER]</span></span></p> <p style="text-align: center"><span style="font-size: 15px"><span style="font-size: 15px">function demo(selector: string, options: {ease: string, duration: number}): Element{</span></span></p> <p style="text-align: center"><span style="font-size: 15px"><span style="font-size: 15px"> return document.querySelector(selector)</span></span></p> <p style="text-align: center"><span style="font-size: 15px"><span style="font-size: 15px">}[/CODE]</span></span></p><p></p><p style="text-align: center"><span style="font-size: 15px"><span style="font-size: 15px"></span></span></p> <p style="text-align: center"><span style="font-size: 15px"><span style="font-size: 15px">Ce typage peut se fait aussi de manière implicite lorsque l'on assigne une valeur à une variable.</span></span></p> <p style="text-align: center"><span style="font-size: 15px"><span style="font-size: 15px"></span></span></p> <p style="text-align: center"><span style="font-size: 15px"><span style="font-size: 15px">[CODE]let a = 3[/SIZE][/SIZE][/CENTER]</span></span></p> <p style="text-align: center"><span style="font-size: 15px"><span style="font-size: 15px">[SIZE=4][SIZE=4]</span></span></p> <p style="text-align: center"><span style="font-size: 15px"><span style="font-size: 15px">[CENTER]a = "Salut les gens" // Type 'string' is not assignable to type 'number'[/CODE]</span></span></p><p></p><p style="text-align: center"><span style="font-size: 15px"><span style="font-size: 15px"></span></span></p> <p style="text-align: center"><span style="font-size: 15px"><span style="font-size: 15px"><span style="font-size: 18px"><strong>Les Classes</strong></span></span></span></p> <p style="text-align: center"></p> <p style="text-align: center"><span style="font-size: 15px"><span style="font-size: 15px"><span style="font-size: 15px">Avec l'<a href="https://www.grafikart.fr/tutoriels/javascript/ecmascript-2015-757" target="_blank">ES2015</a> le JavaScript supporte l'utilisation du mot clef class. Le TypeScript pousse les choses plus loin en permettant de gérer la visibilité des propriétés et la gestion des méthodes statiques.</span></span></span></p> <p style="text-align: center"><span style="font-size: 15px"></span></p> <p style="text-align: center"><span style="font-size: 15px">[CODE]class Demo {[/SIZE][/CENTER]</span></p> <p style="text-align: center"><span style="font-size: 15px">[SIZE=4]</span></p> <p style="text-align: center"><span style="font-size: 15px">[CENTER]</span></p> <p style="text-align: center"><span style="font-size: 15px"> private factor</span></p> <p style="text-align: center"><span style="font-size: 15px"></span></p> <p style="text-align: center"><span style="font-size: 15px"> constructor (factor: number) {</span></p> <p style="text-align: center"><span style="font-size: 15px"> this.factor = factor</span></p> <p style="text-align: center"><span style="font-size: 15px"> }</span></p> <p style="text-align: center"><span style="font-size: 15px"></span></p> <p style="text-align: center"><span style="font-size: 15px"> public multiplie (n: number): number {</span></p> <p style="text-align: center"><span style="font-size: 15px"> return n * this.factor</span></p> <p style="text-align: center"><span style="font-size: 15px"> }</span></p> <p style="text-align: center"><span style="font-size: 15px"></span></p> <p style="text-align: center"><span style="font-size: 15px"> static salut (): string {</span></p> <p style="text-align: center"><span style="font-size: 15px"> return 'Salut'</span></p> <p style="text-align: center"><span style="font-size: 15px"> }</span></p> <p style="text-align: center"><span style="font-size: 15px"></span></p> <p style="text-align: center"><span style="font-size: 15px">}[/CODE]</span></p><p></p><p style="text-align: center"><span style="font-size: 15px"></span></p> <p style="text-align: center"><span style="font-size: 15px">Il est aussi possible de déclarer des accesseurs et mutateurs afin de mieux controler ce qui rentre et sort de votre objet.</span></p> <p style="text-align: center"><span style="font-size: 15px"></span></p> <p style="text-align: center"><span style="font-size: 15px">[CODE]class Color {[/SIZE][/CENTER]</span></p> <p style="text-align: center"><span style="font-size: 15px">[SIZE=4]</span></p> <p style="text-align: center"><span style="font-size: 15px">[CENTER]</span></p> <p style="text-align: center"><span style="font-size: 15px"> private _color: string</span></p> <p style="text-align: center"><span style="font-size: 15px"></span></p> <p style="text-align: center"><span style="font-size: 15px"> public constructor (color) {</span></p> <p style="text-align: center"><span style="font-size: 15px"> this._color = color</span></p> <p style="text-align: center"><span style="font-size: 15px"> }</span></p> <p style="text-align: center"><span style="font-size: 15px"></span></p> <p style="text-align: center"><span style="font-size: 15px"> set color (color) {</span></p> <p style="text-align: center"><span style="font-size: 15px"> this._color</span></p> <p style="text-align: center"><span style="font-size: 15px"> }</span></p> <p style="text-align: center"><span style="font-size: 15px"></span></p> <p style="text-align: center"><span style="font-size: 15px"> get color () {</span></p> <p style="text-align: center"><span style="font-size: 15px"> if (this._color === 'rouge') {</span></p> <p style="text-align: center"><span style="font-size: 15px"> return 'vert'</span></p> <p style="text-align: center"><span style="font-size: 15px"> } else {</span></p> <p style="text-align: center"><span style="font-size: 15px"> return this._color</span></p> <p style="text-align: center"><span style="font-size: 15px"> }</span></p> <p style="text-align: center"><span style="font-size: 15px"> }</span></p> <p style="text-align: center"><span style="font-size: 15px"></span></p> <p style="text-align: center"><span style="font-size: 15px">}</span></p> <p style="text-align: center"><span style="font-size: 15px"></span></p> <p style="text-align: center"><span style="font-size: 15px">let c = new Color('rouge')</span></p> <p style="text-align: center"><span style="font-size: 15px">console.log(c.color) // vert[/CODE]</span></p><p></p><p style="text-align: center"><span style="font-size: 15px"></span></p> <p style="text-align: center"><span style="font-size: 15px"><span style="font-size: 18px"><strong>Les Namespaces</strong></span></span></p> <p style="text-align: center"></p> <p style="text-align: center"><span style="font-size: 15px"><span style="font-size: 15px">Les namespaces vous permettent d'organiser les variables dans un groupe donné afin d'éviter les problèmes d'écrasement des variables.</span></span></p> <p style="text-align: center"><span style="font-size: 15px"></span></p> <p style="text-align: center"><span style="font-size: 15px">[CODE]namespace Grafikart {[/SIZE][/CENTER]</span></p> <p style="text-align: center"><span style="font-size: 15px">[SIZE=4]</span></p> <p style="text-align: center"><span style="font-size: 15px">[CENTER] export let var1 = 3</span></p> <p style="text-align: center"><span style="font-size: 15px"> let var2 = 4</span></p> <p style="text-align: center"><span style="font-size: 15px"> export class Demo { }</span></p> <p style="text-align: center"><span style="font-size: 15px">}</span></p> <p style="text-align: center"><span style="font-size: 15px">Grafikart.var1 // 3</span></p> <p style="text-align: center"><span style="font-size: 15px">Grafikart var2 // Erreur, cela n'existe pas en dehors du module</span></p> <p style="text-align: center"><span style="font-size: 15px">let d = new Grafikart.Demo() // Objet de type Grafikart.Demo[/CODE]</span></p><p></p><p style="text-align: center"><span style="font-size: 15px"></span></p> <p style="text-align: center"><span style="font-size: 15px"><span style="font-size: 18px"><strong>Les modules</strong></span></span></p> <p style="text-align: center"></p> <p style="text-align: center"><span style="font-size: 15px"><span style="font-size: 15px">Les modules se présentent comme des namespaces que l'on va pouvoir isoler dans un fichier séparé. Le principe est relativement similaire.</span></span></p> <p style="text-align: center"><span style="font-size: 15px"><span style="font-size: 15px"></span></span></p> <p style="text-align: center"><span style="font-size: 15px"><span style="font-size: 15px">[CODE]// demo.ts[/SIZE][/SIZE][/CENTER]</span></span></p> <p style="text-align: center"><span style="font-size: 15px"><span style="font-size: 15px">[SIZE=4][SIZE=4]</span></span></p> <p style="text-align: center"><span style="font-size: 15px"><span style="font-size: 15px">[CENTER]export let var1 = 3</span></span></p> <p style="text-align: center"><span style="font-size: 15px"><span style="font-size: 15px">let var2 = 4</span></span></p> <p style="text-align: center"><span style="font-size: 15px"><span style="font-size: 15px">export class Demo { }</span></span></p> <p style="text-align: center"><span style="font-size: 15px"><span style="font-size: 15px"></span></span></p> <p style="text-align: center"><span style="font-size: 15px"><span style="font-size: 15px">// index.ts</span></span></p> <p style="text-align: center"><span style="font-size: 15px"><span style="font-size: 15px">import { var1, Demo } from './demo'</span></span></p> <p style="text-align: center"><span style="font-size: 15px"><span style="font-size: 15px">var1 // 3[/CODE]</span></span></p></blockquote><p></p>
[QUOTE="deleted535977, post: 6684583"] [CENTER]Salut a tous :p Ont se retrouve sur un Tutoriels [FA]fa-terminal[/FA] Propose par Grafikart - [URL='https://www.grafikart.fr/']GrafiKart [/URL] Le [URL='https://www.typescriptlang.org/']TypeScript[/URL] est un langage de programmation open-source développé par Microsoft. Le langage se présente comme un sur-ensemble du JavaScript avec notemment l'apport d'un typage statique optionnel des variables et des fonctions, la création de classes et d'interfaces, la création de namespace et de modules. [SIZE=5][B]Installation[/B] [/SIZE] [SIZE=4]Pour commencer à expérimenter avec le TypeScript vous pouvez utiliser le [URL='https://www.typescriptlang.org/play/index.html']playground[/URL]. Si vous souhaitez utiliser TypeScript pour vos projets vous pouvez installer le transpiler via npm : [CODE]npm i -g typescript[/CODE] Cette installation vous donnera accès à la commande tsc qui vous permettra de transpiler votre code en JavaScript (ES3, ES5 ou ES2015). [CODE]tsc index.ts[/CODE] Si vous souhaitez transpiler pour le web il vous faudra passer par webpack ou browserify avec l'utilisation de plugin ou de loaders. [SIZE=5][B]Typage[/B][/SIZE][/SIZE] [SIZE=4][SIZE=5][B][/B][/SIZE][/SIZE] [SIZE=4][SIZE=5][B][/B][/SIZE][/SIZE] [SIZE=4][SIZE=4]Comme son nom l'indique le TypeScript va vous permettre de définir le type de vos variables, paramètres et retours de fonctions. [CODE]let a: number[/SIZE][/SIZE][/CENTER] [SIZE=4][SIZE=4] [CENTER] function demo(selector: string, options: {ease: string, duration: number}): Element{ return document.querySelector(selector) }[/CODE][/SIZE][/SIZE][/CENTER][SIZE=4][SIZE=4][/SIZE][/SIZE] [CENTER][SIZE=4][SIZE=4] Ce typage peut se fait aussi de manière implicite lorsque l'on assigne une valeur à une variable. [CODE]let a = 3[/SIZE][/SIZE][/CENTER] [SIZE=4][SIZE=4] [CENTER]a = "Salut les gens" // Type 'string' is not assignable to type 'number'[/CODE][/SIZE][/SIZE][/CENTER][SIZE=4][SIZE=4][/SIZE][/SIZE] [CENTER][SIZE=4][SIZE=4] [SIZE=5][B]Les Classes[/B][/SIZE][/SIZE][/SIZE] [SIZE=4][SIZE=4][SIZE=5][/SIZE][/SIZE][/SIZE] [SIZE=4][SIZE=4][SIZE=4]Avec l'[URL='https://www.grafikart.fr/tutoriels/javascript/ecmascript-2015-757']ES2015[/URL] le JavaScript supporte l'utilisation du mot clef class. Le TypeScript pousse les choses plus loin en permettant de gérer la visibilité des propriétés et la gestion des méthodes statiques.[/SIZE][/SIZE] [CODE]class Demo {[/SIZE][/CENTER] [SIZE=4] [CENTER] private factor constructor (factor: number) { this.factor = factor } public multiplie (n: number): number { return n * this.factor } static salut (): string { return 'Salut' } }[/CODE][/SIZE][/CENTER][SIZE=4][/SIZE] [CENTER][SIZE=4] Il est aussi possible de déclarer des accesseurs et mutateurs afin de mieux controler ce qui rentre et sort de votre objet. [CODE]class Color {[/SIZE][/CENTER] [SIZE=4] [CENTER] private _color: string public constructor (color) { this._color = color } set color (color) { this._color } get color () { if (this._color === 'rouge') { return 'vert' } else { return this._color } } } let c = new Color('rouge') console.log(c.color) // vert[/CODE][/SIZE][/CENTER][SIZE=4][/SIZE] [CENTER][SIZE=4] [SIZE=5][B]Les Namespaces[/B][/SIZE][/SIZE] [SIZE=4][SIZE=5][/SIZE][/SIZE] [SIZE=4][SIZE=4]Les namespaces vous permettent d'organiser les variables dans un groupe donné afin d'éviter les problèmes d'écrasement des variables.[/SIZE] [CODE]namespace Grafikart {[/SIZE][/CENTER] [SIZE=4] [CENTER] export let var1 = 3 let var2 = 4 export class Demo { } } Grafikart.var1 // 3 Grafikart var2 // Erreur, cela n'existe pas en dehors du module let d = new Grafikart.Demo() // Objet de type Grafikart.Demo[/CODE][/SIZE][/CENTER][SIZE=4][/SIZE] [CENTER][SIZE=4] [SIZE=5][B]Les modules[/B][/SIZE][/SIZE] [SIZE=4][SIZE=5][/SIZE][/SIZE] [SIZE=4][SIZE=4]Les modules se présentent comme des namespaces que l'on va pouvoir isoler dans un fichier séparé. Le principe est relativement similaire. [CODE]// demo.ts[/SIZE][/SIZE][/CENTER] [SIZE=4][SIZE=4] [CENTER]export let var1 = 3 let var2 = 4 export class Demo { } // index.ts import { var1, Demo } from './demo' var1 // 3[/CODE][/SIZE][/SIZE][/CENTER][SIZE=4][SIZE=4][/SIZE][/SIZE] [/QUOTE]
Insérer les citations…
Vérification
Publier la réponse
Forums
Forums généraux
Informatique
Développement
TypeScript - JavaScript
Ce site utilise des cookies. En continuant à utiliser ce site, vous acceptez l'utilisation des cookies.
Acceptez
En savoir plus.…
Haut