reactjs - Hvordan tilføjer jeg TypeScript til min eksisterende Vite (React) applikation?

Jeg har en eksisterende React-app, som jeg har oprettet ved hjælp af Vite. Jeg brugte React-skabelonen i Vite-

yarn create vite my-react-app --template react

Efterhånden som projektet skred frem, syntes det at være en god idé at inkludere TypeScript for strengere typekontrol. Jeg havde tidligere inkluderet TypeScript i et af mine eksisterende projekter ved hjælp af create-react-app med hjælp fra denne klare dokumentation. Jeg prøvede at indarbejde det samme i min Vite-app. Jeg kørte følgende kode i min terminal -

yarn add typescript @types/node @types/react @types/react-dom @types/jest

Jeg omdøbte mine .jsx-filer til .tsx og min vite.config.js til vite.config.ts og genstartede min vite-server.

Men til min store skuffelse stoppede appen med at fungere. Jeg kunne ikke finde nogen dokumentation i Vite-dokumenterne for at tilføje TypeScript til en eksisterende app. Jeg søgte også i Vite Github-fællesskabet, men kunne ikke finde noget relaterbart der. Jeg kunne heller ikke finde noget relateret til dette på nettet. Det meste af materialet er om CRA og TypeScript.

Enhver hjælp med dette vil blive værdsat. Tak!

Svar #1

Jeg stillede spørgsmålet i forskellige andre fora også. Jeg fandt frem til det rigtige svar for nogle dage siden og vil gerne dele det her.

Først skal du installere TypeScript og typer for react og react-dom,

npm install -D typescript @types/react @types/react-dom

Dernæst skal du omdøbe filen vite.config.js til vite.config.ts.

For det tredje, konfigurer din tsconfig.json som følger,

{
  "compilerOptions": {
    "target": "ESNext",
    "useDefineForClassFields": true,
    "lib": ["DOM", "DOM.Iterable", "ESNext"],
    "allowJs": false,
    "skipLibCheck": true,
    "esModuleInterop": false,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": ["src"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

,og en tsconfig.node.json,

{
  "compilerOptions": {
    "composite": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "allowSyntheticDefaultImports": true
  },
  "include": ["vite.config.ts"]
}

Opret derefter en fil med navnet vite-env.d.ts i din src/-mappe og kopier og indsæt følgende (med de tre skråstreger i starten):

/// <reference types="vite/client" />

Dette opretter en typefil til Vite-klienten.

Til sidst skal du i din index.html ændre navnet på din index.jsx til index.tsx som,

<script type="module" src="/src/index.tsx"></script>

TypeScript bør nu fungere på dit Vite React-projekt.

Klik på dette link for Q&A på Vites GitHub

Relaterede artikler