vue.js - Hur man lägger till TypeScript i Vue 3- och Vite-projekt

Min installation: Jag installerade Vue och Vite via create-vite-app-modulen, och uppdaterade sedan alla paket som genererades av 'init vite-app' till de absolut senaste RC-versionerna för Vue och Vite.

Nu vill jag använda TypeScript för all min kod. Först lekte jag bara lite, och lade till lang="ts" på script-taggen i HelloWorld.vue. Det verkar fungera, även om jag inte har någon aning om hur TypeScript blir transpilerat från Vue-filen.

Sedan försökte jag byta namn på main.js till main.ts. Nu händer ingenting.

Jag tänkte att jag bara behöver installera TypeScript, men sedan slog det mig, varför fungerar det då i .vue-komponenten? Gör jag något fel om jag installerar TypeScript nu?

Varför fungerar TypeScript i Vue-modulen (HelloWorld), men ingen js genereras från *.ts-filen?

Svar #1

Hur man lägger till TypeScript till ett Vue 3- och Vite-projekt

Jag kommer att skapa ett Vite-projekt för att använda TypeScript steg för steg:

  • först bör vi skapa ett Vite-projekt först
npm init vite-app <project-name>
cd <project-name>
npm install
  • för det andra, bör vi installera typescript
npm install typescript
  • tredje, vi bör skapa en tsconfig.json-fil i rotmappen, så här:
{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "moduleResolution": "node",
    "importHelpers": true,
    "isolatedModules": true,
    "noEmit": true
  }
}

Och du kan kolla här, Vad är en tsconfig.json

  • då bör vi skapa en shims-vue.d.ts-fil i src-mappen, så här:
declare module "*.vue" {
  import { defineComponent } from "vue";
  const Component: ReturnType<typeof defineComponent>;
  export default Component;
}

Filen shims-vue.d.ts hjälper din IDE att förstå vad en fil som slutar med .vue är.
Nu kan vi kontrollera om .ts-filen fungerar bra.
I mitt fall bytte jag namn på filen main.js till main.ts i src-mappen,
och ändrade index.html, rad 12:

 <script type="module" src="/src/main.js"></script>

till

 <script type="module" src="/src/main.ts"></script>

Slutligen, spring

npm run dev

Om det inte finns något felmeddelande kan du skapa din komponentfil med .ts
Lycka till!

Svar #2

Det finns en mall för TypeScript som heter vue-ts. Så att köra npm init vite@latest my-vue-app -- --template vue-ts skapar ett TypeScript Vite-projekt.

https://vitejs.dev/guide/#scaffolding-your-first-vite-project

UPPDATERING: reflekterade Olanrewajus kommentar.

Relaterade artiklar