From 20bb9752475ac3ec55e24f4540cd31ee8f4220e9 Mon Sep 17 00:00:00 2001 From: Christophe Porteneuve Date: Wed, 23 Aug 2023 12:23:59 +0200 Subject: [PATCH 1/2] copy(typescript): full first translation --- TRANSLATORS.md | 1 + src/content/learn/typescript.md | 175 ++++++++++++++++---------------- 2 files changed, 87 insertions(+), 89 deletions(-) diff --git a/TRANSLATORS.md b/TRANSLATORS.md index b1ad5a315..1abaef7cc 100644 --- a/TRANSLATORS.md +++ b/TRANSLATORS.md @@ -61,6 +61,7 @@ Voici la liste par ordre alphabétique (prénom, nom). **🙏🏻 Mille mercis
  • Tutoriel : Tic-Tac-Toe
  • Penser en React
  • Installation (accueil chapitre)
    • +
  • Utiliser TypeScript
  • Décrire l’UI (accueil chapitre)
  • Votre premier composant
  • Écrire du balisage avec JSX
    • diff --git a/src/content/learn/typescript.md b/src/content/learn/typescript.md index 5695b755f..b3c0f28de 100644 --- a/src/content/learn/typescript.md +++ b/src/content/learn/typescript.md @@ -1,57 +1,56 @@ --- -title: Using TypeScript +title: Utiliser TypeScript re: https://github.com/reactjs/react.dev/issues/5960 --- -TypeScript is a popular way to add type definitions to JavaScript codebases. Out of the box, TypeScript [supports JSX](/learn/writing-markup-with-jsx) and you can get full React Web support by adding [`@types/react`](https://www.npmjs.com/package/@types/react) and [`@types/react-dom`](https://www.npmjs.com/package/@types/react-dom) to your project. +TypeScript est une solution populaire d'ajout de définitions de types à des bases de code JavaScript. TypeScript [prend nativement en charge JSX](/learn/writing-markup-with-jsx), et pour obtenir une prise en charge complète de la version web de React, il vous suffit d'ajouter [`@types/react`](https://www.npmjs.com/package/@types/react) et [`@types/react-dom`](https://www.npmjs.com/package/@types/react-dom) à votre projet. -* [TypeScript with React Components](/learn/typescript#typescript-with-react-components) -* [Examples of typing with hooks](/learn/typescript#example-hooks) -* [Common types from `@types/react`](/learn/typescript/#useful-types) -* [Further learning locations](/learn/typescript/#further-learning) +* [Comment utiliser TypeScript pour les composants React](/learn/typescript#typescript-with-react-components) +* [Des exemples de typages avec les Hooks](/learn/typescript#example-hooks) +* [Les types usuels de `@types/react`](/learn/typescript/#useful-types) +* [Des ressources pour aller plus loin](/learn/typescript/#further-learning) ## Installation {/*installation*/} -All [production-grade React frameworks](https://react-dev-git-fork-orta-typescriptpage-fbopensource.vercel.app/learn/start-a-new-react-project#production-grade-react-frameworks) offer support for using TypeScript. Follow the framework specific guide for installation: +Tous les [frameworks React de qualité reconnue](/learn/start-a-new-react-project#production-grade-react-frameworks) prennent en charge TypeScript. Suivez le guide spécifique à votre framework pour l'installation : - [Next.js](https://nextjs.org/docs/pages/building-your-application/configuring/typescript) - [Remix](https://remix.run/docs/en/1.19.2/guides/typescript) - [Gatsby](https://www.gatsbyjs.com/docs/how-to/custom-configuration/typescript/) - [Expo](https://docs.expo.dev/guides/typescript/) -### Adding TypeScript to an existing React project {/*adding-typescript-to-an-existing-react-project*/} +### Ajouter TypeScript à un projet React existant {/*adding-typescript-to-an-existing-react-project*/} -To install the latest version of React's type definitions: +Pour installer la dernière version des définitions de types de React : npm install @types/react @types/react-dom -The following compiler options need to be set in your `tsconfig.json`: +Vous devrez définir les options de compilation suivantes dans votre `tsconfig.json` : -1. `dom` must be included in [`lib`](https://www.typescriptlang.org/tsconfig/#lib) (Note: If no `lib` option is specified, `dom` is included by default). -1. [`jsx`](https://www.typescriptlang.org/tsconfig/#jsx) must be set to one of the valid options. `preserve` should suffice for most applications. - If you're publishing a library, consult the [`jsx` documentation](https://www.typescriptlang.org/tsconfig/#jsx) on what value to choose. +1. `dom` doit figurer dans [`lib`](https://www.typescriptlang.org/tsconfig/#lib) (Notez que si aucune option `lib` n'est précisée, `dom` est inclus par défaut). +2. [`jsx`](https://www.typescriptlang.org/tsconfig/#jsx) doit être défini avec une valeur valide. La plupart des applications utiliseront sans doute `preserve`. Si vous travaillez sur une bibliothèque, consultez [la documentation de `jsx`](https://www.typescriptlang.org/tsconfig/#jsx) pour savoir quelle valeur choisir. -## TypeScript with React Components {/*typescript-with-react-components*/} +## TypeScript pour les composants React {/*typescript-with-react-components*/} -Every file containing JSX must use the `.tsx` file extension. This is a TypeScript-specific extension that tells TypeScript that this file contains JSX. +Tout fichier contenant du JSX doit utiliser l'extension de fichier `.tsx`. Il s'agit d'une extension spécifique à TypeScript qui lui indique que le fichier contient du JSX. -Writing TypeScript with React is very similar to writing JavaScript with React. The key difference when working with a component is that you can provide types for your component's props. These types can be used for correctness checking and providing inline documentation in editors. +Écrire du code React en TypeScript est très similaire à son écriture en JavaScript. La différence principale lorsque vous travaillez sur un composant tient à ce que vous pouvez fournir les types de ses propriétés. Ces types peuvent être utilisés pour vérifier une utilisation correcte et pour fournir une documentation à la volée dans les éditeurs. -Taking the [`MyButton` component](/learn#components) from the [Quick Start](/learn) guide, we can add a type describing the `title` for the button: +Si on reprend le [composant `MyButton`](/learn#components) du guide de [démarrage rapide](/learn), nous pouvons ajouter un type qui décrit le `title` du bouton : @@ -65,8 +64,8 @@ function MyButton({ title }: { title: string }) { export default function MyApp() { return (
    -

    Welcome to my app

    - +

    Bienvenue dans mon appli

    +
    ); } @@ -80,19 +79,19 @@ export default App = AppTSX; -These sandboxes can handle TypeScript code, but they do not run the type-checker. This means you can amend the TypeScript sandboxes to learn, but you won't get any type errors or warnings. To get type-checking, you can use the [TypeScript Playground](https://www.typescriptlang.org/play) or use a more fully-featured online sandbox. +Les bacs à sable de cette documentation comprennent le code TypeScript, mais n'exécutent pas la vérification de types. Ça signifie que vous pouvez modifier les bacs à sable TypeScript pour apprendre, mais vous ne verrez aucune erreur ni aucun avertissement liés au typage. Pour bénéficier de la vérification de types, vous opuvez utiliser le [*TypeScript Playground*](https://www.typescriptlang.org/play) ou un bac à sable en ligne aux fonctionnalités plus riches. -This inline syntax is the simplest way to provide types for a component, though once you start to have a few fields to describe it can become unwieldy. Instead, you can use an `interface` or `type` to describe the component's props: +Cette syntaxe en ligne est la façon la plus rapide de fournir des types pour un composant, mais dès que vous commencer à avoir un certain nombre de props à décrire, elle devient difficile à lire. Utilisez plutôt une `interface` ou un `type` pour décrire les props du composant : ```tsx App.tsx active interface MyButtonProps { - /** The text to display inside the button */ + /** Le texte à afficher dans le bouton */ title: string; - /** Whether the button can be interacted with */ + /** Indique si on peut interagir avec le bouton */ disabled: boolean; } @@ -105,8 +104,8 @@ function MyButton({ title, disabled }: MyButtonProps) { export default function MyApp() { return (
    -

    Welcome to my app

    - +

    Bienvenue dans mon appli

    +
    ); } @@ -119,32 +118,32 @@ export default App = AppTSX;     -The type describing your component's props can be as simple or as complex as you need, though they should be an object type described with either a `type` or `interface`. You can learn about how TypeScript describes objects in [Object Types](https://www.typescriptlang.org/docs/handbook/2/objects.html) but you may also be interested in using [Union Types](https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#union-types) to describe a prop that can be one of a few different types and the [Creating Types from Types](https://www.typescriptlang.org/docs/handbook/2/types-from-types.html) guide for more advanced use cases. +Le type qui décrit les props de votre composant peut être aussi simple ou complexe que nécessaire, mais ce sera toujours un type objet utilisant soit `type` soit `interface`. Vous pouvez apprendre à décrire des objets en TypeScript avec les [types objets](https://www.typescriptlang.org/docs/handbook/2/objects.html), vous trouverez sûrement les [types unions](https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#union-types) pratiques pour décrire des propriétés pouvant avoir plusieurs types, et le guide [Créer des types à partir d'autres types](https://www.typescriptlang.org/docs/handbook/2/types-from-types.html) vous aidera pour les cas plus avancés. *(Tous ces liens pointent vers la documentation TypeScript qui n'a pas de version française, NdT)* -## Example Hooks {/*example-hooks*/} +## Exemples de typage avec les Hooks {/*example-hooks*/} -The type definitions from `@types/react` include types for the built-in hooks, so you can use them in your components without any additional setup. They are built to take into account the code you write in your component, so you will get [inferred types](https://www.typescriptlang.org/docs/handbook/type-inference.html) a lot of the time and ideally do not need to handle the minutiae of providing the types. +Les définitions de types dans `@types/react` incluent le typage des Hooks fournis par React, que vous pouvez donc utiliser sans configuration supplémentaire. Ces types sont conçus pour s'appuyer sur le code que vous écrviez, vous bénéficierez donc la plupart du temps de [l'inférence de type](https://www.typescriptlang.org/docs/handbook/type-inference.html), de sorte que vous ne devriez pas avoir à leur fournir des types sur-mesure. -However, we can look at a few examples of how to provide types for hooks. +Ceci étant dit, voyons quelques exemples de fourniture explicite de types à des Hooks. ### `useState` {/*typing-usestate*/} -The [`useState` hook](/reference/react/useState) will re-use the value passed in as the initial state to determine what the type of the value should be. For example: +Le [Hook `useState`](/reference/react/useState) réutilise la valeur initiale que vous lui passez pour déterminer le type attendu pour la variable d'état. Par exemple, le code suivant : ```ts -// Infer the type as "boolean" +// Infère le type "boolean" const [enabled, setEnabled] = useState(false); ``` -Will assign the type of `boolean` to `enabled`, and `setEnabled` will be a function accepting either a `boolean` argument, or a function that returns a `boolean`. If you want to explicitly provide a type for the state, you can do so by providing a type argument to the `useState` call: +…attribuera le type `boolean` à `enabled`, et `setEnabled` sera une fonction acceptant soit un argument `boolean`, soit une fonction de mise à jour qui accepte et renvoie un `boolean`. Si vous souhaitez typer l'état explicitement, vous pouvez passer un paramètre de type à l'appel `useState` : -```ts -// Explicitly set the type to "boolean" +```ts +// Typage explicite à "boolean" const [enabled, setEnabled] = useState(false); ``` -This isn't very useful in this case, but a common case where you may want to provide a type is when you have a union type. For example, `status` here can be one of a few different strings: +Dans ce cas précis ça n'a guère d'intérêt, mais pour une union par exemple, vous aurez besoin d'un typage explicite. Par exemple, le `status` ci-dessous a un jeu de valeurs restreint : ```ts type Status = "idle" | "loading" | "success" | "error"; @@ -152,7 +151,7 @@ type Status = "idle" | "loading" | "success" | "error"; const [status, setStatus] = useState("idle"); ``` -Or, as recommended in [Principles for structuring state](/learn/choosing-the-state-structure#principles-for-structuring-state), you can group related state as an object and describe the different possibilities via object types: +Ou alors, comme conseillé dans [Principes de structuration d’état](/learn/choosing-the-state-structure#principles-for-structuring-state), vous pouvez grouper des éléments d'état étroitement liés dans un objet et en décrire les différentes configurations *via* une union discriminante : ```ts type RequestState = @@ -166,7 +165,7 @@ const [requestState, setRequestState] = useState({ status: 'idle' ### `useReducer` {/*typing-usereducer*/} -The [`useReducer` hook](/reference/react/useReducer) is a more complex hook that takes a reducer function and an initial state. The types for the reducer function are inferred from the initial state. You can optionally provide a type argument to the `useReducer` call to provide a type for the state, but it is often better to set the type on the initial state instead: +Le [Hook `useReducer`](/reference/react/useReducer) est un Hook plus complexe qui prend une fonction de réduction et un état initial. Les types de la fonction de réduction sont inférés sur base de l'état initial. Vous pouvez choisir de spécifier un paramètre de type à l'appel `useReducer` pour typer cet état, mais il est généralement préférable de typer l'état initial directement : @@ -174,7 +173,7 @@ The [`useReducer` hook](/reference/react/useReducer) is a more complex hook that import {useReducer} from 'react'; interface State { - count: number + count: number }; type CounterAction = @@ -202,11 +201,11 @@ export default function App() { return (
    -

    Welcome to my counter

    +

    Bienvenue dans mon compteur

    -

    Count: {state.count}

    - - +

    Compteur : {state.count}

    + +
    ); } @@ -220,15 +219,14 @@ export default App = AppTSX;     +Nous utilisons ici TypeScript à certains endroits stratégiques : -We are using TypeScript in a few key places: - - - `interface State` describes the shape of the reducer's state. - - `type CounterAction` describes the different actions which can be dispatched to the reducer. - - `const initialState: State` provides a type for the initial state, and also the type which is used by `useReducer` by default. - - `stateReducer(state: State, action: CounterAction): State` sets the types for the reducer function's arguments and return value. + - `interface State` décrit la forme de l'état pour notre réducteur. + - `type CounterAction` décrit les différentes actions susceptibles d'être *dispatchées* auprès du réducteur. + - `const initialState: State` fournit un type pour l'état initial, qui est aussi le type qu'utilisera `useReducer` par défaut. + - `stateReducer(state: State, action: CounterAction): State` définit les types des arguments et de la valeur de retour pour la fonction de réduction. -A more explicit alternative to setting the type on `initialState` is to provide a type argument to `useReducer`: +Une alternative plus explicite consisterait à définir le type d'`initialState` en passant un paramètre de type à `useReducer` : ```ts import { stateReducer, State } from './your-reducer-implementation'; @@ -242,9 +240,9 @@ export default function App() { ### `useContext` {/*typing-usecontext*/} -The [`useContext` hook](/reference/react/useContext) is a technique for passing data down the component tree without having to pass props through components. It is used by creating a provider component and often by creating a hook to consume the value in a child component. +Le [Hook `useContext`](/reference/react/useContext) permet de diffuser des données à travers l'arbre de composants sans avoir à les faire percoler explicitement *via* chaque niveau intermédiaire. On l'utilise pour créer un composant fournisseur, en définissant le plus souvent un Hook dédié pour en consommer la valeur dans un composant descendant. -The type of the value provided by the context is inferred from the value passed to the `createContext` call: +Le type de la valeur fournie par le contexte est inféré à partir de la valeur passée à l'appel `createContext` : @@ -271,7 +269,7 @@ function MyComponent() { return (
    -

    Current theme: {theme}

    +

    Thème actif : {theme}

    ) } @@ -284,22 +282,23 @@ export default App = AppTSX;     -This technique works when you have an default value which makes sense - but there are occasionally cases when you do not, and in those cases `null` can feel reasonable as a default value. However, to allow the type-system to understand your code, you need to explicitly set `ContextShape | null` on the `createContext`. +Cette technique fonctionne lorsque vous avez une valeur par défaut pertinente — mais il arrive que ça ne soit pas le cas, et que vous utilisez alors `null` comme valeur par défaut. Le souci, c'est que pour satisfaire le système de typage, vous allez devoir explicitement passer un paramètre de type `ContextShape | null` à `createContext`. -This causes the issue that you need to eliminate the `| null` in the type for context consumers. Our recommendation is to have the hook do a runtime check for it's existence and throw an error when not present: +Ça va complexifier votre code en vous forçant à éliminer le `| null` du type pour les consommateurs du contexte. Nous vous conseillons d'incorporer un *type guard* au sein de votre Hook personnalisé pour vérifier que la valeur existe bien, et lever une exception dans le cas contraire : ```js {5, 16-20} import { createContext, useContext, useState, useMemo } from 'react'; -// This is a simpler example, but you can imagine a more complex object here +// C'est un exemple simplifié, imaginez quelque chose de plus riche type ComplexObject = { kind: string }; -// The context is created with `| null` in the type, to accurately reflect the default value. +// Le contexte est créé avec `| null` dans son type, pour autoriser +// la valeur par défaut. const Context = createContext(null); -// The `| null` will be removed via the check in the hook. +// Le `| null` sera retiré grâce à une vérification au sein du Hook. const useGetComplexObject = () => { const object = useContext(Context); if (!object) { throw new Error("useGetComplexObject must be used within a Provider") } @@ -321,7 +320,7 @@ function MyComponent() { return (
    -

    Current object: {object.kind}

    +

    Objet courant : {object.kind}

    ) } @@ -329,17 +328,18 @@ function MyComponent() { ### `useMemo` {/*typing-usememo*/} -The [`useMemo`](/reference/react/useMemo) hooks will create/re-access a memorized value from a function call, re-running the function only when dependencies passed as the 2nd parameter are changed. The result of calling the hook is inferred from the return value from the function in the first parameter. You can be more explicit by providing a type argument to the hook. +Le [Hook `useMemo`](/reference/react/useMemo) mémoïse les valeurs renvoyées par une fonction, pour ne re-exécuter celle-ci que si les dépendances passées en deuxième paramètre ont changé. Le type du résultat de l'appel au Hook est inféré sur base de la valeur de retour de la fonction passée en premier argument. Vous pouvez choisir de passer un paramètre de type explicitement. ```ts -// The type of visibleTodos is inferred from the return value of filterTodos +// Le type de `visibleTodos` est inféré à partir du type du résultat +// de `filterTodos` const visibleTodos = useMemo(() => filterTodos(todos, tab), [todos, tab]); ``` ### `useCallback` {/*typing-usecallback*/} -The [`useCallback`](/reference/react/useCallback) provide a stable reference to a function as long as the dependencies passed into the second parameter are the same. Like `useMemo`, the function's type is inferred from the return value of the function in the first parameter, and you can be more explicit by providing a type argument to the hook. +Le [Hook `useCallback`](/reference/react/useCallback) fournit une référence stable à une fonction tant que les dépendances passées en deuxième argument ne changent pas. De façon similaire à `useMemo`, le type de la fonction est inféré sur base du type de la fonction passée en premier argument, et vous pouvez passer un paramètre de type explicite si vous le souhaitez. ```ts @@ -348,9 +348,7 @@ const handleClick = useCallback(() => { }, [todos]); ``` -When working in TypeScript strict mode `useCallback` requires adding types for the parameters in your callback. This is because the type of the callback is inferred from the return value of the function, and without parameters the type cannot be fully understood. - -Depending on your code-style preferences, you could use the `*EventHandler` functions from the React types to provide the type for the event handler at the same time as defining the callback: +Lorsque vous utilisez le mode strict de TypeScript, `useCallback` exigera le typage détaillé de la fonction que vous lui passez, notamment pour ses arguments. Selon vos préférences stylistiques, vous pourrez le faire soit avec un typage classique de signature, soit avec un paramètre de type passé au Hook, en exploitant les fonctions `*EventHandler` fournies par les définitions de types de React, comme ceci : ```ts import { useState, useCallback } from 'react'; @@ -361,7 +359,7 @@ export default function Form() { const handleChange = useCallback>((event) => { setValue(event.currentTarget.value); }, [setValue]) - + return ( <> @@ -371,13 +369,13 @@ export default function Form() { } ``` -## Useful Types {/*useful-types*/} +## Types utiles {/*useful-types*/} -There is quite an expansive set of types which come from the `@types/react` package, it is worth a read when you feel comfortable with how React and TypeScript interact. You can find them [in React's folder in DefinitelyTyped](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react/index.d.ts). We will cover a few of the more common types here. +Le module `@types/react` fournit un vaste ensemble de types ; une fois que vous serez à l'aise avec l'utilisation combinée de React et TypeScript, ça vaut le coup d'y jeter un coup d'œil. Vous les trouverez dans [le dossier de React sur DefinitelyTyped](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react/index.d.ts). Nous allons passer ici en revue les plus courants. -### DOM Events {/*typing-dom-events*/} +### Événements DOM {/*typing-dom-events*/} -When working with DOM events in React, the type of the event can often be inferred from the event handler. However, when you want to extract a function to be passed to an event handler, you will need to explicitly set the type of the event. +Lorsque vous travaillez avec des événements DOM en React, le type de l'événement peut souvent être inféré sur base du gestionnaire d'événement. Cependant, si vous souhaitez extraire la fonction qui sera passée comme gestionnaire, vous devrez typer l'événement explicitement. @@ -385,7 +383,7 @@ When working with DOM events in React, the type of the event can often be inferr import { useState } from 'react'; export default function Form() { - const [value, setValue] = useState("Change me"); + const [value, setValue] = useState("Modifiez-moi"); function handleChange(event: React.ChangeEvent) { setValue(event.currentTarget.value); @@ -394,7 +392,7 @@ export default function Form() { return ( <> -

    Value: {value}

    +

    Valeur : {value}

    ); } @@ -407,15 +405,15 @@ export default App = AppTSX;     -There are many types of events provided in the React types - the full list can be found [here](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/b580df54c0819ec9df62b0835a315dd48b8594a9/types/react/index.d.ts#L1247C1-L1373) which is based on the [most popular events from the DOM](https://developer.mozilla.org/en-US/docs/Web/Events). +Les types React fournissent de nombreux types d'événements : la liste complète est [ici](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/b580df54c0819ec9df62b0835a315dd48b8594a9/types/react/index.d.ts#L1247C1-L1373), elle reprend la [majorité des événements courants du DOM](https://developer.mozilla.org/fr/docs/Web/Events). -When determining the type you are looking for you can first look at the hover information for the event handler you are using, which will show the type of the event. +Pour déterminer le type dont vous avez besoin, vous pouvez commencer par regarder l'infobulle au survol du gestionnaire que vous utilisez : elle affichera le type de l'événement. -If you need to use an event that is not included in this list, you can use the `React.SyntheticEvent` type, which is the base type for all events. +Si vous avez besoin d'un type d'événement qui ne figure pas dans la liste, vous pouvez utiliser le type `React.SyntheticEvent`, qui est le type de base pour tous les autres. -### Children {/*typing-children*/} +### Enfants {/*typing-children*/} -There are two common paths to describing the children of a component. The first is to use the `React.ReactNode` type, which is a union of all the possible types that can be passed as children in JSX: +Il y a deux façons courantes de décrire les enfants d'un composant. La première consiste à utiliser le type `React.ReactNode`, qui est une union de tous les types d'enfants possibles dans JSX : ```ts interface ModalRendererProps { @@ -424,7 +422,7 @@ interface ModalRendererProps { } ``` -This is a very broad definition of children. The second is to use the `React.ReactElement` type, which is only JSX elements and not JavaScript primitives like strings or numbers: +C'est là une définition très large des enants. La seconde utilise plutôt le type `React.ReactElement`, qui ne permet que les éléments JSX et non les nœuds primitifs tels que les chaînes de caractères ou les nombres : ```ts interface ModalRendererProps { @@ -433,13 +431,13 @@ interface ModalRendererProps { } ``` -Note, that you cannot use TypeScript to describe that the children are a certain type of JSX elements, so you cannot use the type-system to describe a component which only accepts `
  • ` children. +Notez que vous ne pouvez pas utiliser TypeScript pour retreindre le type de vos enfants à certains éléments JSX spécifiques, vous ne pouvez donc pas vous appuyer sur le système de typage pour indiquer qu'un composant n'accepterait par exemple que des enfants `
  • `. -You can see all an example of both `React.ReactNode` and `React.ReactElement` with the type-checker in [this TypeScript playground](https://www.typescriptlang.org/play?#code/JYWwDg9gTgLgBAJQKYEMDG8BmUIjgIilQ3wChSB6CxYmAOmXRgDkIATJOdNJMGAZzgwAFpxAR+8YADswAVwGkZMJFEzpOjDKw4AFHGEEBvUnDhphwADZsi0gFw0mDWjqQBuUgF9yaCNMlENzgAXjgACjADfkctFnYkfQhDAEpQgD44AB42YAA3dKMo5P46C2tbJGkvLIpcgt9-QLi3AEEwMFCItJDMrPTTbIQ3dKywdIB5aU4kKyQQKpha8drhhIGzLLWODbNs3b3s8YAxKBQAcwXpAThMaGWDvbH0gFloGbmrgQfBzYpd1YjQZbEYARkB6zMwO2SHSAAlZlYIBCdtCRkZpHIrFYahQYQD8UYYFA5EhcfjyGYqHAXnJAsIUHlOOUbHYhMIIHJzsI0Qk4P9SLUBuRqXEXEwAKKfRZcNA8PiCfxWACecAAUgBlAAacFm80W-CU11U6h4TgwUv11yShjgJjMLMqDnN9Dilq+nh8pD8AXgCHdMrCkWisVoAet0R6fXqhWKhjKllZVVxMcavpd4Zg7U6Qaj+2hmdG4zeRF10uu-Aeq0LBfLMEe-V+T2L7zLVu+FBWLdLeq+lc7DYFf39deFVOotMCACNOCh1dq219a+30uC8YWoZsRyuEdjkevR8uvoVMdjyTWt4WiSSydXD4NqZP4AymeZE072ZzuUeZQKheQgA). +Vous trouverez un exemple complet avec `React.ReactNode` et `React.ReactElement` et la vérification de types activée dans [ce bac à sable TypeScript](https://www.typescriptlang.org/play?#code/JYWwDg9gTgLgBAJQKYEMDG8BmUIjgIilQ3wChSB6CxYmAOmXRgDkIATJOdNJMGAZzgwAFpxAR+8YADswAVwGkZMJFEzpOjDKw4AFHGEEBvUnDhphwADZsi0gFw0mDWjqQBuUgF9yaCNMlENzgAXjgACjADfkctFnYkfQhDAEpQgD44AB42YAA3dKMo5P46C2tbJGkvLIpcgt9-QLi3AEEwMFCItJDMrPTTbIQ3dKywdIB5aU4kKyQQKpha8drhhIGzLLWODbNs3b3s8YAxKBQAcwXpAThMaGWDvbH0gFloGbmrgQfBzYpd1YjQZbEYARkB6zMwO2SHSAAlZlYIBCdtCRkZpHIrFYahQYQD8UYYFA5EhcfjyGYqHAXnJAsIUHlOOUbHYhMIIHJzsI0Qk4P9SLUBuRqXEXEwAKKfRZcNA8PiCfxWACecAAUgBlAAacFm80W-CU11U6h4TgwUv11yShjgJjMLMqDnN9Dilq+nh8pD8AXgCHdMrCkWisVoAet0R6fXqhWKhjKllZVVxMcavpd4Zg7U6Qaj+2hmdG4zeRF10uu-Aeq0LBfLMEe-V+T2L7zLVu+FBWLdLeq+lc7DYFf39deFVOotMCACNOCh1dq219a+30uC8YWoZsRyuEdjkevR8uvoVMdjyTWt4WiSSydXD4NqZP4AymeZE072ZzuUeZQKheQgA). -### Style Props {/*typing-style-props*/} +### Props de style {/*typing-style-props*/} -When using inline styles in React, you can use `React.CSSProperties` to describe the object passed to the `style` prop. This type is a union of all the possible CSS properties, and is a good way to ensure you are passing valid CSS properties to the `style` prop, and to get auto-complete in your editor. +Lorsque vous utilisez des styles en ligne dans React, vous pouvez utiliser `React.CSSProperties` pour typer l'objet passé à la prop `style`. Ce type regroupe toutes les propriétés CSS possibles, c'est une bonne façon de vous assurer que vous ne passez que de propriétés CSS valides à votre prop `style`, et d'obtenir une complétion automatique dans votre éditeur. ```ts interface MyComponentProps { @@ -447,17 +445,16 @@ interface MyComponentProps { } ``` -## Further learning {/*further-learning*/} +## Aller plus loin {/*further-learning*/} -This guide has covered the basics of using TypeScript with React, but there is a lot more to learn. -Individual API pages on the docs may contain more in-depth documentation on how to use them with TypeScript. +Ce guide a couvert les bases de l'utilisation de TypeScript avec React, mais il reste beaucoup à apprendre. Les pages dédiées de la documentation pour chaque API fournissent davantage d'information sur leur utilisation avec TypeScript. -We recommend the following resources: +Nous vous conseillons les ressources suivantes *(toutes en anglais, NdT)* : - - [The TypeScript handbook](https://www.typescriptlang.org/docs/handbook/) is the official documentation for TypeScript, and covers most key language features. + - [Le handbook TypeScript](https://www.typescriptlang.org/docs/handbook/) est la documentation officielle du langage et couvre tous les aspects importants. - - [The TypeScript release notes](https://devblogs.microsoft.com/typescript/) covers a each new features in-depth. + - [Les notes de versions de TypeScript](https://devblogs.microsoft.com/typescript/) présentent chaque nouvelle fonctionnalité en détails. - - [React TypeScript Cheatsheet](https://react-typescript-cheatsheet.netlify.app/) is a community-maintained cheatsheet for using TypeScript with React, covering a lot of useful edge cases and providing more breadth than this document. + - [L'antisèche React TypeScript](https://react-typescript-cheatsheet.netlify.app/) est une antisèche synthétique maintenue par la communauté pour utiliser TypeScript avec React, qui couvre pas mal de cas à la marge et aborde plus de sujets que cette page. - - [TypeScript Community Discord](https://discord.com/invite/typescript) is a great place to ask questions and get help with TypeScript and React issues. \ No newline at end of file + - [Le forum communautaire Discord de TypeScript](https://discord.com/invite/typescript) est un super endroit où poser vos questions et obtenir de l'aide pour vos problèmes liés à TypeScript avec React. From 21208ae13f24dd162fc93a7c84216adc04fbeff7 Mon Sep 17 00:00:00 2001 From: Christophe Porteneuve Date: Wed, 23 Aug 2023 12:41:03 +0200 Subject: [PATCH 2/2] copy(typescript): final review pass --- src/content/learn/typescript.md | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/src/content/learn/typescript.md b/src/content/learn/typescript.md index b3c0f28de..3901d0aac 100644 --- a/src/content/learn/typescript.md +++ b/src/content/learn/typescript.md @@ -79,7 +79,7 @@ export default App = AppTSX; -Les bacs à sable de cette documentation comprennent le code TypeScript, mais n'exécutent pas la vérification de types. Ça signifie que vous pouvez modifier les bacs à sable TypeScript pour apprendre, mais vous ne verrez aucune erreur ni aucun avertissement liés au typage. Pour bénéficier de la vérification de types, vous opuvez utiliser le [*TypeScript Playground*](https://www.typescriptlang.org/play) ou un bac à sable en ligne aux fonctionnalités plus riches. +Les bacs à sable de cette documentation comprennent le code TypeScript, mais n'exécutent pas la vérification de types. Ça signifie que vous pouvez modifier les bacs à sable TypeScript pour apprendre, mais vous ne verrez aucune erreur ni aucun avertissement liés au typage. Pour bénéficier de la vérification de types, vous pouvez utiliser le [*TypeScript Playground*](https://www.typescriptlang.org/play) ou un bac à sable en ligne aux fonctionnalités plus riches. @@ -123,7 +123,7 @@ Le type qui décrit les props de votre composant peut être aussi simple ou comp ## Exemples de typage avec les Hooks {/*example-hooks*/} -Les définitions de types dans `@types/react` incluent le typage des Hooks fournis par React, que vous pouvez donc utiliser sans configuration supplémentaire. Ces types sont conçus pour s'appuyer sur le code que vous écrviez, vous bénéficierez donc la plupart du temps de [l'inférence de type](https://www.typescriptlang.org/docs/handbook/type-inference.html), de sorte que vous ne devriez pas avoir à leur fournir des types sur-mesure. +Les définitions de types dans `@types/react` incluent le typage des Hooks fournis par React, que vous pouvez donc utiliser sans configuration supplémentaire. Ces types sont conçus pour s'appuyer sur le code que vous écrivez, vous bénéficierez donc la plupart du temps de [l'inférence de type](https://www.typescriptlang.org/docs/handbook/type-inference.html), de sorte que vous ne devriez pas avoir à leur fournir des types sur-mesure. Ceci étant dit, voyons quelques exemples de fourniture explicite de types à des Hooks. @@ -143,7 +143,7 @@ const [enabled, setEnabled] = useState(false); const [enabled, setEnabled] = useState(false); ``` -Dans ce cas précis ça n'a guère d'intérêt, mais pour une union par exemple, vous aurez besoin d'un typage explicite. Par exemple, le `status` ci-dessous a un jeu de valeurs restreint : +Dans ce cas précis ça n'avait guère d'intérêt, mais pour une union par exemple, vous aurez besoin d'un typage explicite. Par exemple, le `status` ci-dessous a un jeu de valeurs restreint : ```ts type Status = "idle" | "loading" | "success" | "error"; @@ -226,7 +226,7 @@ Nous utilisons ici TypeScript à certains endroits stratégiques : - `const initialState: State` fournit un type pour l'état initial, qui est aussi le type qu'utilisera `useReducer` par défaut. - `stateReducer(state: State, action: CounterAction): State` définit les types des arguments et de la valeur de retour pour la fonction de réduction. -Une alternative plus explicite consisterait à définir le type d'`initialState` en passant un paramètre de type à `useReducer` : +Pour un style plus explicite, vous pouvez plutôt définir le type d'`initialState` en passant un paramètre de type à `useReducer` : ```ts import { stateReducer, State } from './your-reducer-implementation'; @@ -282,11 +282,11 @@ export default App = AppTSX; -Cette technique fonctionne lorsque vous avez une valeur par défaut pertinente — mais il arrive que ça ne soit pas le cas, et que vous utilisez alors `null` comme valeur par défaut. Le souci, c'est que pour satisfaire le système de typage, vous allez devoir explicitement passer un paramètre de type `ContextShape | null` à `createContext`. +Cette technique fonctionne lorsque vous avez une valeur par défaut pertinente — mais il arrive que ça ne soit pas le cas, et que vous utilisiez alors `null` comme valeur par défaut. Le souci, c'est que pour satisfaire le système de typage, vous allez devoir explicitement passer à `createContext` un paramètre de type `ContextShape | null`. Ça va complexifier votre code en vous forçant à éliminer le `| null` du type pour les consommateurs du contexte. Nous vous conseillons d'incorporer un *type guard* au sein de votre Hook personnalisé pour vérifier que la valeur existe bien, et lever une exception dans le cas contraire : -```js {5, 16-20} +```tsx {5, 16-20} import { createContext, useContext, useState, useMemo } from 'react'; // C'est un exemple simplifié, imaginez quelque chose de plus riche @@ -363,7 +363,7 @@ export default function Form() { return ( <> -

    Value: {value}

    +

    Valeur : {value}

    ); } @@ -371,7 +371,7 @@ export default function Form() { ## Types utiles {/*useful-types*/} -Le module `@types/react` fournit un vaste ensemble de types ; une fois que vous serez à l'aise avec l'utilisation combinée de React et TypeScript, ça vaut le coup d'y jeter un coup d'œil. Vous les trouverez dans [le dossier de React sur DefinitelyTyped](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react/index.d.ts). Nous allons passer ici en revue les plus courants. +Le module `@types/react` fournit un vaste ensemble de types ; une fois que vous serez à l'aise avec l'utilisation combinée de React et TypeScript, ça vaut le coup d'explorer son contenu. Vous le trouverez dans [le dossier de React sur DefinitelyTyped](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react/index.d.ts). Nous allons passer ici en revue les types les plus courants. ### Événements DOM {/*typing-dom-events*/} @@ -422,7 +422,7 @@ interface ModalRendererProps { } ``` -C'est là une définition très large des enants. La seconde utilise plutôt le type `React.ReactElement`, qui ne permet que les éléments JSX et non les nœuds primitifs tels que les chaînes de caractères ou les nombres : +C'est là une définition très large pour les enfants. La seconde utilise plutôt le type `React.ReactElement`, qui ne permet que les éléments JSX et pas les nœuds primitifs tels que les chaînes de caractères ou les nombres : ```ts interface ModalRendererProps {