TypeScript è un superset di JavaScript sviluppato per la creazione di applicazioni più sicure e su larga scala. Aggiunge la digitazione statica opzionale alla lingua, semplificando il rilevamento degli errori prima della compilazione.

Il linguaggio introduce anche alcune funzionalità che non esistono in JavaScript. Questi includono generici, classi, interfacce, enumerazioni e decoratori.

Scopri come impostare il tuo primo progetto TypeScript da zero in pochi passaggi.

Passaggio 1: installazione di TypeScript

Prima di usare Dattiloscritto sul tuo sistema, devi installare il compilatore TypeScript a livello globale.

Eseguire il comando seguente per installare TypeScript a livello globale:

npm installare -g dattiloscritto

Passaggio 2: impostare il progetto

Per impostare il tuo progetto TypeScript, inizia creando una directory di progetto vuota in qualsiasi IDE di tua scelta.

Quindi, crea i tuoi file con .ts estensione del file. TypeScript non può essere eseguito in nessun ambiente. Pertanto, deve essere compilato in JavaScript prima che possa essere eseguito.

instagram viewer

Per compilare i tuoi file TypeScript in JavaScript, vai alla directory del tuo progetto sul tuo terminale. Quindi corri tsc seguito dal nome del tuo file TypeScript.

Per esempio:

tscindice.ts

Questo comando creerà un index.js file all'interno della stessa directory il tuo index.ts il file risiede.

Questo comportamento potrebbe essere indesiderabile in quanto renderebbe difficile la gestione del tuo progetto con più .js e .ts file nella stessa directory.

È possibile modificare questo comportamento predefinito e modificare il comportamento del compilatore TypeScript utilizzando l'estensione tsconfig.json file.

Esegui il seguente comando nel tuo terminale per creare un file tsconfig.json file nel tuo progetto:

tsc --dentro

Questo genera un file contenente tutte le impostazioni di configurazione per il tuo compilatore TypeScript.

Tratterai solo le basi necessarie per iniziare il tuo progetto qui, ma puoi saperne di più su di esso la documentazione di TypeScript tsconfig.

Passaggio 3: configurazione del compilatore TypeScript per un flusso di lavoro migliore

Il tsconfig.json contiene le opzioni di configurazione per il compilatore TypeScript diviso in sette sezioni:

  • Progetti
  • Lingua e ambiente
  • Moduli
  • Supporto JavaScript
  • Emettere
  • Vincoli di interoperabilità
  • Controllo del tipo
  • Completezza

La maggior parte delle proprietà sono disabilitate per impostazione predefinita (sono commentate). Puoi attivarli e modificarli togliendo il commento.

Di seguito sono riportati i passaggi che dovrai seguire per modificare la posizione dei file JavaScript generati:

  1. Aprire tsconfig.json e individuare il emettere sezione.
  2. Nel emettere sezione, decommentare il outDir proprietà e specificare la directory in cui si desidera memorizzare il compilato .ts File. Ora ogni volta che corri tsc, tuo .js i file saranno nella cartella specificata.

In esecuzione tsc seguito dal nome del file che vuoi compilare non è ottimale per il tuo flusso di lavoro, soprattutto quando devi compilare più file.

Per risolvere questo problema, il compilatore TypeScript fornisce una proprietà che gli consente di compilare tutti i file in una directory in un comando.

Segui questi passaggi per configurarlo:

  1. Aprire tsconfig.json e individuare il moduli sezione.
  2. Nel moduli sezione, decommentare il rootDir proprietà o rootDirs (se vuoi che il compilatore compili multiple .ts directory in .js) e specificare le directory dei file.

Queste impostazioni miglioreranno il tuo flusso di lavoro e miglioreranno la gestione dei tuoi file.

I vantaggi di TypeScript

Il principale vantaggio di TypeScript rispetto a JavaScript è la sicurezza dei tipi. TypeScript consente di rilevare rapidamente bug difficili da trovare. Questa caratteristica lo rende ideale per la realizzazione di applicazioni sicure e su larga scala.