Erläuterung des React+TypeScript-Projektaufbaufalls

Das Erstellen eines React-Projekts kann sehr einfach sein, aber wenn es mit Typescript kombiniert wird, ist es eigentlich nicht sehr mühsam und auf der offiziellen Website finden Sie auch sehr klare Anweisungen. Es gibt zwei Möglichkeiten:

1. Um ein React-Projekt direkt mit Typescript zu erstellen, müssen wir zusätzliche Parameter hinzufügen und die Vorlage kann nicht die Standard-CRA-Vorlage verwenden. Verwenden Sie stattdessen cra-template-typescript.

npx erstellen-reagieren-app tsreactdemo --Vorlage Typescript

Die erfolgreiche Erstellungsaufforderung unterscheidet sich nicht wesentlich von der ursprünglichen. Gehen Sie direkt zum Projektpfad und dann zu yarn start oder npm start.

Wir haben es nicht eilig, mit dem Projekt zu beginnen. Schauen wir uns zunächst an, wie die Datei aussieht. Standardmäßig wird eine tsconfig.json erstellt und die Standarddateien index.js und App.js im src-Verzeichnis werden in ts-Versionen von index.tsx und App.tsx geändert.

Wir können uns die Abhängigkeiten in package.json ansehen:

Tatsächlich sind die Abhängigkeiten nur @types/jest, @types/node, @types/react, @types/react-dom.

Zunächst sah der Befehl, mit dem wir ein Typescript-React-Projekt erstellt haben, so aus, als wäre er npx create-react-app xxx --typescript. Dies ist jedoch nicht mehr möglich. Der nachfolgende Parameter muss --template typescript sein, statt direkt --typescript. Dies muss erklärt werden. Es ist nicht so, dass wir einen Fehler gemacht hätten. Tatsächlich wurde es ursprünglich auf diese Weise verwendet. Jetzt wurde es aktualisiert und die Methode hat sich geändert. Daraus können wir erkennen, dass sich das Web-Frontend zu schnell ändert. Wenn Sie es ein oder zwei Jahre lang nicht studieren, kann es Ihre Wahrnehmung völlig auf den Kopf stellen. Dies bedeutet nicht, dass --typescript nicht erstellt werden kann. Es wird ohne Fehler erstellt, aber standardmäßig ist es ein React-Projekt und enthält keinen Typescript-Inhalt.

Darüber hinaus wird in der offiziellen Dokumentation empfohlen, dass wir bei der Erstellung eines Projekts auf diese Weise das Tool „create-react-app“ nicht global installieren. In der neuesten Version können Sie das neueste React-Projekt direkt über npx create-react-app erstellen. Wenn Sie create-react-app global installieren und die Version nicht die neueste ist, ist es sehr wahrscheinlich, dass eine alte Version des React-Projekts erstellt wird. Wenn sie installiert ist, können Sie sie direkt mit npm uninstall -g create-react-app deinstallieren.

2. Fügen Sie basierend auf dem React-Projekt einfach Typescript-bezogene Abhängigkeiten hinzu.

npm installiere Typescript @types/react --save

Beginnen Sie mit der Erstellung eines Standard-React-Projekts:

Im Befehl habe ich direkt --typescript hinzugefügt. Das habe ich vorher gesagt. Es wurde ursprünglich auf diese Weise erstellt, aber jetzt funktioniert diese Methode nicht mehr. Es wird jedoch kein Fehler gemeldet. Das erstellte Standardprojekt ist ein React-Projekt und die verwendete Vorlage ist cra-template.

Wir fügen die Typescript-Abhängigkeit direkt hinzu:

Tatsächlich können Sie es einfach so hinzufügen, ohne eine tsconfig.json-Datei hinzuzufügen. Es ist, als hätten wir direkt eine Abhängigkeit hinzugefügt, ohne größere Änderungen am Projekt vorzunehmen.

Nachdem wir die Dateien index.js und App.js in index.tsx und App.tsx geändert haben, erstellt npm start oder yarn start standardmäßig eine Datei tsconfig.json. Dies wird auch auf der offiziellen Website klar angegeben. Wir müssen tsconfig.json nicht manuell erstellen.

Wir können uns auch den Inhalt der standardmäßig generierten Datei tsconfig.json ansehen:

{
  "Compileroptionen": {
    "Ziel": "es5",
    "Bibliothek": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": wahr,
    "skipLibCheck": wahr,
    "esModuleInterop": wahr,
    "allowSyntheticDefaultImports": wahr,
    "streng": wahr,
    "forceConsistentCasingInFileNames": wahr,
    "noFallthroughCasesInSwitch": wahr,
    "Modul": "esnext",
    "moduleResolution": "Knoten",
    "resolveJsonModule": wahr,
    "isolierteModule": wahr,
    "noEmit": wahr,
    "jsx": "reagieren-jsx"
  },
  "enthalten": [
    "Quelle"
  ]
}

Tatsächlich verhält es sich bei der manuellen Erstellung wahrscheinlich ähnlich, daher ist es besser, es sich einfach selbst generieren zu lassen.

Dies ist das Ende dieses Artikels über die Fallstudie zur Projekterstellung mit React+TypeScript. Weitere relevante Inhalte zur Projekterstellung mit React+TypeScript finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!