From 4d0b23f608eea4801f243a4d9aeae8179acf1e64 Mon Sep 17 00:00:00 2001 From: Bruno Lesieur Date: Sat, 1 Jul 2017 18:46:04 +0200 Subject: [PATCH 1/3] Traduction de `typescript.md` Signed-off-by: Bruno Lesieur --- src/v2/guide/typescript.md | 72 +++++++++++++++++++------------------- 1 file changed, 36 insertions(+), 36 deletions(-) diff --git a/src/v2/guide/typescript.md b/src/v2/guide/typescript.md index 2e0495b6c6..3f6f5a0f6b 100644 --- a/src/v2/guide/typescript.md +++ b/src/v2/guide/typescript.md @@ -1,28 +1,28 @@ --- -title: TypeScript Support (En) +title: Support de TypeScript type: guide order: 25 --- -## Important 2.2 Change Notice for TS + webpack 2 users +## Changements importants dans la 2.2 pour les utilisateurs TS + webpack 2 -

**Cette page est en cours de traduction française. Revenez une autre fois pour lire une traduction achevée ou [participez à la traduction française ici](https://github.com/vuejs-fr/vuejs.org).**

In Vue 2.2 we introduced dist files exposed as ES modules, which will be used by default by webpack 2. Unfortunately, this introduced an unintentional breaking change because with TypeScript + webpack 2, `import Vue = require('vue')` will now return a synthetic ES module object instead of Vue itself.

+Dans Vue 2.2 nous avons introduit des fichiers de distribution en tant que modules ES, qui sont utilisés par défaut par webpack 2. Malheureusement, cela a introduit un changement de non retrocompatiblilité non souhaité car avec TypeScript + webpack 2, `import Vue = require('vue')` retourne maintenant un objet module ES synthétique au lieu de Vue lui-même. -We plan to move all official declarations to use ES-style exports in the future. Please see [Recommended Configuration](#Recommended-Configuration) below on a future-proof setup. +Nous avons prévu de bouger toutes les déclarations officielles d'export dans le style ES dans le futur. S'il vous plait regardez [la configuration recommandée](#Configuration-recommandee) ci-dessous pour une mise en place future. -## Official Declaration in NPM Packages +## Déclaration officielle dans les packages npm -A static type system can help prevent many potential runtime errors, especially as applications grow. That's why Vue ships with [official type declarations](https://github.com/vuejs/vue/tree/dev/types) for [TypeScript](https://www.typescriptlang.org/) - not only in Vue core, but also for [vue-router](https://github.com/vuejs/vue-router/tree/dev/types) and [vuex](https://github.com/vuejs/vuex/tree/dev/types) as well. +Un système de typage statique peut aider à prévenir des erreurs d'exécutions potentielles, et tout spécialement pour les applications qui grandissent. C'est pourquoi Vue est fourni avec des déclarations de types officielles]((https://github.com/vuejs/vue/tree/dev/types) pour [TypeScript](https://www.typescriptlang.org/), et pas seulement pour le cœur de Vue, mais aussi pour [vue-router](https://github.com/vuejs/vue-router/tree/dev/types) et [vuex](https://github.com/vuejs/vuex/tree/dev/types). -Since these are [published on NPM](https://unpkg.com/vue/types/), and the latest TypeScript knows how to resolve type declarations in NPM packages, this means when installed via NPM, you don't need any additional tooling to use TypeScript with Vue. +Puisque ceux-ci sont [publiés sur npm](https://unpkg.com/vue/types/), et que la dernière version de TypeScript sait comment résoudre des déclarations de type dans des packages npm, cela signifie qu'installer ceux-ci via npm ne requiert aucun outil supplémentaire pour les utiliser avec TypeScript dans Vue. -## Recommended Configuration +## Configuration recommandée ``` js // tsconfig.json { "compilerOptions": { - // ... other options omitted + // ... les autres options sont omises "allowSyntheticDefaultImports": true, "lib": [ "dom", @@ -33,39 +33,39 @@ Since these are [published on NPM](https://unpkg.com/vue/types/), and the latest } ``` -Note the `allowSyntheticDefaultImports` option allows us to use the following: +Notez que l'option `allowSyntheticDefaultImports` nous permet d'utiliser l'import comme cela : ``` js import Vue from 'vue' ``` -instead of: +plutôt que comme cela : ``` js import Vue = require('vue') ``` -The former (ES module syntax) is recommended because it is consistent with recommended plain ES usage, and in the future we are planning to move all official declarations to use ES-style exports. +La forme ES est la syntaxe recommandée pour l'appel de modules car elle est consistante avec l'utilisation ES. Nous planifions dans le futur de transformer toutes les déclarations avec l'export de style ES. -In addition, if you are using TypeScript with webpack 2, the following is also recommended: +De plus, si vous utilisez TypeScript avec webpack 2, les options suivantes sont également recommandées : ``` js { "compilerOptions": { - // ... other options omitted + // ... les autres options sont omises "module": "es2015", "moduleResolution": "node" } } ``` -This tells TypeScript to leave the ES module import statements intact, which in turn allows webpack 2 to take advantage of ES-module-based tree-shaking. +Ceci dit à TypeScript de laisser les instructions d'import de modules ES intacte, ce qui permet à webpack 2 de tirer parti du *tree-shaking* basé sur les modules ES. -See [TypeScript compiler options docs](https://www.typescriptlang.org/docs/handbook/compiler-options.html) for more details. +Voir [les options de compilation TypeScript](https://www.typescriptlang.org/docs/handbook/compiler-options.html) pour plus de détails. -## Using Vue's Type Declarations +## Utiliser la déclaration de type Vue -Vue's type definition exports many useful [type declarations](https://github.com/vuejs/vue/blob/dev/types/index.d.ts). For example, to annotate an exported component options object (e.g. in a `.vue` file): +La définition de type de Vue exporte beaucoup de [déclarations de type](https://github.com/vuejs/vue/blob/dev/types/index.d.ts). Par exemple, pour annoter un objet d'options de composant exporté (par ex. dans un fichier `.vue`) on peut faire cela : ``` ts import Vue, { ComponentOptions } from 'vue' @@ -76,14 +76,14 @@ export default { } as ComponentOptions ``` -## Class-Style Vue Components +## Composants Vue sous forme de classe -Vue component options can easily be annotated with types: +Les options de composant Vue peuvent facilement être annotées avec des types : ``` ts import Vue, { ComponentOptions } from 'vue' -// Declare the component's type +// Déclarer le type de composant interface MyComponent extends Vue { message: string onClick (): void @@ -93,47 +93,47 @@ export default { template: '', data: function () { return { - message: 'Hello!' + message: 'Bonjour !' } }, methods: { onClick: function () { - // TypeScript knows that `this` is of type MyComponent - // and that `this.message` will be a string + // TypeScript sait que `this` est de type `MyComponentTypeScript` + // et que `this.message` sera une chaîne de caractères window.alert(this.message) } } -// We need to explicitly annotate the exported options object -// with the MyComponent type +// Nous devons explicitement annoter les objet d'options exportées +// avec le type `MyComponent` } as ComponentOptions ``` -Unfortunately, there are a few limitations here: +Malheureusement, il y a quelques limitations ici : -- __TypeScript can't infer all types from Vue's API.__ For example, it doesn't know that the `message` property returned in our `data` function will be added to the `MyComponent` instance. That means if we assigned a number or boolean value to `message`, linters and compilers wouldn't be able to raise an error, complaining that it should be a string. +- __TypeScript ne peut pas déduire tous les types de l'API de Vue__ Par exemple, il ne sait pas que la propriété `message` renvoyée dans notre fonction `data` sera ajoutée à l'instance `MyComponent`. Cela signifie que si nous attribuons un nombre ou une valeur booléenne à `message`, les linters et les compilateurs ne seraient pas en mesure d'émettre une erreur, en pointant le fait qu'il s'agit normalement d'une chaîne de caractères. -- Because of the previous limitation, __annotating types like this can be verbose__. The only reason we have to manually declare `message` as a string is because TypeScript can't infer the type in this case. +- À cause de la précédente limitation, __l'annotation de types peut être verbeuse__. La seule raison pour laquelle nous devons déclarer manuellement `message` en tant que chaîne de caractères est parce que TypeScript ne peut pas déduire le type dans ce cas. -Fortunately, [vue-class-component](https://github.com/vuejs/vue-class-component) can solve both of these problems. It's an official companion library that allows you to declare components as native JavaScript classes, with a `@Component` decorator. As an example, let's rewrite the above component: +Fort heureusement, [vue-class-component](https://github.com/vuejs/vue-class-component) peut résoudre ses deux problèmes. C'est une bibliothèque de support officielle qui permet de déclarer les composants comme des classes natives en JavaScript, avec le décorateur `@Component`. Pour l'exemple, ré-écrivons le composant ci-dessus : ``` ts import Vue from 'vue' import Component from 'vue-class-component' -// The @Component decorator indicates the class is a Vue component +// Le décorateur @Component indique que la classe est un composant Vue @Component({ - // All component options are allowed in here + // Toutes les options de composant sont autorisées ici. template: '' }) export default class MyComponent extends Vue { - // Initial data can be declared as instance properties - message: string = 'Hello!' + // Les données initiales peuvent être déclarées comme des propriétés de l'instance + message: string = 'Bonjour !' - // Component methods can be declared as instance methods + // Les méthodes peuvent être déclarées comme des méthodes d'instance onClick (): void { window.alert(this.message) } } ``` -With this syntax alternative, our component definition is not only shorter, but TypeScript can also infer the types of `message` and `onClick` without explicit interface declarations. This strategy even allows you to handle types for computed properties, lifecycle hooks, and render functions. For full usage details, see [the vue-class-component docs](https://github.com/vuejs/vue-class-component#vue-class-component). +Avec cette syntaxe alternative, nos définitions de composant ne sont pas seulement plus courte, mais TypeScript peut aussi connaître les types de `message` et `onClick` avec des interfaces de déclarations explicites. Cette stratégie peut même vous permettre de gérer des types pour les propriétés calculées, les hooks de cycle de vie et les fonctions de rendu. Pour une utilisation détaillée de son utilisation, référez-vous à [la documentation de vue-class-component](https://github.com/vuejs/vue-class-component#vue-class-component). From 6527a5603b63cbf4ab6c27a96457692b63d9f6c6 Mon Sep 17 00:00:00 2001 From: Bruno Lesieur Date: Mon, 3 Jul 2017 16:41:48 +0200 Subject: [PATCH 2/3] Retours de Sylvain pris en compte pour typescript.md Signed-off-by: Bruno Lesieur --- src/v2/guide/typescript.md | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/src/v2/guide/typescript.md b/src/v2/guide/typescript.md index 3f6f5a0f6b..3e52766c32 100644 --- a/src/v2/guide/typescript.md +++ b/src/v2/guide/typescript.md @@ -6,15 +6,15 @@ order: 25 ## Changements importants dans la 2.2 pour les utilisateurs TS + webpack 2 -Dans Vue 2.2 nous avons introduit des fichiers de distribution en tant que modules ES, qui sont utilisés par défaut par webpack 2. Malheureusement, cela a introduit un changement de non retrocompatiblilité non souhaité car avec TypeScript + webpack 2, `import Vue = require('vue')` retourne maintenant un objet module ES synthétique au lieu de Vue lui-même. +Dans Vue 2.2 nous avons introduit des fichiers de distribution en tant que modules ES, qui seront utilisés par défaut par webpack 2. Malheureusement, cela a introduit un changement de non retrocompatiblilité non souhaité car avec TypeScript + webpack 2, `import Vue = require('vue')` retourne maintenant un objet module ES synthétique au lieu de Vue lui-même. -Nous avons prévu de bouger toutes les déclarations officielles d'export dans le style ES dans le futur. S'il vous plait regardez [la configuration recommandée](#Configuration-recommandee) ci-dessous pour une mise en place future. +Nous avons prévu de bouger toutes les déclarations officielles d'export dans le style ES dans le futur. Veuillez consulter [la configuration recommandée](#Configuration-recommandee) ci-dessous qui est parée pour les évolutions futures. ## Déclaration officielle dans les packages npm -Un système de typage statique peut aider à prévenir des erreurs d'exécutions potentielles, et tout spécialement pour les applications qui grandissent. C'est pourquoi Vue est fourni avec des déclarations de types officielles]((https://github.com/vuejs/vue/tree/dev/types) pour [TypeScript](https://www.typescriptlang.org/), et pas seulement pour le cœur de Vue, mais aussi pour [vue-router](https://github.com/vuejs/vue-router/tree/dev/types) et [vuex](https://github.com/vuejs/vuex/tree/dev/types). +Un système de typage statique peut aider à prévenir des erreurs d'exécutions potentielles, et particulièrement quand les applications grandissent. C'est pourquoi Vue est fourni avec des déclarations de types officielles]((https://github.com/vuejs/vue/tree/dev/types) pour [TypeScript](https://www.typescriptlang.org/), et pas seulement pour le cœur de Vue, mais aussi pour [vue-router](https://github.com/vuejs/vue-router/tree/dev/types) et [vuex](https://github.com/vuejs/vuex/tree/dev/types). -Puisque ceux-ci sont [publiés sur npm](https://unpkg.com/vue/types/), et que la dernière version de TypeScript sait comment résoudre des déclarations de type dans des packages npm, cela signifie qu'installer ceux-ci via npm ne requiert aucun outil supplémentaire pour les utiliser avec TypeScript dans Vue. +Puisque ceux-ci sont [publiés sur npm](https://unpkg.com/vue/types/), et que la dernière version de TypeScript sait comment résoudre des déclarations de type dans des packages npm, cela signifie qu'installer ceux-ci via npm ne requiert aucun outil supplémentaire pour utiliser TypeScript avec Vue. ## Configuration recommandée @@ -33,7 +33,7 @@ Puisque ceux-ci sont [publiés sur npm](https://unpkg.com/vue/types/), et que la } ``` -Notez que l'option `allowSyntheticDefaultImports` nous permet d'utiliser l'import comme cela : +Notez que l'option `allowSyntheticDefaultImports` nous permet d'utiliser l'import comme ceci : ``` js import Vue from 'vue' @@ -45,7 +45,7 @@ plutôt que comme cela : import Vue = require('vue') ``` -La forme ES est la syntaxe recommandée pour l'appel de modules car elle est consistante avec l'utilisation ES. Nous planifions dans le futur de transformer toutes les déclarations avec l'export de style ES. +La premiere (syntaxe de module ES) est recommandée car elle est cohérente avec les recommandations d'usage ES. Nous planifions à l'avenir de changer toutes les déclarations officielles pour utiliser les exports dans le style ES. De plus, si vous utilisez TypeScript avec webpack 2, les options suivantes sont également recommandées : @@ -59,13 +59,13 @@ De plus, si vous utilisez TypeScript avec webpack 2, les options suivantes sont } ``` -Ceci dit à TypeScript de laisser les instructions d'import de modules ES intacte, ce qui permet à webpack 2 de tirer parti du *tree-shaking* basé sur les modules ES. +Ceci demande à TypeScript de laisser les instructions d'import de modules ES intactes, ce qui permet à webpack 2 de tirer parti du *tree-shaking* basé sur les modules ES. Voir [les options de compilation TypeScript](https://www.typescriptlang.org/docs/handbook/compiler-options.html) pour plus de détails. ## Utiliser la déclaration de type Vue -La définition de type de Vue exporte beaucoup de [déclarations de type](https://github.com/vuejs/vue/blob/dev/types/index.d.ts). Par exemple, pour annoter un objet d'options de composant exporté (par ex. dans un fichier `.vue`) on peut faire cela : +La définition de type de Vue exporte de nombreuses [déclarations de type](https://github.com/vuejs/vue/blob/dev/types/index.d.ts) utiles. Par exemple, pour annoter l'objet d'options d'un composant exporté (par ex. dans un fichier `.vue`) : ``` ts import Vue, { ComponentOptions } from 'vue' @@ -103,7 +103,7 @@ export default { window.alert(this.message) } } -// Nous devons explicitement annoter les objet d'options exportées +// Nous devons explicitement annoter l'objet d'options exporté // avec le type `MyComponent` } as ComponentOptions ``` From 2d7b481d8e94eb50336d6d0f3e82b937e31280fe Mon Sep 17 00:00:00 2001 From: Bruno Lesieur Date: Thu, 6 Jul 2017 09:30:01 +0200 Subject: [PATCH 3/3] Add @forresst review. Signed-off-by: Bruno Lesieur --- src/v2/guide/typescript.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/v2/guide/typescript.md b/src/v2/guide/typescript.md index 3e52766c32..82ce0799d8 100644 --- a/src/v2/guide/typescript.md +++ b/src/v2/guide/typescript.md @@ -136,4 +136,4 @@ export default class MyComponent extends Vue { } ``` -Avec cette syntaxe alternative, nos définitions de composant ne sont pas seulement plus courte, mais TypeScript peut aussi connaître les types de `message` et `onClick` avec des interfaces de déclarations explicites. Cette stratégie peut même vous permettre de gérer des types pour les propriétés calculées, les hooks de cycle de vie et les fonctions de rendu. Pour une utilisation détaillée de son utilisation, référez-vous à [la documentation de vue-class-component](https://github.com/vuejs/vue-class-component#vue-class-component). +Avec cette syntaxe alternative, nos définitions de composant ne sont pas seulement plus courtes, mais TypeScript peut aussi connaître les types de `message` et `onClick` avec des interfaces de déclarations explicites. Cette stratégie peut même vous permettre de gérer des types pour les propriétés calculées, les hooks de cycle de vie et les fonctions de rendu. Pour une utilisation plus détaillée, référez-vous à [la documentation de vue-class-component](https://github.com/vuejs/vue-class-component#vue-class-component).