Vue Academy · Lekcja

Konfiguracja TypeScript w projektach Vue

vite.config.ts, tsconfig.json, vue-tsc, lang='ts' w SFC oraz obsługa TypeScript w IDE.

Konfiguracja TypeScript w projektach Vue to bezpłatna lekcja Vue Academy na CoddyKit. To lekcja 1 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Vue Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Vue Academy zawiera 4 lekcji w sumie.

TypeScript w Vue 3

Vue 3 zostało przepisane w TypeScript, dlatego oferuje doskonałe wsparcie dla typów. Prawidłowo skonfigurowany projekt wykrywa błędy podczas kompilacji i zapewnia wygodne autouzupełnianie w edytorze dla plików .vue.

Tworzenie szkieletu z TS

Najłatwiejszym początkiem jest create-vue, który zapyta, czy dodać TypeScript, a następnie skonfiguruje tsconfig.json, vue-tsc i odpowiednie narzędzia.

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

Podstawy tsconfig.json

Plik tsconfig.json steruje kompilacją. Najważniejszym ustawieniem pomagającym wykrywać błędy jest tryb strict.

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

Dlaczego tryb strict ma znaczenie

strict: true włącza strictNullChecks, noImplicitAny i wiele innych opcji. Wymusza obsługę wartości null/undefined i zapobiega przenikaniu wartości bez określonego typu.

Aliasy ścieżek

Alias @/ wskazuje na folder src, dzięki czemu importy pozostają przejrzyste niezależnie od głębokości pliku. Należy skonfigurować go zarówno w tsconfig.json, jak i w bundlerze.

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

Korzystanie z aliasu

Od tej pory importy odwołują się do modułów od katalogu głównego projektu, a nie przez względne łańcuchy ../../.

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

TypeScript w SFC

Aby używać TypeScriptu wewnątrz komponentu Single File Component, należy dodać lang="ts" do znacznika script. W połączeniu z <script setup> odblokowuje to makra obsługujące typy.

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

Sprawdzanie typów w SFC

Zwykły kompilator tsc nie rozumie plików .vue. Vue udostępnia vue-tsc — nakładkę, która sprawdza typy szablonów i skryptów razem.

vue-tsc --noEmit

Dodawanie skryptu sprawdzającego

Należy dodać skrypt do pliku package.json, aby zarówno CI, jak i Państwo mogli sprawdzać typy jednym poleceniem.

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

Obsługa edytora z Volar

Rozszerzenie Volar (Vue - Official) do VS Code zapewnia inteligentną obsługę TypeScriptu w plikach .vue: autouzupełnianie, przechodzenie do definicji i błędy typów w szablonach. Aby uniknąć konfliktów, należy wyłączyć starsze rozszerzenie Vetur.

Tryb Takeover

Volar może działać w trybie Takeover Mode, zastępując wbudowane rozszerzenie TypeScriptu, dzięki czemu obsługuje zarówno pliki .ts, jak i .vue. Poprawia to wydajność i spójność w dużych projektach.

Szybki test

Sprawdźmy wiedzę na temat konfiguracji TypeScriptu.

Podsumowanie

Skonfigurowano TypeScript w Vue:

Włącz tryb strict w tsconfig.json, aby uzyskać najsilniejsze sprawdzanie.
Skonfiguruj alias ścieżki @/* wskazujący na src.
Dodaj lang="ts" do skryptów SFC.
Sprawdzaj typy za pomocą vue-tsc --noEmit i używaj rozszerzenia Volar w VS Code.

Często zadawane pytania

Czy lekcja „Konfiguracja TypeScript w projektach Vue” jest bezpłatna?

Tak — pełny tekst „Konfiguracja TypeScript w projektach Vue” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Vue Academy, przejdź na CoddyKit PRO. Kurs Vue Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Konfiguracja TypeScript w projektach Vue”?

vite.config.ts, tsconfig.json, vue-tsc, lang='ts' w SFC oraz obsługa TypeScript w IDE. Ćwiczysz Vue Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Vue Academy?

Nie wymagamy żadnego doświadczenia. Vue Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 1 z 4.

Ile czasu zajmuje lekcja „Konfiguracja TypeScript w projektach Vue”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Vue Academy?

Tak. Każda lekcja Vue Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

Konfiguracja TypeScript w projektach Vue
Typowane props i emits z defineProps/defineEmits
Typowanie composable i refów
Generyczne komponenty Vue

← Powrót do Vue Academy