Vue Academy · Lektion

Konfigurera TypeScript i Vue-projekt

vite.config.ts, tsconfig.json, vue-tsc, lang='ts' i SFC:er och TypeScript-stöd i IDE:n.

Lektion 1 av 413 steg

Konfigurera TypeScript i Vue-projekt är en gratis lektion i Vue Academy på CoddyKit. Detta är lektion 1 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för Vue Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Vue Academy innehåller totalt 4 lektioner.

TypeScript i Vue 3

Vue 3 skrevs om i TypeScript och erbjuder därför utmärkt stöd för typer. Ett välkonfigurerat projekt upptäcker fel vid kompilering och ger kraftfull autokomplettering i kodredigeraren för .vue-filer.

Projektstart med TS

Det enklaste sättet att komma igång är create-vue, som frågar om TypeScript ska läggas till och konfigurerar tsconfig.json, vue-tsc och rätt verktyg.

npm create vue@latest
# select "Add TypeScript? Yes"

Grunderna i tsconfig.json

tsconfig.json styr kompileringen. Den viktigaste inställningen för att upptäcka fel är strikt läge.

{
  "compilerOptions": {
    "strict": true,
    "target": "ESNext",
    "module": "ESNext"
  }
}

Varför strikt läge är viktigt

strict: true aktiverar strictNullChecks, noImplicitAny och mer. Det tvingar fram hantering av null/undefined och hindrar värden utan typ från att slinka igenom.

Sökvägsalias

Aliaset @/ pekar på mappen src, så importer förblir rena oavsett hur djupt filen ligger. Konfigurera det i både tsconfig.json och ditt paketeringsverktyg.

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

Använda aliaset

Nu refererar importer till moduler från projektroten, i stället för relativa ../../-kedjor.

import Button from '@/components/Button.vue'
import { useAuth } from '@/composables/useAuth'

TypeScript i SFC-filer

Om Du vill använda TypeScript i en Single File Component lägger Du till lang="ts" i skripttaggen. Tillsammans med <script setup> ger detta tillgång till typade makron.

<script setup lang="ts">
const count: number = 0
</script>

Typkontroll av SFC-filer

Den vanliga tsc-kompilatorn förstår inte .vue-filer. Vue tillhandahåller vue-tsc, ett omslutande verktyg som typkontrollerar mallar och skript tillsammans.

vue-tsc --noEmit

Lägga till ett kontrollskript

Lägg till ett skript i package.json så att både CI och Du kan verifiera typer med ett enda kommando.

{
  "scripts": {
    "type-check": "vue-tsc --noEmit"
  }
}

Redigerarstöd med Volar

Tillägget Volar (Vue - Official) för VS Code ger TypeScript-stöd i .vue-filer: kodkomplettering, gå till definition och typfel i mallar. Inaktivera det gamla Vetur för att undvika konflikter.

Takeover-läge

Volar kan köras i Takeover Mode och ersätter då det inbyggda TS-tillägget, så att det hanterar både .ts- och .vue-filer. Detta förbättrar prestanda och enhetlighet i stora projekt.

Snabbtest

Testa Dina kunskaper om TypeScript-konfiguration.

Besvara frågan i den interaktiva lektionen

Sammanfattning

Du konfigurerade TypeScript i Vue:

Aktivera strikt läge i tsconfig.json för de starkaste kontrollerna.
Konfigurera sökvägsaliaset @/* så att det pekar på src.
Lägg till lang="ts" i SFC-skript.
Typkontrollera med vue-tsc --noEmit och använd Volar-tillägget i VS Code.

Gratis att börja

Lär dig HTML med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 42
Lektioner: 156

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Konfigurera TypeScript i Vue-projekt” gratis?

Ja – du kan läsa vilka 3 lektioner som helst i lärvägen Vue Academy, inklusive ”Konfigurera TypeScript i Vue-projekt”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i Vue Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”Konfigurera TypeScript i Vue-projekt”?

vite.config.ts, tsconfig.json, vue-tsc, lang='ts' i SFC:er och TypeScript-stöd i IDE:n. Ni övar på Vue Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig Vue Academy?

Du behöver inga förkunskaper. Utbildningen i Vue Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 1 av 4.

Hur lång tid tar lektionen ”Konfigurera TypeScript i Vue-projekt”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här Vue Academy-lektionen?

Ja. Varje Vue Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

Konfigurera TypeScript i Vue-projekt
Typade props och emits med defineProps/defineEmits
Typning av composables och refs
Generiska Vue-komponenter

← Tillbaka till Vue Academy