TypeScript se afirmă ca un limbaj de programare de top în preferințele organizațiilor moderne.
TypeScript este un super-set al JavaScript-ului, fiind un limbaj strict tipizat care se compilează (construit pe baza JavaScript). Acest limbaj, cu tipizare statică, dezvoltat și susținut de Microsoft, preia și extinde concepte orientate pe obiecte, similare cu JavaScript.
Acest limbaj open-source are multiple utilizări, de la crearea de aplicații web de mari dimensiuni, până la aplicații mobile. TypeScript este versatil, utilizat atât pentru dezvoltarea frontend, cât și backend. De asemenea, este susținut de diverse framework-uri și biblioteci care simplifică dezvoltarea și extind posibilitățile de utilizare.
De ce să optăm pentru TypeScript în combinație cu Node.js? Acest articol va explora motivele pentru care TypeScript este considerat „superior” JavaScript-ului, modalitatea de instalare folosind Node.js, configurarea și crearea unui program simplu utilizând TypeScript și Node.js.
TypeScript și Node.js: Avantaje
- Tipizare statică opțională: JavaScript este un limbaj cu tipizare dinamică, ceea ce înseamnă că tipul unei variabile este stabilit în timpul execuției, nu la compilare. Spre deosebire, TypeScript oferă tipizare statică opțională. Astfel, o variabilă, odată declarată, își va păstra tipul și va accepta doar valori corespunzătoare acelui tip.
- Predictibilitate: utilizând TypeScript, ne asigurăm că elementele definite vor rămâne neschimbate. De exemplu, o variabilă declarată ca booleană nu se va transforma ulterior într-un șir de caractere. Dezvoltatorii pot avea încredere că funcțiile lor se vor comporta conform așteptărilor.
- Depistarea rapidă a erorilor: TypeScript identifică majoritatea erorilor de tip timpuriu, diminuând riscul ca acestea să apară în producție. Acest aspect reduce timpul necesar pentru testarea codului în etapele finale de dezvoltare.
- Compatibilitate cu majoritatea IDE-urilor: TypeScript este compatibil cu majoritatea mediilor de dezvoltare integrate (IDE). Aceste IDE-uri oferă funcții precum completarea automată a codului și evidențierea sintaxei. În acest articol, vom utiliza Visual Studio Code, un alt produs Microsoft.
- Refactorizarea facilă a codului: aplicațiile TypeScript pot fi actualizate sau refactorizate fără a le schimba comportamentul. Instrumentele de navigare și capacitatea IDE-ului de a înțelege codul simplifică refactorizarea bazelor de cod.
- Utilizarea pachetelor existente: nu este necesară crearea de la zero, se pot folosi pachetele NPM existente cu TypeScript. Acest limbaj beneficiază și de o comunitate activă care dezvoltă definiții de tip pentru pachetele populare.
Cum folosim TypeScript cu Node.js
Deși TypeScript oferă multiple avantaje, browserele web nu pot interpreta codul direct. Prin urmare, codul TypeScript trebuie transpilat în cod JavaScript pentru a putea fi rulat în browsere. Codul rezultat va avea funcționalitatea originală din TypeScript, plus posibile funcționalități suplimentare care nu sunt prezente în JavaScript.
Cerinte preliminare
- Node.js: este un mediu de execuție cross-platform care permite rularea codului JavaScript în afara browserelor web. Puteți verifica dacă Node.js este instalat pe sistemul dumneavoastră folosind comanda:
node -v
Dacă nu este instalat, îl puteți descărca de pe site-ul oficial. După instalare, rulați din nou comanda pentru a vă asigura că a fost configurat corect.
- Un manager de pachete Node: puteți alege între NPM sau Yarn. NPM este instalat automat împreună cu Node.js. Vom folosi NPM în acest articol. Pentru a verifica versiunea curentă, utilizați comanda:
npm -v
Instalarea TypeScript cu Node.js
Pasul 1: Configurarea folderului de proiect
Vom începe prin a crea un director pentru proiectul TypeScript. Îi puteți da orice nume doriți. Pentru a face acest lucru, utilizați următoarele comenzi:
mkdir typescript-node
cd typescript-node
Pasul 2: Inițializarea proiectului
Folosiți npm pentru a inițializa proiectul cu comanda:
npm init -y
Această comandă va crea un fișier package.json. Flag-ul -y instruiește npm să utilizeze valorile implicite. Fișierul creat va arăta similar cu următorul:
{
"name": "typescript-node",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
Configurarea TypeScript cu Node.js
Pasul 1: Instalarea compilatorului TypeScript
Acum, instalați compilatorul TypeScript în proiectul dumneavoastră. Executați comanda:
npm install –save-dev typescript
Rezultatul va fi similar cu:
added 1 package, and audited 2 packages in 26s found 0 vulnerabilities
Notă: Metoda de mai sus instalează TypeScript local în folderul proiectului. Alternativ, puteți instala TypeScript global pe sistem, evitând instalarea repetată pentru fiecare proiect. Utilizați comanda:
npm install -g typescript
Pentru a verifica dacă TypeScript este instalat, executați comanda:
tsc -v
Pasul 2: Adăugarea tipurilor Ambient Node.js pentru TypeScript
TypeScript are mai multe tipuri: Implicit, Explicit și Ambient. Tipurile Ambient sunt adăugate la domeniul de execuție global. Adăugați tipurile Ambient cu comanda:
npm install @types/node –save-dev
Pasul 3: Crearea fișierului tsconfig.json
Acesta este fișierul de configurare care conține opțiunile de compilare TypeScript. Executați comanda:
npx tsc --init --rootDir src --outDir build --esModuleInterop --resolveJsonModule --lib es6 --module commonjs --allowJs true --noImplicitAny true
Aceasta va genera un fișier tsconfig.json cu valori implicite și comentarii.
Fișierul tsconfig.json
Iată opțiunile de configurare:
- RootDir: indică unde TypeScript caută codul nostru. L-am direcționat către directorul /src, unde vom scrie codul.
- outDir: specifică directorul unde este stocat codul compilat, setat la directorul /build.
Utilizarea TypeScript cu Node.js
Pasul 1: Crearea directorului src și a fișierului index.ts
Acum avem configurarea de bază. Vom crea o aplicație simplă TypeScript și o vom compila. Fișierele TypeScript au extensia .ts. În directorul creat, executați comenzile:
mkdir src
touch src/index.ts
Pasul 2: Adăugarea codului în fișierul TypeScript (index.ts)
Putem începe cu un exemplu simplu:
console.log('Salut lume!')
Pasul 3: Compilarea codului TypeScript în cod JavaScript
Executați comanda:
npx tsc
Verificați directorul build (build/index.js) unde veți găsi fișierul index.js generat, cu un conținut similar:
Codul TypeScript a fost compilat în cod JavaScript.
Pasul 4: Rularea codului JavaScript compilat
Rețineți că browserele nu pot rula direct codul TypeScript. Vom executa codul din fișierul index.js din directorul build. Utilizați comanda:
node build/index.js
Rezultatul va fi:
Pasul 5: Configurarea compilării automate a codului TypeScript
Compilarea manuală a codului TypeScript la fiecare modificare poate consuma timp. Puteți utiliza ts-node (care execută direct codul TypeScript, fără a aștepta compilarea) și nodemon (care monitorizează modificările din cod și repornește automat serverul).
Executați comanda:
npm install --save-dev ts-node nodemon
Apoi, modificați fișierul package.json prin adăugarea acestui script:
"scripts": {
"start": "ts-node ./src/index.ts"
}
Vom adăuga un nou bloc de cod pentru demonstrație:
function sum (num1:number, num2:number, num3:number){
return num1 + num2 +num3;
}
console.log(sum(10,15,30))
Ștergeți fișierul index.js (/build/index.js) și executați npm start.
Veți obține un rezultat similar cu:
suma a 3 numere
Configurarea linting-ului TypeScript cu eslint
Pasul 1: Instalarea eslint
Linting-ul este util pentru a menține consistența codului și a detecta erori înainte de execuție. Instalați eslint folosind comanda:
npm install --save-dev eslint
Pasul 2: Inițializarea eslint
Inițializați eslint cu comanda:
npx eslint --init
Procesul de inițializare vă va ghida prin câțiva pași. Consultați captura de ecran pentru a vă ghida:
La finalizarea procesului, veți vedea fișierul .eslintrc.js cu un conținut similar cu:
module.exports = {
env: {
browser: true,
es2021: true
},
extends: 'standard-with-typescript',
overrides: [
],
parserOptions: {
ecmaVersion: 'latest',
sourceType: 'module'
},
rules: {
}
}
Pasul 3: Rularea eslint
Executați comanda pentru a verifica toate fișierele cu extensia .ts:
npx eslint . --ext .ts
Pasul 4: Actualizarea fișierului package.json
Adăugați un script lint în acest fișier pentru linting automat:
"scripts": {
"lint": "eslint . --ext .ts",
},
TypeScript cu Node.js: Cele mai bune practici
- Actualizați TypeScript: echipa de dezvoltare TypeScript lansează constant noi versiuni. Asigurați-vă că aveți instalată ultima versiune pentru a beneficia de noile funcționalități și remedieri.
- Activați modul strict: detectați erorile frecvente de programare la compilare activând modul strict în fișierul tsconfig.json. Astfel, veți reduce timpul de depanare, sporind productivitatea.
- Activați verificările stricte null: detectați toate erorile null și undefined la compilare activând verificările stricte null în fișierul tsconfig.json.
- Utilizați un editor de cod compatibil cu TypeScript: alegeți un editor de cod, cum ar fi VS Code, Sublime Text sau Atom, care oferă suport TypeScript prin pluginuri.
- Utilizați tipuri și interfețe: puteți defini tipuri personalizate reutilizabile în tot proiectul folosind tipuri și interfețe, făcând codul mai modular și ușor de întreținut.
Încheiere
Acum aveți structura de bază a unei aplicații create cu TypeScript pe Node.js. Puteți utiliza pachetele Node.js uzuale, scriind codul în TypeScript și beneficiind de funcționalitățile oferite de acesta.
Dacă sunteți la început cu TypeScript, asigurați-vă că înțelegeți diferențele dintre TypeScript și JavaScript.