Tutorial TypeScript

Compilatorul TypeScript

Browserele și Node.js nu pot rula TypeScript direct. Mai întâi, un compilator transformă codul tău TypeScript în JavaScript obișnuit.

Notă: Deoarece TypeScript este convertit în JavaScript, el rulează oriunde rulează JavaScript.

Instalarea compilatorului

TypeScript are un compilator oficial. Îl instalezi cu npm, managerul de pachete care vine împreună cu Node.js.

Notă: Dacă npm este ceva nou pentru tine, citește mai întâi o scurtă introducere în npm.

În interiorul proiectului tău npm, rulează această comandă pentru a instala compilatorul:

npm install typescript --save-dev

Ar trebui să vezi un rezultat asemănător cu:

added 1 package, and audited 2 packages in 2s
found 0 vulnerabilities

Compilatorul este instalat în directorul node_modules. Îl poți rula cu npx tsc.

Acea comandă ar trebui să afișeze ceva de genul:

Version 4.5.5
tsc: The TypeScript Compiler - Version 4.5.5

Urmează apoi o listă cu toate comenzile uzuale.

Instalarea globală

Instalarea TypeScript global adaugă comanda tsc în PATH-ul sistemului tău, astfel încât să o poți folosi din orice director.

npm install -g typescript
tsc -v

Avantaje

Acces rapid la tsc din orice proiect sau director.
Util pentru a încerca comenzi, pentru învățare sau pentru scripturi ocazionale.
Unele editoare sau unelte pot găsi automat un compilator global.

Dezavantaje

Calculatoare diferite (sau colegi diferiți) pot avea versiuni globale diferite.
Versiunea globală se poate îndepărta de versiunea pe care o așteaptă proiectul tău, ceea ce provoacă probleme subtile.
Pe unele sisteme ai nevoie de permisiuni ridicate pentru a instala global.

Notă: Cea mai bună practică este să instalezi TypeScript ca devDependency a proiectului și să îl rulezi cu npx tsc. Astfel, versiunea exactă este aceeași în fiecare mediu. O instalare globală este opțională și utilă pentru folosire rapidă, ocazională.

Configurarea compilatorului

În mod implicit, compilatorul TypeScript afișează un mesaj de ajutor atunci când îl rulezi într-un proiect gol.

Configurezi compilatorul cu un fișier tsconfig.json.

TypeScript poate crea pentru tine un tsconfig.json cu setările recomandate:

npx tsc --init

Ar trebui să vezi un rezultat asemănător cu:

Created a new tsconfig.json with:
target: es2016
module: commonjs
strict: true
esModuleInterop: true
skipLibCheck: true
forceConsistentCasingInFileNames: true

Poți afla mai multe în capitolul despre configurarea TypeScript.

Iată un exemplu cu mai multe setări pe care le-ai putea adăuga în tsconfig.json:

"include": ["src"]
"compilerOptions": { "outDir": "./build" }

Deschide fișierul într-un editor pentru a adăuga aceste opțiuni.

Cu aceste setări, compilatorul ia fișierele TypeScript din directorul src/ al proiectului tău și scrie fișiere JavaScript în directorul build/.

Primul tău program TypeScript

Hai să scriem un program simplu „Hello, World!” pentru a verifica dacă instalarea ta de TypeScript funcționează.

Creează un fișier nou numit hello.ts cu conținutul arătat în primul fragment de cod de mai jos.
Compilează codul tău TypeScript cu npx tsc hello.ts. Astfel se creează un fișier hello.js în același director (vezi al doilea fragment de cod).
Rulează codul JavaScript compilat cu node hello.js.

Ar trebui să vezi rezultatul Hello, World!.

Notă: Dacă folosești configurația tsconfig.json de mai sus, pune fișierele tale TypeScript în directorul src. Codul JavaScript compilat apare atunci în directorul build.

hello.ts

O funcție greet tipizată care construiește un șir de salut și o variabilă message care este afișată cu console.log.

function greet(name: string): string {
  return `Hello, ${name}!`;
}

const message: string = greet("World");
console.log(message);

Fișierul hello.js compilat

Codul JavaScript pe care compilatorul îl generează din hello.ts — adnotările de tip au dispărut, iar șirul șablon a devenit un apel concat.

function greet(name) {
  return "Hello, ".concat(name, "!");
}

const message = greet("World");
console.log(message);