0Pricing
Vue Academy · Lezione

Configurazione di TypeScript nei progetti Vue

vite.config.ts, tsconfig.json, vue-tsc, lang='ts' negli SFC, supporto TypeScript nell'IDE.

Configurazione di TypeScript nei progetti Vue è una lezione Vue Academy gratuita su CoddyKit. Questa è la lezione 1 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Vue Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Vue Academy include 4 lezioni in totale.

TypeScript in Vue 3

Vue 3 è stato riscritto in TypeScript, quindi offre un eccellente supporto per i tipi. Un progetto configurato correttamente rileva i bug in fase di compilazione e offre un ottimo completamento automatico nell'editor nei file .vue.

Creare lo scheletro con TS

Il modo più semplice per iniziare è create-vue, che chiede se si desidera aggiungere TypeScript e configura tsconfig.json, vue-tsc e gli strumenti appropriati.

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

Nozioni di base su tsconfig.json

tsconfig.json controlla la compilazione. L'impostazione più importante per individuare i bug è la modalità strict.

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

Perché la modalità strict è importante

strict: true abilita strictNullChecks, noImplicitAny e altro ancora. Vi obbliga a gestire null/undefined e impedisce ai valori senza tipo di passare inosservati.

Alias dei percorsi

L'alias @/ mappa alla cartella src, così gli import rimangono ordinati indipendentemente dalla profondità del file. Configuratelo sia in tsconfig.json sia nel vostro bundler.

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

Usare l'alias

Ora gli import fanno riferimento ai moduli dalla radice del progetto, anziché usare catene relative come ../../.

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

TypeScript negli SFC

Per usare TypeScript all'interno di un Single File Component, aggiungete lang="ts" al tag script. Con <script setup> questo abilita le macro con tipizzazione.

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

Controllare i tipi negli SFC

Il compilatore tsc standard non comprende i file .vue. Vue mette a disposizione vue-tsc, un wrapper che controlla insieme i tipi dei template e degli script.

vue-tsc --noEmit

Aggiungere uno script di controllo

Aggiungete uno script a package.json, così sia la CI sia voi potrete verificare i tipi con un solo comando.

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

Supporto dell'editor con Volar

L'estensione Volar (Vue - Official) per VS Code fornisce l'intelligenza TypeScript all'interno dei file .vue: completamento automatico, vai alla definizione ed errori di tipo nei template. Disabilitate il vecchio Vetur per evitare conflitti.

Modalità Takeover

Volar può essere eseguito in Takeover Mode, sostituendo l'estensione TS integrata per gestire sia i file .ts sia i file .vue. Questo migliora le prestazioni e la coerenza nei progetti di grandi dimensioni.

Verifica rapida

Verificate la vostra conoscenza della configurazione di TypeScript.

Riepilogo

Avete configurato TypeScript in Vue:

  • Abilitate la modalità strict in tsconfig.json per eseguire i controlli più rigorosi.
  • Configurate l'alias di percorso @/* in modo che punti a src.
  • Aggiungete lang="ts" agli script degli SFC.
  • Controllate i tipi con vue-tsc --noEmit e usate l'estensione Volar in VS Code.

Domande Frequenti

La lezione «Configurazione di TypeScript nei progetti Vue» è gratuita?

Sì — il testo completo di «Configurazione di TypeScript nei progetti Vue» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Vue Academy, passa a CoddyKit PRO. Il corso Vue Academy include 4 lezioni in totale.

Cosa imparerò in «Configurazione di TypeScript nei progetti Vue»?

vite.config.ts, tsconfig.json, vue-tsc, lang='ts' negli SFC, supporto TypeScript nell'IDE. Eserciti Vue Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare Vue Academy?

Non è richiesta alcuna esperienza precedente. Vue Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 1 di 4.

Quanto tempo richiede la lezione «Configurazione di TypeScript nei progetti Vue»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione Vue Academy?

Sì. Ogni lezione Vue Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

  1. Configurazione di TypeScript nei progetti Vue
  2. Props ed emit tipizzati con defineProps/defineEmits
  3. Tipizzazione di composable e ref
  4. Componenti Vue generici
← Torna a Vue Academy