Reagieren Sie mit TypeScript: Best Practices

React und TypeScript sind zwei fantastische Technologien, die heutzutage von vielen Entwicklern verwendet werden. Zu wissen, wie man Dinge tut, kann schwierig werden, und manchmal ist es schwierig, die richtige Antwort zu finden. Keine Sorge. Wir haben die Best Practices zusammen mit Beispielen zusammengestellt, um alle Zweifel zu klären, die Sie möglicherweise haben.

Lassen Sie uns eintauchen.

Key Takeaways

• Nutzen Sie Typenkript für die erweiterte Sicherheit: Verwenden Sie das Typenkript mit Reaktionen, um von statischer Typen zu profitieren, was die Sicherheit der Code, die Vorhersagbarkeit und die Entwicklerproduktivität durch Fangfehler zur Kompilierungszeit verbessert.
• effizient konfigurieren Sie TypeScript: Beginnen Sie mit einem robusten Setup `tsconfig.json
Integrieren Sie Eslint und schöner: Richten Sie eslint mit dem Typscript -Parser und schöner für eine konsistente Codeformatierung ein. Dies hilft bei der Aufrechterhaltung der Codequalität und -konsistenz, insbesondere in Teamumgebungen.
Verwenden Sie TypeScript mit Hooks: Nutzen Sie die Funktionen von TypeScript, um Typen in React -Hooks für saubereres und sichereres Code zu schließen. Verwenden Sie Generika und Gewerkschaftstypen, um eine komplexe Zustandslogik zu bewältigen.
Type und Status genau angeben: Definieren Sie Komponenten -Requisiten und Zustand mithilfe von Typscript -Schnittstellen oder -Typen, um sicherzustellen
• Best Practices für die Projekteinrichtung anwenden: Verwenden Sie die React -App erstellen mit TypeScript -Vorlage für das erste Einrichtung, um Projekte mit vernünftigen Standardeinstellungen schnell zu starten und Konfigurationen zu erstellen, die für TypenScript optimiert sind.
wie reagiert und typecript zusammenarbeiten

Bevor wir beginnen, lassen Sie uns erneut besuchen, wie reagiert und typecript zusammenarbeiten. React ist eine „JavaScript -Bibliothek für das Erstellen von Benutzeroberflächen“, während TypeScript ein „typisierter Superet von JavaScript, der zu einfacher JavaScript kompiliert“ ist. Indem wir sie zusammen verwenden, bauen wir unsere Benutzeroberfläche mit einer typisierten Version von JavaScript im Wesentlichen auf.

Der Grund, warum Sie sie zusammen verwenden könnten, besteht darin, die Vorteile einer statisch typisierten Sprache (TypeScript) für Ihre Benutzeroberfläche zu nutzen. Dies bedeutet mehr Sicherheit und weniger Fehler, die zum vorderen Ende versandt werden.

kompiliert TypeScript meinen React -Code?

Eine gemeinsame Frage, die immer gut zu überprüfen ist, ist, ob TypeScript Ihren React -Code kompiliert. Die Art und Weise, wie TypeScript funktioniert, ähnelt dieser Interaktion:

ts: "Hey, ist das alles dein UI -Code?"

React: "Yup!"

TS: „Cool! Ich werde es zusammenstellen und sicherstellen, dass Sie nichts verpasst haben. "
React: „Klingt gut für mich!“

Die Antwort lautet also ja, es tut es! Aber später, wenn wir die Einstellungen von Tsconfig.json abdecken, möchten Sie die meiste Zeit "Noemit": True verwenden. Dies bedeutet, dass TypeScript JavaScript nach der Zusammenstellung nicht ausgibt. Dies liegt daran, dass wir in der Regel nur TypeScript verwenden, um unsere Typ-Überprüfung durchzuführen.

Die Ausgabe wird in einer CRA-Einstellung durch Reaktionen behandelt. Wir führen Garnbau aus und reagieren die Schreibkripte, die die Produktion ausbündelt.

Um zusammenzufassen, erfasst TypeScript Ihren React-Code, um Ihren Code zu überprüfen. Es gibt keine JavaScript -Ausgabe aus (in den meisten Szenarien). Die Ausgabe ähnelt immer noch einem Nicht-Type-typeskript-React-Projekt.

Kann TypeScript mit React und Webpack arbeiten?

Ja, TypeScript kann mit React und WebPack funktionieren. Zum Glück hat die Webpack -Dokumentation eine Anleitung dazu.

Hoffentlich gibt Ihnen das eine sanfte Auffrischung darüber, wie die beiden zusammenarbeiten. Nun zu Best Practices!

Best Practices

Wir haben die häufigsten Fragen untersucht und diese praktische Liste der häufigsten Anwendungsfälle für Reaktionen mit TypeScript zusammengestellt. Auf diese Weise können Sie diesen Artikel als Referenz in Ihren eigenen Projekten verwenden.

Konfiguration

Einer der am wenigsten lustigen, aber wichtigsten Teile der Entwicklung ist die Konfiguration. Wie können wir die Dinge in kürzester Zeit einrichten, die maximale Effizienz und Produktivität bietet? Wir werden das Projekt -Setup diskutieren, einschließlich:

• tsconfig.json
• Eslint
• schöner
• gegen Code -Erweiterungen und -einstellungen.

Projekt -Setup

Der schnellste Weg, um eine React/TypeScript-App zu starten, besteht darin, mit der TypeScript-Vorlage zu create-react-App zu starten. Sie können dies tun, indem Sie ausführen:

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

Auf diese Weise können Sie das nötige Minimum zum Schreiben mit TypeScript erhalten. Einige merkliche Unterschiede sind:

• Die .tsx -Dateierweiterung
• the tsconfig.json
• Die React-App-env.d.ts

Der TSX ist für "TypeScript JSX". Der tsconfig.json ist die TypeScript -Konfigurationsdatei, in der einige Standardeinstellungen festgelegt sind. Auf die React-App-env.d.TS verweist die Arten von Reaktionen und hilft bei der Erlebung von SVG-Importen.

tsconfig.json

Zum Glück generiert die neueste React/TypeScript -Vorlage für uns tsconfig.json. Sie fügen jedoch das nötige Minimum hinzu, um loszulegen. Wir empfehlen, dass Sie Ihre so ändern, dass Sie dem unten stimmen. Wir haben Kommentare hinzugefügt, um auch den Zweck jeder Option zu erläutern:

<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>

Die zusätzlichen Empfehlungen stammen aus der React-Typecript-Cheatsheet-Community und die Erklärungen aus den Compiler-Optionen im offiziellen Typekript-Handbuch. Dies ist eine wundervolle Ressource, wenn Sie über andere Optionen und was sie tun möchten.

Eslint/schöner

Um sicherzustellen, dass Ihr Code den Regeln des Projekts oder Ihres Teams befolgt und der Stil konsistent ist, wird empfohlen, Eslint und schöner einzurichten. Damit sie gut spielen können, befolgen Sie diese Schritte, um es einzurichten.

1. Installieren Sie die erforderlichen Dev -Abhängigkeiten:

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

2. Erstellen Sie eine .esLintrc.js -Datei am Stamm und fügen Sie Folgendes hinzu:

   <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>

3. fügen Sie schönere Abhängigkeiten hinzu:

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

4. Erstellen Sie eine .prettierrc.js -Datei am Stamm und fügen Sie Folgendes hinzu:

   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>

5. Aktualisieren Sie die Datei .esLintrc.js:

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

Diese Empfehlungen stammen von einer Community -Ressource, die von Robert Cooper mit dem Titel „Verwenden von Eslint und schöner in einem Typscript -Projekt“ geschrieben wurde. Wenn Sie diese Ressource besuchen, können Sie mehr über das „Warum“ hinter diesen Regeln und Konfigurationen erfahren.

gegen Code -Erweiterungen und -Inalationen

Wir haben Eslint und schöner hinzugefügt. Der nächste Schritt zur Verbesserung unseres DX besteht darin, unseren Code automatisch auf Speichern zu beheben/zu tun.

Installieren Sie zunächst die Eslint -Erweiterung und die schönere Erweiterung für VS -Code. Dadurch kann esslint nahtlos in Ihren Editor integriert werden.

Aktualisieren Sie als Nächst

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>

Dies ermöglicht VS Code, seine Magie zu bearbeiten und Ihren Code beim Speichern zu beheben. Es ist wunderschön!

Diese Vorschläge stammen auch aus dem zuvor verknüpften Artikel „Verwenden von Eslint und schöner in einem Typenkriptprojekt“ von Robert Cooper.

Hinweis: Weitere Informationen zu React.fc, hier suchen und hier für React.reactnode lesen.

Komponenten

Eines der Kernkonzepte von React sind Komponenten. Hier beziehen wir uns auf Standardkomponenten nach React v16.8, was bedeutet, dass die Haken im Gegensatz zu Klassen verwendet werden.

Im Allgemeinen gibt es für grundlegende Komponenten viel zu tun. Schauen wir uns ein Beispiel an:

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>

Beachten Sie hier den wichtigsten Unterschied. Im ersten Beispiel schreiben wir unsere Funktion als

Funktionserklärung . Wir kommentieren den -Regretyp mit react.node, da es das ist, was er zurückgibt. Im Gegensatz dazu verwendet das zweite Beispiel einen Ausdruck von Funktion. Funktionskomponente ”. Es kann verwirrend sein, sich an die beiden zu erinnern. Es handelt sich hauptsächlich um die Auswahl der Design. Was auch immer Sie in Ihrem Projekt verwenden möchten, verwenden Sie es konsequent. props

Das nächste Kernkonzept, das wir behandeln werden, sind Requisiten. Sie können Ihre Requisiten entweder mit einer Schnittstelle oder einem Typ definieren. Schauen wir uns ein anderes Beispiel an:

Wenn es um Typen oder Schnittstellen geht, empfehlen wir den Richtlinien, die durch die React-Typecript-Cheatsheet-Community vorgestellt wurden:

• "Verwenden Sie die Schnittstelle für die Definition der öffentlichen API immer, wenn Sie eine Bibliothek oder die Definitionen des dritten parteiübergreifenden Umgebungstyps erstellen."
• „Überlegen Sie die Verwendung von Typen für Ihre React -Komponenten -Requisiten und -zustand, da er besser eingeschränkt ist.“

Sie können mehr über die Diskussion lesen und eine praktische Tabelle sehen, in der hier Typen mit den Schnittstellen verglichen werden.

Schauen wir uns ein weiteres Beispiel an, damit wir etwas praktischeres sehen können:

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

In dieser Button /> -Komponente verwenden wir einen Typ für unsere Requisiten. Jede Prop hat eine kurze Beschreibung, die oben aufgeführt ist, um anderen Entwicklern mehr Kontext zu geben. Der ? Nach der Prop -namens Color gibt an, dass sie optional ist. Die Children Prop nimmt einen React. Um unsere optionale Farbquote zu berücksichtigen, verwenden wir einen Standardwert, wenn wir sie zerstören. Dieses Beispiel sollte die Grundlagen abdecken und zeigen, dass Sie Typen für Ihre Requisiten schreiben und sowohl optionale als auch Standardwerte verwenden müssen.

Beachten Sie im Allgemeinen diese Dinge, wenn Sie Ihre Requisiten in einem React- und Typscript -Projekt schreiben:

• Fügen Sie Ihren Requisiten immer deskriptive Kommentare mit der TSDOC -Notation hinzu /** Kommentar* /.
• Ob Sie Typen oder Schnittstellen für Ihre Komponenten -Requisiten verwenden, verwenden Sie sie konsistent.
• Wenn die Requisiten optional sind, handeln Sie angemessen oder verwenden Sie Standardwerte.

haken

Zum Glück funktioniert die Inferenz vom TypeScript -Typ bei Verwendung von Hooks gut. Dies bedeutet, dass Sie sich nicht viel Sorgen machen müssen. Nehmen Sie zum Beispiel dieses Beispiel:

<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>

TypeScript färbt die Werte, die für den Usestate -Hook verwendet wurden. Dies ist ein Bereich, in dem React und Typscript einfach zusammenarbeiten und es schön ist.

In den seltenen Fällen, in denen Sie einen Haken mit einem Null-Is-Wert initialisieren müssen, können Sie einen Generikum verwenden und eine Gewerkschaft übergeben, um Ihren Haken korrekt einzugeben. Siehe diese Instanz:

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

Der andere Ort, an dem Typenkript mit Haken glänzt, ist mit Userreducer, an dem Sie diskriminierte Gewerkschaften nutzen können. Hier ist ein nützliches Beispiel:

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>

Quelle: React-Typescript-Cheatsheet Hooks Abschnitt

Die Schönheit hier liegt in der Nützlichkeit diskriminierter Gewerkschaften. Beachten Sie, wie Aktionen eine Vereinigung von zwei ähnlich aussehenden Objekten haben. Der Eigenschaftstyp ist ein String -Literal. Die Differenz zwischen dieser und einer Typ -Zeichenfolge besteht darin, dass der Wert mit der im Typ des Typs definierten buchstäblichen -Sziele übereinstimmen muss. Dies bedeutet, dass Ihr Programm besonders sicher ist, da ein Entwickler nur eine Aktion aufrufen kann, die über einen Typ -Schlüssel auf "set_one" oder "set_two" eingestellt ist.

Wie Sie sehen, verleihen Haken der Art eines React- und Typscript -Projekts nicht viel Komplexität. Wenn überhaupt, eignen sie sich gut für das Duo.

gemeinsame Anwendungsfälle

Dieser Abschnitt soll die häufigsten Anwendungsfälle abdecken, in denen Personen bei der Verwendung von TypeScript mit React stolpern. Wir hoffen, indem Sie dies teilen, werden Sie die Fallstricke vermeiden und dieses Wissen sogar mit anderen teilen.

Handhabungsformelemente

Einer der häufigsten Fälle ist die korrekte Eingabe der auf einem Eingangsfeld verwendeten Onchange in einer Form. Hier ist ein Beispiel:

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

Komponenten -Requisiten

erweitern

Manchmal möchten Sie Komponenten -Requisiten für eine Komponente annehmen und sie erweitern, um sie für eine andere Komponente zu verwenden. Vielleicht möchten Sie ein oder zwei ändern. Denken Sie daran, wie wir uns die beiden Möglichkeiten angesehen haben, um Komponenten -Requisiten, -Typen oder Schnittstellen einzugeben? Abhängig von dem, was Sie verwendet haben, bestimmt Sie, wie Sie die Komponenten -Requisiten erweitern. Schauen wir uns zunächst den Weg mit dem Typ an:

<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>

Wenn Sie Ihre Requisiten mithilfe einer Schnittstelle deklariert haben, können wir das Schlüsselwort verwenden, um diese Schnittstelle im Wesentlichen zu „erweitern“, aber ein oder zwei Änderungen vornehmen:

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

Beide Methoden lösen das Problem. Es liegt an Ihnen, zu entscheiden, welche Sie verwenden sollen. Persönlich ist es lesbar, eine Oberfläche zu erweitern, aber letztendlich liegt es an Ihnen und Ihrem Team.

Sie können mehr über beide Konzepte im Typbuch "TypeScript" lesen:

• Kreuzungstypen
• Schnittstellen
erweitern

Bibliotheken von Drittanbietern

Egal, ob es sich um einen GraphQL-Client wie Apollo oder für Testen mit so etwas wie der React-Testbibliothek handelt, wir verwenden häufig Bibliotheken von Drittanbietern in React- und TypeScript-Projekten. In diesem Fall möchten Sie als erstes feststellen, ob es ein @Types -Paket mit den Definitionen TypeScript -Typ gibt. Sie können dies tun, indem Sie ausführen:

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>

Zum Beispiel können Sie dies tun, wenn Sie einen Scherz verwenden, indem Sie:

tun:

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

Dies würde Ihnen dann zusätzliche Typ-Safety geben, wenn Sie Scherz in Ihrem Projekt verwenden.

Der @Types -Namespace ist für Pakettypdefinitionen reserviert. Sie leben in einem Repository namens definitived, das vom TypeScript -Team und teilweise die Community teilweise gepflegt wird.

Sollten diese als Abhängigkeiten oder DevDependenzen in meinem Paket gespeichert werden?

Die kurze Antwort lautet "Es hängt davon ab". Meistens können sie unter DevDependencies gehen, wenn Sie eine Webanwendung erstellen. Wenn Sie jedoch eine React -Bibliothek in TypeScript schreiben, möchten Sie sie möglicherweise als Abhängigkeiten einbeziehen.

Es gibt einige Antworten darauf beim Stapelüberlauf, die Sie möglicherweise nach weiteren Informationen überprüfen.

Was passiert, wenn sie kein @types -Paket haben?

Wenn Sie kein @Types -Paket auf NPM finden, haben Sie im Wesentlichen zwei Optionen:

1. Fügen Sie eine grundlegende Deklarationsdatei
hinzu
2. Fügen Sie eine gründliche Deklarationsdatei
hinzu

Die erste Option bedeutet, dass Sie eine Datei basierend auf dem Paketnamen erstellen und in das Stammverschluss legen. Wenn wir zum Beispiel Typen für unser Paket Banana-Js benötigten, können wir eine grundlegende Deklarationsdatei namens Banana-js.d.ts am Stammerschein erstellen:

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

Dies bietet Ihnen keine Sicherheit, aber es wird Sie entsperren.

Eine gründlichere Deklarationsdatei wäre, wo Sie Typen für die Bibliothek/das Paket hinzufügen:

<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>

Wenn Sie noch nie eine Deklarationsdatei geschrieben haben, empfehlen wir Ihnen einen Blick auf den Leitfaden im offiziellen Handbuch zum Typenkript.

Zusammenfassung

Die Verwendung von React und TypeScript miteinander auf die beste Art und Weise, wie es die Informationsmenge ein wenig lernt, zahlen sich die Vorteile jedoch auf lange Sicht immens aus. In diesem Artikel haben wir Konfiguration, Komponenten, Requisiten, Hooks, gemeinsame Anwendungsfälle und Bibliotheken von Drittanbietern behandelt. Obwohl wir tiefer in viele individuelle Bereiche eintauchen konnten, sollte dies die 80% abdecken, die Sie benötigen, um die Best Practices zu befolgen.

Wenn Sie dies in Aktion sehen möchten, können Sie dieses Beispiel auf GitHub sehen.

Wenn Sie Kontakt aufnehmen, Feedback zu diesem Artikel teilen oder über die Verwendung der beiden Technologien chatten möchten, können Sie mich auf Twitter @JSJoeio erreichen.

Weiteres Lesen

Wenn Sie tiefer tauchen möchten, finden Sie hier einige Ressourcen, die wir vorschlagen:

reag-typeskript-cheatsblatt

Viele dieser Empfehlungen stammten direkt aus dem React-Typ-Typ-Schar. Wenn Sie nach spezifischen Beispielen oder Details zu einem React-Typ-Typ-Typ suchen, ist dies der Ort, an dem Sie gehen können. Wir begrüßen auch Beiträge!

offizielles TypBook

Eine weitere fantastische Ressource ist das Typbuch von Typenkript. Dies wird vom TypeScript-Team auf dem neuesten Stand gehalten und bietet Beispiele und eine eingehende Erklärung hinter den inneren Arbeitsweisen der Sprache.

TypeScript Playground

Wussten Sie, dass Sie reagieren können mit TypeScript -Code direkt im Browser? Alles, was Sie tun müssen, ist zu reagieren. Hier ist ein Link, um Ihnen den Einstieg zu erleichtern.

Praktische Möglichkeiten, um Ihre Typenkriptkenntnisse zu fördern

Lesen Sie unseren Leitfaden zu praktischen Möglichkeiten, um Ihre Typenkriptkenntnisse voranzutreiben, um sich für kontinuierliches Lernen einzurichten, während Sie vorwärts gehen.

faqs über reagieren mit typescript

Können Sie React mit TypeScript verwenden? In der Tat ist die Kombination von React mit TypeScript in der Webentwicklungsgemeinschaft immer beliebter geworden. TypeScript ist ein statisch getipptes Superet von JavaScript, das eine verbesserte Werkzeug- und Typsicherheit bietet. Damit ist es eine hervorragende Wahl, um robuste und wartbare React -Anwendungen zu erstellen. Typscript -Funktionssignaturen. Mit TypeScript können Sie starke Typen für Requisiten und Status definieren, das Risiko von Laufzeitfehlern verringert und Ihre Codebasis vorhersehbarer macht. Darüber hinaus bieten die automatische Vervollständigung und Typ -Überprüfung von TypeScript in modernen Code -Editoren wertvolle Unterstützung während der Entwicklung. Mit TypeScript können Sie die Vorteile der statischen Tippen genießen und gleichzeitig dynamische und interaktive Benutzeroberflächen mit React erstellen, was zu zuverlässigeren und wartbaren Webanwendungen führt. Typscript ist für den Aufbau von React -Anwendungen nicht erforderlich, kann jedoch sehr vorteilhaft sein. React wurde ursprünglich unter Verwendung von JavaScript (ECMascript) entwickelt, und viele React -Anwendungen sind weiterhin in einfacher JavaScript geschrieben. React arbeitet nahtlos mit JavaScript zusammen, und Sie können ohne TypeScript voll funktionsfähige und effiziente React -Anwendungen erstellen. TypeScript ist ein statisch getipptes Superset von JavaScript, was bedeutet, dass Typanmerkungen und Überprüfung des JavaScript -Codes hinzugefügt werden. Diese Typanmerkungen können bei der Kompilierungszeit Typ-bezogene Fehler aufnehmen und eine verbesserte Codequalität und -wartbarkeit bieten. TypeScript kann große und komplexe React -Codebasen besser überschaubar machen, indem sie die Sicherheit von Requisiten, Status und Funktionsparametern bereitstellen und die Wahrscheinlichkeit von Laufzeitfehlern verringern. mit einfachem JavaScript. TypeScript kann jedoch Ihre Entwicklungserfahrung verbessern, indem die Vorhersehbarkeit des Typs überprüft und die Code verbessert wird, was es zu einer wertvollen Wahl für den Aufbau robuster und wartbarer React -Anwendungen macht, insbesondere bei größeren und komplexeren Projekten.

So verwenden Sie TypeScript in React -Apps? Sie können Tools wie erstellen react App mit TypeScript -Vorlage verwenden oder typeScript in einem vorhandenen React -Projekt manuell konfigurieren.

Schreiben Sie Ihre React -Komponenten als nächstes mit TypeScript. Sie können Funktionskomponenten mit Typscript -Funktionssignaturen erstellen oder TypeScript -Klassen für Klassenkomponenten verwenden. Mit TypeScript können Sie Requisitentypen und Statusstypen angeben und bei Code -Editoren eine starke Unterstützung von Typen und automatische Vervollständigung bieten. Wenn Sie Bibliotheken oder Pakete von Drittanbietern in Ihrer React-App verwenden, installieren Sie die Definitionen "Typscript-Typen" für diese Abhängigkeiten. Viele beliebte Bibliotheken haben für definitiven

für den Unterschied zwischen React.js und React TypeScript? der für die Entwicklung verwendeten Programmiersprache. Bei Verwendung von React.js schreiben Entwickler ihre Anwendungen in der Regel in einfacher JavaScript und nutzen häufig moderne JavaScript -Funktionen wie ES6 und ES7. Ein bemerkenswertes Merkmal von react.js ist, dass es standhaft strikte Tipps nicht erzwingt. Infolgedessen verlassen sich Entwickler auf Laufzeitüberprüfungen und -Tools wie TOPTTTYPES zur Typenvalidierung und Fehlererkennung. Entwicklung. Mit React TypeScript schreiben Entwickler ihre React -Komponenten mit der Syntax von TypeScript. Dieser Ansatz bietet einen erheblichen Vorteil: statische Überprüfung während der Entwicklung. TypeScript ermöglicht Entwickler, Typen und Schnittstellen für Requisiten, Zustand und andere Daten zu definieren, wodurch die Typ-bezogenen Fehler zur Kompilierungszeit und nicht zur Laufzeit erfasst werden können. Dies führt zu einer verbesserten Codequalität, einer verbesserten Code -Vorhersagbarkeit und einer Verringerung der Laufzeitfehler. Geben Sie Sicherheit und Entwicklungsunterstützung ein. Die Auswahl zwischen React.js und React TypeScript hängt von Projektanforderungen, Entwicklerpräferenzen und der Bedeutung der statischen Typisierung für eine bestimmte Anwendung ab. Beide Optionen sind gültig und in der Entwicklung von Webanwendungen und Benutzeroberflächen häufig verwendet.

Sollte ich mit TypeScript anfangen? Entwicklungswerkzeug. Die statische Überprüfung von TypeScript hilft bei der Kompilierungszeit, Fehler zu erfassen, was zu einem robusteren und wartbaren Code führt. Wenn Sie an einem beträchtlichen oder komplexen Projekt arbeiten, kann TypeScript besonders vorteilhaft sein, um Fehler zu verhindern und die Codebasis einfacher zu verwalten. TypeScript bietet auch eine verbesserte Code -Dokumentation durch Typdefinitionen, mit der die Code -Lesbarkeit und die Zusammenarbeit in Ihrem Team verbessert werden können. JavaScript ist leichter und verfügt über eine kürzere Lernkurve, sodass es schneller zum Einrichten und Einstieg. Wenn Ihrem Team die Erfahrung mit Typenkript fehlt oder die Projektanforderungen keine starke Eingabe erfordern, ist JavaScript möglicherweise eine pragmatische Wahl. Darüber hinaus bietet das JavaScript -Ökosystem eine umfangreiche Sammlung von Bibliotheken und Ressourcen, sodass es einfacher ist, Lösungen und Unterstützung für Ihr Projekt zu finden.

Das obige ist der detaillierte Inhalt vonReagieren Sie mit TypeScript: Best Practices. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!