Skip to content

Commit dd11fed

Browse files
EnnorielRomain Crestey
authored andcommitted
translate doc 05-misc (#35)
* Translate 05-misc * fix: typos and links --------- Co-authored-by: Romain Crestey <[email protected]>
1 parent dfa20c7 commit dd11fed

File tree

9 files changed

+257
-247
lines changed

9 files changed

+257
-247
lines changed

documentation/docs/05-misc/01-faq.md

Lines changed: 64 additions & 72 deletions
Large diffs are not rendered by default.

documentation/docs/05-misc/02-accessibility-warnings.md

Lines changed: 59 additions & 71 deletions
Large diffs are not rendered by default.

documentation/docs/05-misc/03-typescript.md

Lines changed: 45 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,15 @@
22
title: TypeScript
33
---
44

5-
You can use TypeScript within Svelte components. IDE extensions like the [Svelte VSCode extension](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode) will help you catch errors right in your editor, and [`svelte-check`](https://www.npmjs.com/package/svelte-check) does the same on the command line, which you can integrate into your CI.
5+
Vous pouvez utiliser TypeScript dans vos composants. Des extensions d'<span class="vo">[IDE](/docs/development#ide)</span> comme l'[extension Svelte VSCode](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode) vous aideront à voir et corriger les erreurs directement dans votre éditeur, et [`svelte-check`](https://www.npmjs.com/package/svelte-check) fera la même chose en ligne de commande, que vous pouvez ajouter à votre chaîne d'intégration continue.
66

7-
## Setup
7+
## Mise en place
88

9-
To use TypeScript within Svelte components, you need to add a preprocessor that will turn TypeScript into JavaScript.
9+
Pour utiliser TypeScript dans vos composants Svelte, vous devez ajouter un préprocesseur qui compilera le code TypeScript en JavaScript.
1010

11-
### Using SvelteKit or Vite
11+
### Utiliser SvelteKit ou Vite
1212

13-
The easiest way to get started is scaffolding a new SvelteKit project by typing `npm create svelte@latest`, following the prompts and choosing the TypeScript option.
13+
La façon la plus simple de démarrer avec Typescript est de créer un nouveau projet en tapant : `npm create svelte@latest`, en suivant les propositions et en choisissant l'option TypeScript.
1414

1515
```ts
1616
/// file: svelte.config.js
@@ -24,7 +24,7 @@ const config = {
2424
export default config;
2525
```
2626

27-
If you don't need or want all the features SvelteKit has to offer, you can scaffold a Svelte-flavoured Vite project instead by typing `npm create vite@latest` and selecting the `svelte-ts` option.
27+
Si vous n'avez pas besoin ou ne souhaitez pas de toutes les fonctionnalités de SvelteKit, vous pouvez démarrer un projet Svelte avec Vite en tapant : `npm create vite@latest` et en choisissant l'option `svelte-ts`.
2828

2929
```ts
3030
/// file: svelte.config.js
@@ -37,17 +37,17 @@ const config = {
3737
export default config;
3838
```
3939

40-
In both cases, a `svelte.config.js` with `vitePreprocess` will be added. Vite/SvelteKit will read from this config file.
40+
Dans les deux cas, un fichier `svelte.config.js` avec `vitePreprocess` sera ajouté. Vite et SvelteKit liront ce fichier de configuration.
4141

42-
### Other build tools
42+
### Autres outils de compilation
4343

44-
If you're using tools like Rollup or Webpack instead, install their respective Svelte plugins. For Rollup that's [rollup-plugin-svelte](https://github.com/sveltejs/rollup-plugin-svelte) and for Webpack that's [svelte-loader](https://github.com/sveltejs/svelte-loader). For both, you need to install `typescript` and `svelte-preprocess` and add the preprocessor to the plugin config (see the respective READMEs for more info). If you're starting a new project, you can also use the [rollup](https://github.com/sveltejs/template) or [webpack](https://github.com/sveltejs/template-webpack) template to scaffold the setup from a script.
44+
Si vous utilisez d'autres outils comme Rollup ou Webpack, installez leurs <span class="vo">[plugins](/docs/development#plugin)</span> Svelte respectifs. Pour Rollup, il s'agit de [rollup-plugin-svelte](https://github.com/sveltejs/rollup-plugin-svelte) et pour Webpack, c'est [svelte-loader](https://github.com/sveltejs/svelte-loader). Dans les deux cas, vous devez installer `typescript` et `svelte-preprocess` et ajouter le préprocesseur à la configuration du plugin (voir les documentations respectives). Si vous démarrez un nouveau projet, vous pouvez utiliser le [template rollup](https://github.com/sveltejs/template) ou le [template webpack](https://github.com/sveltejs/template-webpack) pour configurer votre projet.
4545

46-
> If you're starting a new project, we recommend using SvelteKit or Vite instead
46+
> Si vous démarrez un nouveau projet, nous vous recommandons plutôt d'utiliser SvelteKit ou Vite.
4747
4848
## `<script lang="ts">`
4949

50-
To use TypeScript inside your Svelte components, add `lang="ts"` to your `script` tags:
50+
Pour utiliser TypeScript dans vos composants Svelte, ajoutez `lang="ts"` au tag `script` :
5151

5252
```svelte
5353
<script lang="ts">
@@ -61,7 +61,7 @@ To use TypeScript inside your Svelte components, add `lang="ts"` to your `script
6161

6262
### Props
6363

64-
Props can be typed directly on the `export let` statement:
64+
Les <span class="vo">[props](/docs/sveltejs#props)</span> peuvent directement être typées sur l'instruction `export let` :
6565

6666
```svelte
6767
<script lang="ts">
@@ -71,7 +71,7 @@ Props can be typed directly on the `export let` statement:
7171

7272
### Slots
7373

74-
Slot and slot prop types are inferred from the types of the slot props passed to them:
74+
Les <span class="vo">[slots](/docs/sveltejs#slot)</span> et les types de leurs <span class="vo">[props](/docs/sveltejs#props)</span> sont déduits des types des props qui leurs sont passées :
7575

7676
```svelte
7777
<script lang="ts">
@@ -80,65 +80,71 @@ Slot and slot prop types are inferred from the types of the slot props passed to
8080
8181
<slot {name} />
8282
83-
<!-- Later -->
83+
<!-- Ailleurs -->
8484
<Comp let:name>
85-
<!-- ^ Inferred as string -->
85+
<!-- ^ Déduit comme string -->
8686
{name}
8787
</Comp>
8888
```
8989

9090
### Events
9191

92-
Events can be typed with `createEventDispatcher`:
92+
Les événements peuvent être typés avec `createEventDispatcher` :
9393

9494
```svelte
9595
<script lang="ts">
9696
import { createEventDispatcher } from 'svelte';
9797
9898
const dispatch = createEventDispatcher<{
99+
<<<<<<< HEAD
99100
event: null; // does not accept a payload
100101
click: string; // has a required string payload
101102
type: string | null; // has an optional string payload
103+
=======
104+
event: null; // n'accepte pas d'argument
105+
type: string; // contient obligatoirement une string
106+
click: string | null; // peut contenir une string ou être non défini
107+
>>>>>>> b73f8e84a (translate doc 05-misc (#35))
102108
}>();
103109
104110
function handleClick() {
105111
dispatch('event');
106-
dispatch('click', 'hello');
112+
dispatch('click', 'Salut');
107113
}
108114
109115
function handleType() {
110116
dispatch('event');
111-
dispatch('type', Math.random() > 0.5 ? 'world' : null);
117+
dispatch('type', Math.random() > 0.5 ? 'tout le monde' : null);
112118
}
113119
</script>
114120
115-
<button on:click={handleClick} on:keydown={handleType}>Click</button>
121+
<button on:click={handleClick} on:keydown={handleType}>Clic</button>
116122
```
117123

118-
## Enhancing built-in DOM types
124+
## Surcharge des types de DOM natifs
119125

120-
Svelte provides a best effort of all the HTML DOM types that exist. Sometimes you may want to use experimental attributes or custom events coming from an action. In these cases, TypeScript will throw a type error, saying that it does not know these types. If it's a non-experimental standard attribute/event, this may very well be a missing typing from our [HTML typings](https://github.com/sveltejs/svelte/blob/master/packages/svelte/elements.d.ts). In that case, you are welcome to open an issue and/or a PR fixing it.
126+
Svelte fournit des types aussi proche que possible pour chaque élément HTML du <span class="vo">[DOM](/docs/web#dom)</span> qui existe. Parfois, vous voudrez utiliser des attributs expérimentaux ou des événements personnalisés. Dans ces cas, TypeScript lèvera une erreur de type, en indiquant qu'il ne connaît pas ces types. S'il s'agit d'un attribut ou événement standard et non expérimental, il se peut tout à fait que ce soit un type manquant dans [le typage HTML de Svelte](https://github.com/sveltejs/svelte/blob/master/elements/index.d.ts). Dans ce cas, vous êtes invité•e à ouvrir une <span class="vo">[issue](/docs/development#issue)</span> ou une <span class="vo">[PR](/docs/development#pull-request)</span> pour le corriger.
121127

122-
In case this is a custom or experimental attribute/event, you can enhance the typings like this:
128+
S'il s'agit d'un attribut ou d'un événement expérimental ou personnalisé, vous pouvez étendre le typage comme suit :
123129

124130
```ts
125-
/// file: additional-svelte-typings.d.ts
131+
/// fichier: additional-svelte-typings.d.ts
126132
declare namespace svelteHTML {
127-
// enhance elements
133+
// extension de type pour un élément
128134
interface IntrinsicElements {
129135
'my-custom-element': { someattribute: string; 'on:event': (e: CustomEvent<any>) => void };
130136
}
131-
// enhance attributes
137+
// extension de type pour un attribut
132138
interface HTMLAttributes<T> {
133-
// If you want to use on:beforeinstallprompt
139+
// Si vous voulez utiliser on:beforeinstallprompt
134140
'on:beforeinstallprompt'?: (event: any) => any;
135-
// If you want to use myCustomAttribute={..} (note: all lowercase)
136-
mycustomattribute?: any; // You can replace any with something more specific if you like
141+
// Si vous voulez utiliser myCustomAttribute={..} (note: tout en minuscule)
142+
mycustomattribute?: any; // Vous pouvez remplacer any par quelque chose de plus précis si vous le souhaitez
137143
}
138144
}
139145
```
140146

141-
Then make sure that `d.ts` file is referenced in your `tsconfig.json`. If it reads something like `"include": ["src/**/*"]` and your `d.ts` file is inside `src`, it should work. You may need to reload for the changes to take effect.
147+
Ensuite, assurez vous que les fichiers `d.ts` soient référencés dans `tsconfig.json`. Si vous lisez quelque chose comme : `"include": ["src/**/*"]` et vos fichiers `d.ts` sont dans votre dossier `src`, ça devrait marcher. Vous devrez peut-être relancer votre serveur pour que le changement prenne effet.
142148

143149
Since Svelte version 4.2 / `svelte-check` version 3.5 / VS Code extension version 107.10.0 you can also declare the typings by augmenting the `svelte/elements` module like this:
144150

@@ -162,41 +168,41 @@ export {}; // ensure this is not an ambient module, else types will be overridde
162168

163169
## Experimental advanced typings
164170

165-
A few features are missing from taking full advantage of TypeScript in more advanced use cases like typing that a component implements a certain interface, explicitly typing slots, or using generics. These things are possible using experimental advanced type capabilities. See [this RFC](https://github.com/dummdidumm/rfcs/blob/ts-typedefs-within-svelte-components/text/ts-typing-props-slots-events.md) for more information on how to make use of them.
171+
Quelques fonctionnalités sont manquantes pour bénéficier de tous les avantages de TypeScript dans des cas plus avancés, comme pour typer qu'un composant étend une interface, pour typer les <span class="vo">[slots](/docs/sveltejs#slot)</span> ou pour utiliser des génériques. Tout ceci est rendu possible en utilisant des fonctionnalités expérimentales avancées. Voir [la RFC](https://github.com/dummdidumm/rfcs/blob/ts-typedefs-within-svelte-components/text/ts-typing-props-slots-events.md) pour savoir comment définir de tels typages.
166172

167-
> The API is experimental and may change at any point
173+
> Cette <span class="vo">[API](/docs/development#api)</span> est expérimentale et peut changer à tout moment.
168174
169175
## Limitations
170176

171-
### No TS in markup
177+
### Pas de TypeScript dans le code HTML
172178

173-
You cannot use TypeScript in your template's markup. For example, the following does not work:
179+
Vous ne pouvez pas utiliser explicitement TypeScript dans les templates HTML. Par exemple, l'exemple suivant n'est pas possible :
174180

175181
```svelte
176182
<script lang="ts">
177183
let count = 10;
178184
</script>
179185
180-
<h1>Count as string: {count as string}!</h1> <!-- ❌ Does not work -->
186+
<h1>Count as string: {count as string}!</h1> <!-- ❌ Ne fonctionne pas -->
181187
{#if count > 4}
182-
{@const countString: string = count} <!-- ❌ Does not work -->
188+
{@const countString: string = count} <!-- ❌ Ne fonctionne pas -->
183189
{countString}
184190
{/if}
185191
```
186192

187-
### Reactive Declarations
193+
### Déclarations réactives
188194

189-
You cannot type your reactive declarations with TypeScript in the way you type a variable. For example, the following does not work:
195+
Vous ne pouvez pas typer les déclarations réactives avec TypeScript de la manière dont vous typeriez une variable. Par exemple, le code suivant ne fonctionne pas :
190196

191197
```svelte
192198
<script lang="ts">
193199
let count = 0;
194200
195-
$: doubled: number = count * 2; // ❌ Does not work
201+
$: doubled: number = count * 2; // ❌ Ne fonctionne pas
196202
</script>
197203
```
198204

199-
You cannot add a `: TYPE` because it's invalid syntax in this position. Instead, you can move the definition to a `let` statement just above:
205+
Vous ne pouvez pas utiliser `: TYPE` car cela résulte en une syntaxe invalide. À la place, vous pouvez déplacer le typage sur une instruction `let` juste au dessus :
200206

201207
```svelte
202208
<script lang="ts">

0 commit comments

Comments
 (0)