Catégories
Astuces et Design

Réagissez avec TypeScript: Meilleures pratiques – SitePoint

React et TypeScript sont deux technologies impressionnantes utilisées par de nombreux développeurs de nos jours. Savoir comment faire peut devenir délicat, et parfois il est difficile de trouver la bonne réponse. Ne pas s'inquiéter. Nous avons rassemblé les meilleures pratiques ainsi que des exemples pour clarifier les doutes que vous pourriez avoir.

Plongeons-nous!

Comment React et TypeScript fonctionnent ensemble

Avant de commencer, revoyons comment React et TypeScript fonctionnent ensemble. React est une «bibliothèque JavaScript pour créer des interfaces utilisateur», tandis que TypeScript est un «sur-ensemble typé de JavaScript qui se compile en JavaScript simple». En les utilisant ensemble, nous construisons essentiellement nos interfaces utilisateur à l'aide d'une version typée de JavaScript.

La raison pour laquelle vous pourriez les utiliser ensemble serait d'obtenir les avantages d'un langage de type statique (TypeScript) pour votre interface utilisateur. Cela signifie plus de sécurité et moins de bugs à expédier à l'avant.

TypeScript compile-t-il mon code React?

Une question courante qu'il est toujours bon d'examiner est de savoir si TypeScript compile votre code React. Le fonctionnement de TypeScript est similaire à cette interaction:

TS: "Hé, est-ce tout votre code d'interface utilisateur?"
Réagir: "Ouaip!"
TS: "Cool! Je vais le compiler et m'assurer que vous n'avez rien manqué. "
Réagir: "Ça me semble bien!"

Donc, la réponse est oui, c'est le cas! Mais plus tard, lorsque nous couvrirons la tsconfig.json paramètres, la plupart du temps vous voudrez utiliser "noEmit": true. Ce que cela signifie est TypeScript Ne fera pas émettre du JavaScript après la compilation. En effet, en règle générale, nous utilisons simplement TypeScript pour effectuer notre vérification de type.

La sortie est gérée, dans un cadre CRA, par react-scripts. Nous courrons yarn build et react-scripts regroupe la sortie pour la production.

Pour récapituler, TypeScript compile votre code React pour vérifier votre code. Il n'émet aucune sortie JavaScript (dans la plupart des scénarios). La sortie est toujours similaire à un projet React non-TypeScript.

TypeScript peut-il fonctionner avec React et webpack?

Oui, TypeScript peut fonctionner avec React et webpack. Heureusement pour vous, le manuel TypeScript officiel contient un guide à ce sujet.

J'espère que cela vous donne un petit rappel sur la façon dont les deux fonctionnent ensemble. Maintenant, passons aux meilleures pratiques!

Les meilleures pratiques

Nous avons recherché les questions les plus courantes et rassemblé cette liste pratique des cas d'utilisation les plus courants pour React avec TypeScript. De cette façon, vous pouvez suivre les meilleures pratiques dans vos projets en utilisant cet article comme référence.

Configuration

La configuration est l'une des parties du développement les moins amusantes mais les plus importantes. Comment pouvons-nous mettre en place les choses dans les plus brefs délais qui fourniront une efficacité et une productivité maximales? Nous allons discuter de la configuration du projet, notamment:

  • tsconfig.json
  • ESLint
  • Plus jolie
  • Extensions et paramètres VS Code.

Configuration du projet

La façon la plus rapide de démarrer une application React / TypeScript consiste à utiliser create-react-app avec le modèle TypeScript. Vous pouvez le faire en exécutant:

npx create-react-app my-app --template typescript

Cela vous donnera le strict minimum pour commencer à écrire React avec TypeScript. Quelques différences notables sont:

  • le .tsx extension de fichier
  • le tsconfig.json
  • le react-app-env.d.ts

le tsx est pour "TypeScript JSX". le tsconfig.json est le fichier de configuration TypeScript, dont certains paramètres par défaut sont définis. le react-app-env.d.ts fait référence aux types de react-scripts, et aide à des choses comme autoriser les importations SVG.

tsconfig.json

Heureusement pour nous, le dernier modèle React / TypeScript génère tsconfig.json pour nous. Cependant, ils ajoutent le strict minimum pour commencer. Nous vous suggérons de modifier le vôtre pour qu'il corresponde à celui ci-dessous. Nous avons également ajouté des commentaires pour expliquer le but de chaque option:

{
  "compilerOptions": {
    "target": "es5", // Specify ECMAScript target version
    "lib": (
      "dom",
      "dom.iterable",
      "esnext"
    ), // List of library files to be included in the compilation
    "allowJs": true, // Allow JavaScript files to be compiled
    "skipLibCheck": true, // Skip type checking of all declaration files
    "esModuleInterop": true, // Disables namespace imports (import * as fs from "fs") and enables CJS/AMD/UMD style imports (import fs from "fs")
    "allowSyntheticDefaultImports": true, // Allow default imports from modules with no default export
    "strict": true, // Enable all strict type checking options
    "forceConsistentCasingInFileNames": true, // Disallow inconsistently-cased references to the same file.
    "module": "esnext", // Specify module code generation
    "moduleResolution": "node", // Resolve modules using Node.js style
    "resolveJsonModule": true, // Include modules imported with .json extension
    "noEmit": true, // Do not emit output (meaning do not compile code, only perform type checking)
    "jsx": "react" // Support JSX in .tsx files
    "sourceMap": true, // Generate corrresponding .map file
    "declaration": true, // Generate corresponding .d.ts file 
    "noUnusedLocals": true, // Report errors on unused locals
    "noUnusedParameters": true, // Report errors on unused parameters
    "experimentalDecorators": true, // Enables experimental support for ES decorators
    "incremental": true, // Enable incremental compilation by reading/writing information from prior compilations to a file on disk
    "noFallthroughCasesInSwitch": true // Report errors for fallthrough cases in switch statement
  },
  "include": (
    "src/**/*" // *** The files TypeScript should type check ***
  ),
  "exclude": ("node_modules", "build") // *** The files to not type check ***
}

Les recommandations supplémentaires proviennent du (react-typescript-cheatsheet et les explications proviennent de la documentation des options du compilateur dans le manuel TypeScript officiel. C'est une merveilleuse ressource si vous voulez en savoir plus sur les autres options et ce qu'elles font.

ESLint / Prettier

Afin de vous assurer que votre code respecte les règles du projet ou de votre équipe et que le style est cohérent, il est recommandé de configurer ESLint et Prettier. Pour les faire jouer correctement, suivez ces étapes pour le configurer.

  1. Installez les dépendances de développement requises:

    yarn add eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-react --dev
    
  2. Créer un .eslintrc.js fichier à la racine et ajoutez ce qui suit:

    module.exports =  {
      parser:  '@typescript-eslint/parser',  // Specifies the ESLint parser
      extends:  (
        'plugin:react/recommended',  // Uses the recommended rules from @eslint-plugin-react
        'plugin:@typescript-eslint/recommended',  // Uses the recommended rules from @typescript-eslint/eslint-plugin
      ),
      parserOptions:  {
      ecmaVersion:  2018,  // Allows for the parsing of modern ECMAScript features
      sourceType:  'module',  // Allows for the use of imports
      ecmaFeatures:  {
        jsx:  true,  // Allows for the parsing of JSX
      },
      },
      rules:  {
        // Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs
        // e.g. "@typescript-eslint/explicit-function-return-type": "off",
      },
      settings:  {
        react:  {
          version:  'detect',  // Tells eslint-plugin-react to automatically detect the version of React to use
        },
      },
    };
    
  3. Ajoutez des dépendances plus jolies:

    yarn add prettier eslint-config-prettier eslint-plugin-prettier --dev
    
  4. Créer un .prettierrc.js fichier à la racine et ajoutez ce qui suit:

    module.exports =  {
      semi:  true,
      trailingComma:  'all',
      singleQuote:  true,
      printWidth:  120,
      tabWidth:  4,
    };
    
  5. Mettre à jour le .eslintrc.js fichier:

    module.exports =  {
      parser:  '@typescript-eslint/parser',  // Specifies the ESLint parser
      extends:  (
        'plugin:react/recommended',  // Uses the recommended rules from @eslint-plugin-react
        'plugin:@typescript-eslint/recommended',  // Uses the recommended rules from the @typescript-eslint/eslint-plugin
    +   'prettier/@typescript-eslint',  // Uses eslint-config-prettier to disable ESLint rules from @typescript-eslint/eslint-plugin that would conflict with prettier
    +   'plugin:prettier/recommended',  // Enables eslint-plugin-prettier and displays prettier errors as ESLint errors. Make sure this is always the last configuration in the extends array.
      ),
      parserOptions:  {
      ecmaVersion:  2018,  // Allows for the parsing of modern ECMAScript features
      sourceType:  'module',  // Allows for the use of imports
      ecmaFeatures:  {
        jsx:  true,  // Allows for the parsing of JSX
      },
      },
      rules:  {
        // Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs
        // e.g. "@typescript-eslint/explicit-function-return-type": "off",
      },
      settings:  {
        react:  {
          version:  'detect',  // Tells eslint-plugin-react to automatically detect the version of React to use
        },
      },
    };
    

Ces recommandations proviennent d'une ressource communautaire écrite intitulée «Utilisation d'ESLint et de Prettier dans un projet TypeScript» par Robert Cooper. Si vous visitez son blog, vous pouvez en savoir plus sur le «pourquoi» derrière ces règles et configurations.

Extensions et paramètres VSCode

Nous avons ajouté ESLint et Prettier et la prochaine étape pour améliorer notre DX consiste à corriger / améliorer automatiquement notre code lors de la sauvegarde.

Tout d'abord, installez l'extension ESLint et l'extension Prettier pour VSCode. Cela permettra à ESLint de s'intégrer parfaitement à votre éditeur.

Ensuite, mettez à jour vos paramètres Workspace en ajoutant ce qui suit à votre .vscode/settings.json:

{
    "editor.formatOnSave": true
}

Cela permettra à VS Code de travailler sa magie et de corriger votre code lorsque vous enregistrez. C'est beau!

Ces suggestions proviennent également de l'article précédemment lié «Utilisation d'ESLint et de Prettier dans un projet TypeScript» de Robert Cooper.

Composants

L'un des concepts fondamentaux de React est les composants. Ici, nous ferons référence aux composants standard à partir de React v16.8, c'est-à-dire ceux qui utilisent des hooks par opposition aux classes.

En général, il y a beaucoup à s'inquiéter pour les composants de base. Regardons un exemple:

import React from 'react'

// Written as a function declaration
function Heading(): React.ReactNode {
  return 

My Website Heading

} // Written as a function expression const OtherHeading: React.FC = () =>

My Website Heading

Notez la principale différence ici. Dans le premier exemple, nous écrivons notre fonction en tant que déclaration de fonction. Nous annotons le type de retour avec React.Node parce que c'est ce qu'il retourne. En revanche, le deuxième exemple utilise un expression de fonction. Parce que la deuxième instance renvoie une fonction, au lieu d'une valeur ou d'une expression, nous annotons le type de fonction avec React.FC pour React «Function Component».

Il peut être déroutant de se souvenir des deux. C'est surtout une question de choix de conception. Quelle que soit l'option que vous choisissez d'utiliser dans votre projet, utilisez-la de manière cohérente.

Accessoires

Le prochain concept de base que nous aborderons est celui des accessoires. Vous pouvez définir vos accessoires à l'aide d'une interface ou d'un type. Regardons un autre exemple:

import React from 'react'

interface Props {
  name: string;
  color: string;
}

type OtherProps = {
  name: string;
  color: string;
}

// Notice here we're using the function declaration with the interface Props
function Heading({ name, color }: Props): React.ReactNode {
  return 

My Website Heading

} // Notice here we're using the function expression with the type OtherProps const OtherHeading: React.FC = ({ name, color }) =>

My Website Heading

En ce qui concerne les types ou les interfaces, nous vous suggérons de suivre les directives présentées par le react-typescript-cheatsheet communauté:

  • "Utilisez toujours l'interface pour la définition de l'API publique lors de la création d'une bibliothèque ou de définitions de type ambiant tierces."
  • "Pensez à utiliser le type pour vos accessoires de composants React et votre état, car il est plus contraint."

Vous pouvez en savoir plus sur la discussion et voir un tableau pratique comparant les types et les interfaces ici.

Regardons un autre exemple pour que nous puissions voir quelque chose d'un peu plus pratique:

import React from 'react'

type Props = {
  /** color to use for the background */
  color?: string;
  /** standard children prop: accepts any valid React Node */
  children: React.ReactNode;
  /** callback function passed to the onClick handler*/
  onClick: ()  => void;
}

const Button: React.FC = ({ children, color = 'tomato', onClick }) => {
   return 
}

Dans ce

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *