Réagir avec TypeScript: meilleures pratiques-js tutoriel-php.cn

Réagir avec TypeScript: meilleures pratiques

React et TypeScript sont deux technologies impressionnantes utilisées par de nombreux développeurs ces jours-ci. Savoir faire les choses peut devenir délicat, et parfois il est difficile de trouver la bonne réponse. Ne vous inquiétez pas. Nous avons mis en place les meilleures pratiques ainsi que des exemples pour clarifier les doutes que vous pourriez avoir.

Plongeons!

Les plats clés

Tirez le parti de typeScript pour une sécurité améliorée: Utilisez le dactylographie avec réagir pour bénéficier d'un typage statique qui améliore la sécurité du code, la prévisibilité et la productivité des développeurs en attrapant les erreurs au temps de compilation.
Configurer efficacement TypeScript: commencez par une configuration robuste `tsconfig.json`, permettant d'options telles que` strict`, `noemit` et` esmoduleInterop` pour appliquer les meilleures pratiques et simplifier les modules de gestion et la compilation.
Intégrer Eslint et plus joli: configurez Eslint avec l'analyseur TypeScript et plus joli pour le formatage cohérent de code. Cela aide à maintenir la qualité et la cohérence du code, en particulier dans les environnements d'équipe.
Utiliser TypeScript avec des crochets: profitez des capacités de TypeScript pour déduire les types dans les crochets React pour un code plus propre et plus sûr. Utilisez des génériques et des types d'union pour gérer la logique de l'État complexe.
Tapez les accessoires et état avec précision: définissez les accessoires des composants et l'état à l'aide d'interfaces ou de types de typeScript pour garantir que les composants reçoivent les données correctes, améliorant la fiabilité et la maintenabilité du composant.
Adopter les meilleures pratiques pour la configuration du projet: utilisez l'application Create React avec le modèle TypeScript pour la configuration initiale afin de démarrer rapidement les projets avec des défauts sensibles et des configurations de construction optimisées pour TypeScript.

comment la réaction et le type de type fonctionnent ensemble

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

La raison pour laquelle vous pourriez les utiliser ensemble serait d'obtenir les avantages d'une langue dactylographiée (TypeScript) pour votre interface utilisateur. Cela signifie plus de sécurité et moins de bogues expédiés à l'avant.

est-ce que TypeScript compile mon code de réact?

Une question courante qui est toujours bonne à examiner est de savoir si TypeScript compile votre code de réaction. La façon dont TypeScript fonctionne est similaire à cette interaction:

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

donc la réponse est oui, c'est le cas! Mais plus tard, lorsque nous couvrons les paramètres tsconfig.json, la plupart du temps, vous voudrez utiliser "NoEmit": true. Cela signifie que TypeScript n'émettra pas JavaScript après compilation. En effet, généralement, nous utilisons simplement TypeScript pour faire notre type de type.

La sortie est gérée, dans un réglage de l'ARC, par réact-scripts. Nous exécutons le fil Build et React-Scripts regroupe la production pour la production.

Pour récapituler, TypeScript compile votre code de réact 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 type.

TypeScript peut-il fonctionner avec React et WebPack?

Oui, TypeScript peut fonctionner avec React et WebPack. Heureusement pour vous, la documentation WebPack a un guide à ce sujet.

J'espère que cela vous donne un rafraîchissement doux sur la façon dont les deux fonctionnent ensemble. Maintenant, sur les meilleures pratiques!

meilleures pratiques

Nous avons recherché les questions les plus courantes et élaboré cette liste pratique des cas d'utilisation les plus courants pour réagir avec TypeScript. De cette façon, vous pouvez utiliser cet article comme référence dans vos propres projets.

Configuration

L'une des parties du développement les moins amusantes, mais les plus importantes, est la configuration. Comment pouvons-nous installer les choses dans le plus court laps de temps qui fournira une efficacité et une productivité maximales? Nous discuterons de la configuration du projet, y compris:

tsconfig.json
eslint
plus joli
VS Extensions et paramètres de code.

Configuration du projet

Le moyen le plus rapide de démarrer une application React / TypeScript consiste à utiliser Create-React-App avec le modèle TypeScript. Vous pouvez le faire en fonctionnant:

npx create-react-app my-app <span>--template typescript
</span>

Copier après la connexion

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

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

Le TSX est destiné à «TypeScript JSX». Le tsconfig.json est le fichier de configuration TypeScript, qui a un jeu par défaut. La react-app-env.d.ts fait référence aux types de réactions et aide à permettre des importations SVG.

tsconfig.json

Lucky for Us, 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 correspondre à celui ci-dessous. Nous avons également ajouté des commentaires pour expliquer l'objectif de chaque option:

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

Copier après la connexion

Les recommandations supplémentaires proviennent de la communauté React-TypeScript-CheatSheet et les explications proviennent des documents Options du compilateur dans le manuel de type officiel. Ceci est une merveilleuse ressource si vous voulez en savoir plus sur d'autres options et ce qu'ils font.

eslint / plus joli

Afin de vous assurer que votre code suit les règles du projet ou de votre équipe, et le style est cohérent, il est recommandé de configurer Eslint et plus joli. Pour les faire jouer bien, suivez ces étapes pour le configurer.

Installez les dépendances de développement requises:
npx create-react-app my-app --template typescript 
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion

Créer un fichier .eslintrc.js à la racine et ajouter ce qui suit:

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

Copier après la connexion

Ajouter des dépendances plus jolies:
```
yarn add eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-react --dev

```
Copier après la connexion
Copier après la connexion
Copier après la connexion

Créez un fichier .prettierrc.js à la racine et ajoutez ce qui suit:

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

Copier après la connexion

Mettez à jour le fichier .eslintrc.js:
```
yarn add prettier eslint-config-prettier eslint-plugin-prettier --dev

```
Copier après la connexion
Copier après la connexion

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

VS Extensions et paramètres de code

Nous avons ajouté Eslint et plus jolie et la prochaine étape pour améliorer notre DX consiste à corriger automatiquement / nette notre code sur Save.

Tout d'abord, installez l'extension Eslint et l'extension plus jolie pour le code vs. Cela permettra à Eslint de s'intégrer avec votre éditeur de manière transparente.

Ensuite, mettez à jour vos paramètres d'espace de travail en ajoutant ce qui suit à votre .vscode / settings.json:

module<span>.exports =  {
</span>  <span>semi:  true,
</span>  <span>trailingComma:  'all',
</span>  <span>singleQuote:  true,
</span>  <span>printWidth:  120,
</span>  <span>tabWidth:  4,
</span><span>};
</span>

Copier après la connexion

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

Ces suggestions proviennent également de l'article précédemment lié «Utilisation d'Eslint et plus joli dans un projet de type», par Robert Cooper.

Remarque: Pour en savoir plus sur react.fc, regardez ici et lisez ici pour react.reactnode.

Composants

L'un des concepts de base de la réact est les composants. Ici, nous ferons référence à des composants standard comme de React v16.8, ce qui signifie ceux qui utilisent des crochets par opposition aux classes.

En général, il y a beaucoup à se préoccuper des composants de base. Regardons un exemple:

module<span>.exports =  {
</span>  <span>parser:  '@typescript-eslint/parser',  // Specifies the ESLint parser
</span>  <span>extends:  [
</span>    <span>'plugin:react/recommended',  // Uses the recommended rules from @eslint-plugin-react
</span>    <span>'plugin:@typescript-eslint/recommended',  // Uses the recommended rules from the @typescript-eslint/eslint-plugin
</span><span>+   'prettier/@typescript-eslint',  // Uses eslint-config-prettier to disable ESLint rules from @typescript-eslint/eslint-plugin that would conflict with prettier
</span><span>+   '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.
</span>  <span>],
</span>  <span>parserOptions:  {
</span>  <span>ecmaVersion:  2018,  // Allows for the parsing of modern ECMAScript features
</span>  <span>sourceType:  'module',  // Allows for the use of imports
</span>  <span>ecmaFeatures:  {
</span>    <span>jsx:  true,  // Allows for the parsing of JSX
</span>  <span>},
</span>  <span>},
</span>  <span>rules:  {
</span>    <span>// Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs
</span>    <span>// e.g. "@typescript-eslint/explicit-function-return-type": "off",
</span>  <span>},
</span>  <span>settings:  {
</span>    <span>react:  {
</span>      <span>version:  'detect',  // Tells eslint-plugin-react to automatically detect the version of React to use
</span>    <span>},
</span>  <span>},
</span><span>};
</span>

Copier après la connexion

Remarquez la différence clé ici. Dans le premier exemple, nous écrivons notre fonction comme une déclaration de fonction . Nous annotons le return type avec react.node parce que c'est ce qu'il renvoie. En revanche, le deuxième exemple utilise une expression de fonction . Parce que la deuxième instance renvoie une fonction, au lieu d'une valeur ou d'une expression, nous annovons le type de fonction avec react.fc pour react " Composant de fonction ».

Il peut être déroutant de se souvenir des deux. C’est surtout une question de choix de conception. Quel que soit votre choix dans votre projet, utilisez-le de manière cohérente.

accessoires

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

<span>{
</span>    <span>"editor.formatOnSave": true
</span><span>}</span>

Copier après la connexion

En ce qui concerne les types ou les interfaces, nous vous suggérons de suivre les directives présentées par la communauté React-TypeScript-Cheatheet:

«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 en 3e parti.»
«Envisagez d'utiliser le type pour vos accessoires et l'état de composant réact, car il est plus contraint.»

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

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

npx create-react-app my-app <span>--template typescript
</span>

Copier après la connexion

Dans ce composant , nous utilisons un type pour nos accessoires. Chaque accessoire a une brève description énumérée au-dessus pour fournir plus de contexte à d'autres développeurs. Le ? Une fois que l'hélice nommée Color indique qu'elle est facultative. L'enfant Prop prend une react.reactnode car il accepte tout ce qui est une valeur de retour valide d'un composant (en savoir plus ici). Pour tenir compte de notre accessoire de couleur facultatif, nous utilisons une valeur par défaut lors de la déstruction. Cet exemple doit couvrir les bases et montrer que vous devez écrire des types pour vos accessoires et utiliser des valeurs facultatives et par défaut.

En général, gardez ces choses à l'esprit lorsque vous écrivez vos accessoires dans un projet de réaction et de dactylographie:

Ajoutez toujours des commentaires descriptifs à vos accessoires en utilisant la notation tsdoc / ** commentaire * /.
Que vous utilisiez des types ou des interfaces pour les accessoires de votre composant, utilisez-les de manière cohérente.
Lorsque les accessoires sont facultatifs, gérez de manière appropriée ou utilisez des valeurs par défaut.

crochets

Heureusement, l'inférence de type dactylographié fonctionne bien lors de l'utilisation de crochets. Cela signifie que vous n'avez pas grand-chose à vous soucier. Par exemple, prenez cet exemple:

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

Copier après la connexion

TypeScript dépente les valeurs données à utiliser par le crochet UseState. C'est un domaine où réagir et dactylographié fonctionne simplement ensemble et c'est beau.

Dans les rares occasions où vous devez initialiser un crochet avec une valeur nulle, vous pouvez utiliser un générique et passer une union pour taper correctement votre crochet. Voir cette instance:

<span>yarn add eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-react --dev
</span>

Copier après la connexion

L'autre endroit où la type dactylographie brille avec des crochets est avec Userreducer, où vous pouvez profiter des syndicats discriminés. Voici un exemple utile:

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

Copier après la connexion

Source: Section React-TypeScript-CheatSheet Hooks

La beauté ici réside dans l'utilité des syndicats discriminés. Remarquez comment l'action a une union de deux objets d'apparence similaire. Le type de propriété est un littéral de chaîne. La différence entre ce type et une chaîne de type est que la valeur doit correspondre à la chaîne littéral définie dans le type. Cela signifie que votre programme est très sûr car un développeur ne peut appeler qu'une action qui a un type de clé de type sur "set_one" ou "set_two".

Comme vous pouvez le voir, les crochets n’ajoutent pas beaucoup de complexité à la nature d’un projet React et TypeScript. Si quoi que ce soit, ils se prêtent bien au duo.

Cas d'utilisation courants

Cette section consiste à couvrir les cas d'utilisation les plus courants où les gens trébuchent lors de l'utilisation de TypeScript avec React. Nous espérons qu'en partageant cela, vous éviterez les pièges et partagerez même ces connaissances avec d'autres.

Gestion des événements de forme

L'un des cas les plus courants est de taper correctement l'embarcage utilisé sur un champ de saisie dans un formulaire. Voici un exemple:

npx create-react-app my-app <span>--template typescript
</span>

Copier après la connexion

Extension des accessoires composants

Parfois, vous souhaitez prendre des accessoires de composants déclarés pour un composant et les étendre pour les utiliser sur un autre composant. Mais vous voudrez peut-être en modifier un ou deux. Eh bien, rappelez-vous comment nous avons examiné les deux façons de taper des accessoires, types ou interfaces composants? Selon lequel vous avez utilisé détermine la façon dont vous étendez les accessoires des composants. Voyons d'abord la façon dont l'utilisation de type:

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

Copier après la connexion

Si vous avez déclaré vos accessoires à l'aide d'une interface, nous pouvons utiliser le mot-clé s'étend pour «étendre» cette interface, mais effectuer une ou deux modifications:

<span>yarn add eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-react --dev
</span>

Copier après la connexion

Les deux méthodes résolvent le problème. C'est à vous de décider lequel utiliser. Personnellement, l'extension d'une interface est plus lisible, mais en fin de compte, c'est à vous et à votre équipe.

Vous pouvez en savoir plus sur les deux concepts dans le manuel TypeScript:

types d'intersection
Extension des interfaces

bibliothèques tierces

Que ce soit pour un client GraphQL comme Apollo ou pour tester avec quelque chose comme React Test Library, nous nous trouvons souvent en utilisant des bibliothèques tierces dans des projets React et TypeScript. Lorsque cela se produit, la première chose que vous voulez faire est de voir s'il y a un package @Types avec les définitions de type TypeScript. Vous pouvez le faire en fonctionnant:

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

Copier après la connexion

Par exemple, si vous utilisez une plaisanterie, vous pouvez le faire en fonctionnant:

<span>yarn add prettier eslint-config-prettier eslint-plugin-prettier --dev
</span>

Copier après la connexion

Cela vous donnerait alors une sécurité de type supplémentaire chaque fois que vous utilisez une plaisanterie dans votre projet.

L'espace de noms @Types est réservé aux définitions de type de package. Ils vivent dans un référentiel appelé définitivement Typed, qui est partiellement maintenu par l'équipe TypeScript et partiellement la communauté.

devraient-ils être enregistrés sous forme de dépendances ou de dépenses dans mon package.json?

La réponse courte est «cela dépend». La plupart du temps, ils peuvent passer sous DevDependces si vous créez une application Web. Cependant, si vous écrivez une bibliothèque React dans TypeScript, vous pouvez les inclure comme dépendances.

Il y a quelques réponses à cela sur Stack Overflow, que vous pouvez consulter pour plus d'informations.

Que se passe-t-il s'ils n'ont pas de package @Types?

Si vous ne trouvez pas de package @Types sur NPM, vous avez essentiellement deux options:

Ajouter un fichier de déclaration de base
Ajouter un fichier de déclaration approfondi

La première option signifie que vous créez un fichier basé sur le nom du package et le mettez à la racine. Si, par exemple, nous avions besoin de types pour notre package banane-js, nous pourrions créer un fichier de déclaration de base appelé banana-js.d.ts à la racine:

npx create-react-app my-app <span>--template typescript
</span>

Copier après la connexion

Cela ne vous fournira pas la sécurité, mais cela vous débloquera.

Un fichier de déclaration plus approfondi serait l'endroit où vous ajoutez des types pour la bibliothèque / package:

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

Copier après la connexion

Si vous n'avez jamais écrit de fichier de déclaration, nous vous suggérons de jeter un œil au guide dans le manuel de type officiel.

Résumé

Utiliser React et TypeScript ensemble de la meilleure façon prend un peu d'apprentissage en raison de la quantité d'informations, mais les avantages sont extrêmement payants à long terme. Dans cet article, nous avons couvert la configuration, les composants, les accessoires, les crochets, les cas d'utilisation courants et les bibliothèques tierces. Bien que nous puissions plonger plus profondément dans de nombreux domaines individuels, cela devrait couvrir les 80% nécessaires pour vous aider à suivre les meilleures pratiques.

Si vous souhaitez voir cela en action, vous pouvez voir cet exemple sur GitHub.

Si vous souhaitez contacter, partager des commentaires sur cet article ou discuter de l'utilisation des deux technologies ensemble, vous pouvez me joindre sur Twitter @JsJoEio.

lecture plus approfondie

Si vous souhaitez plonger plus profondément, voici quelques ressources que nous suggérons:

react-typescript-cheetsheet

Beaucoup de ces recommandations sont venues directement de la feuille de cheminée React-TypeScript. Si vous recherchez des exemples ou des détails spécifiques sur tout ce qui est react-typescript, c'est l'endroit où aller. Nous accueillons également les contributions!

Manuel de type officiel

Une autre ressource fantastique est le manuel de typeScript. Ceci est tenu à jour par l'équipe TypeScript et fournit des exemples et une explication approfondie derrière le fonctionnement interne de la langue.

TypeScript Playground

Saviez-vous que vous pouvez tester React avec le code TypeScript dans le navigateur? Tout ce que vous avez à faire est d'importer réagir. Voici un lien pour vous aider à démarrer.

Façons pratiques pour faire avancer vos compétences de typeScript

Lisez notre guide sur les moyens pratiques de faire avancer vos compétences de typeScript pour vous préparer à l'apprentissage continu à mesure que vous avancez.

FAQ sur React with TypeScript

pouvez-vous utiliser React avec TypeScript?

es, vous pouvez absolument utiliser React avec TypeScript. En fait, la combinaison de React avec TypeScript est devenue de plus en plus populaire dans la communauté du développement Web. TypeScript est un sur-ensemble typiquement typé de JavaScript qui offre des outils améliorés et la sécurité des types, ce qui en fait un excellent choix pour construire des applications de réaction robustes et maintenables.
Lorsque vous utilisez React avec TypeScript, vous créez généralement des composants React comme classes de type ou composants fonctionnels avec Signatures de fonctions dactylographiques. TypeScript vous permet de définir des types solides pour les accessoires et l'état, en réduisant le risque d'erreurs d'exécution et en rendant votre base de code plus prévisible. De plus, la complétion automatique de TypeScript et la vérification des types dans les éditeurs de code modernes fournissent une assistance précieuse pendant le développement.
Pour démarrer un projet React avec TypeScript, vous pouvez utiliser des outils tels que créer une application React avec un modèle TypeScript ou configurer manuellement TypeScript dans un projet React existant. Avec TypeScript, vous pouvez profiter des avantages du typage statique tout en créant des interfaces utilisateur dynamiques et interactives avec React, ce qui entraîne des applications Web plus fiables et maintenables.

est-ce que TypeScript est nécessaire pour réagir?

Non, Le type de dactylographie n'est pas nécessaire pour construire des applications de réaction, mais elle peut être très bénéfique. React a été initialement développé à l'aide de JavaScript (ECMAScript), et de nombreuses applications React sont toujours écrites en JavaScript simple. React fonctionne de manière transparente avec JavaScript, et vous pouvez créer des applications React entièrement fonctionnelles et efficaces sans TypeScript.
Cependant, TypeScript peut fournir des avantages significatifs lorsque vous travaillez avec React. TypeScript est un sur-ensemble typique de JavaScript, ce qui signifie qu'il ajoute des annotations de type et vérifie au code JavaScript. Ces annotations de type peuvent attraper des erreurs liées au type au moment de la compilation, offrant une qualité de code et une maintenabilité améliorées. TypeScript peut rendre les bases de code de réactions grandes et complexes plus gérables en offrant une sécurité de type pour les accessoires, l'état et les paramètres de fonction, en réduisant la probabilité d'erreurs d'exécution.
En résumé, TypeScript n'est pas une exigence pour React, et vous pouvez utiliser React efficacement efficacement avec JavaScript ordinaire. Cependant, TypeScript peut améliorer votre expérience de développement en ajoutant de la vérification et de l'amélioration de la prévisibilité du code, ce qui en fait un choix précieux pour construire des applications de réaction robustes et maintenables, en particulier dans des projets plus grands et plus complexes.

Comment utiliser TypeScript dans React Apps?

Commencez par configurer un nouveau projet React avec TypeScript. Vous pouvez utiliser des outils comme Create React App avec TypeScript Template ou configurer manuellement TypeScript dans un projet React existant.
Ensuite, écrivez vos composants React à l'aide de TypeScript. Vous pouvez créer des composants fonctionnels avec des signatures de fonction TypeScript ou utiliser des classes TypeScript pour les composants de classe. TypeScript vous permet de spécifier les types d'accessoires et les types d'états, fournissant une vérification solide de la vérification et de la prise en charge automatique dans les éditeurs de code. Si vous utilisez des bibliothèques ou des packages tiers dans votre application React, assurez-vous d'installer des définitions de types de typeScript pour ces dépendances. De nombreuses bibliothèques populaires ont des déclarations de type dactylographiques à maintenance à la communauté disponibles sur définitivement TypeSpript

Quelle est la différence entre React.js et React Script?

La distinction principale entre React.js et React Script est le choix est le choix du langage de programmation utilisé pour le développement.
react.js (javascript): react.js, communément appelé react, est une bibliothèque JavaScript conçue pour la création d'interfaces utilisateur. Lorsque vous utilisez React.js, les développeurs écrivent généralement leurs applications en JavaScript simple, tirant souvent parti des fonctionnalités JavaScript modernes telles que ES6 et ES7. Une caractéristique notable de React.js est qu'elle n'applique pas la frappe stricte par défaut. En conséquence, les développeurs s'appuient sur des vérifications et des outils d'exécution comme des propypes pour la validation de type et la détection des erreurs.
Réagir TypeScript: React TypeScript, d'autre part, implique l'utilisation de TypeScript, un sur-ensemble typiquement typique de JavaScript, dans React Application, développement. Avec React TypeScript, les développeurs écrivent leurs composants React en utilisant la syntaxe de TypeScript. Cette approche offre un avantage significatif: la vérification des types statiques pendant le développement. TypeScript permet aux développeurs de définir des types et des interfaces pour les accessoires, l'état et d'autres données, qui peuvent attraper des erreurs liées au type au moment de la compilation plutôt que du temps d'exécution. Cela conduit à une meilleure qualité de code, à une prévisibilité améliorée du code et à une réduction des erreurs d'exécution.
En résumé, React.js est la bibliothèque JavaScript pour créer des interfaces utilisateur, tandis que React TypeScript est la même bibliothèque mais intégrée à TypeScript pour fournir amélioré Type de soutien à la sécurité et au développement. Le choix entre React.js et React TypeScript dépend des exigences du projet, des préférences des développeurs et de l'importance de la frappe statique pour une application particulière. Les deux options sont valides et largement utilisées dans le développement d'applications Web et d'interfaces utilisateur.

Dois-je commencer à réagir avec TypeScript?

Démarrer un projet React avec TypeScript ou JavaScript dépend de diverses considérations.
Commencer par TypeScript: commencer par TypeScript peut être avant outils de développement. La vérification de type statique de TypeScript aide à capturer les erreurs au moment de la compilation, conduisant à un code plus robuste et maintenable. Si vous travaillez sur un projet important ou complexe, TypeScript peut être particulièrement bénéfique pour prévenir les bogues et rendre la base de code plus facile à gérer. TypeScript fournit également une documentation de code améliorée via les définitions de type, ce qui peut améliorer la lisibilité du code et la collaboration au sein de votre équipe.
Opter pour JavaScript: Choisir JavaScript peut être plus adapté aux petits projets ou lorsque vous travaillez dans des délais serrés. JavaScript est plus léger et a une courbe d'apprentissage plus courte, ce qui le rend plus rapide à configurer et à démarrer. Si votre équipe manque d'expérience avec TypeScript ou si les exigences du projet ne nécessitent pas de frappe forte, JavaScript pourrait être un choix pragmatique. De plus, l'écosystème JavaScript possède une vaste collection de bibliothèques et de ressources, ce qui facilite la recherche de solutions et de support pour votre projet.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!