TypeScript își deschide calea ca unul dintre cele mai populare limbaje de programare pentru organizațiile moderne.
TypeScript este un superscript JavaScript compilat, strict tipizat (construit pe limbajul JavaScript). Acest limbaj tipizat static, dezvoltat și întreținut de Microsoft, acceptă concepte orientate pe obiecte precum subsetul său, JavaScript.
Acest limbaj de programare open-source are multe cazuri de utilizare, cum ar fi crearea de aplicații web, la scară largă și mobile. TypeScript poate fi folosit pentru dezvoltarea frontend și backend. De asemenea, are diverse cadre și biblioteci care simplifică dezvoltarea și extind cazurile de utilizare.
De ce să folosiți TypeScript cu Node.js? Acest articol va discuta de ce TypeScript este considerat „mai bun” decât JavaScript, cum să îl instalați folosind Node.js, să configurați și să creați un mic program folosind TypeScript și Node.js.
Cuprins
TypeScript cu Node.js: Beneficii
- Tastare statică opțională: JavaScript este tastat dinamic, ceea ce înseamnă că tipul de date al unei variabile este determinat în timpul rulării și nu în timpul compilării. Pe de altă parte, TypeScript oferă opțională tastare statică, ceea ce înseamnă că odată ce declarați o variabilă, aceasta nu își va schimba tipul și va lua doar anumite valori.
- Previzibilitate: atunci când aveți de-a face cu TypeScript, există asigurarea că tot ceea ce definiți va rămâne același. De exemplu, dacă declarați o anumită variabilă ca booleană, nu se poate schimba niciodată într-un șir pe parcurs. În calitate de dezvoltator, ești sigur că funcțiile tale vor rămâne aceleași.
- Ușor de detectat erorile devreme: TypeScript detectează cele mai multe erori de tip devreme, astfel încât probabilitatea lor de a trece la producție este scăzută. Acest lucru reduce timpul petrecut de ingineri testând codul în etapele ulterioare.
- Acceptat pe majoritatea IDE-urilor: TypeScript funcționează cu majoritatea mediilor de dezvoltare integrate (IDE). Majoritatea acestor IDE-uri oferă completarea codului și evidențierea sintaxei. Acest articol va folosi Visual Studio Code, un alt produs Microsoft.
- Cod ușor de refactorizat: puteți actualiza sau refactoriza aplicația TypeScript fără a-i modifica comportamentul. Prezența instrumentelor de navigare și IDE-ul care înțelege codul dvs. facilitează refactorizarea bazei de cod fără efort.
- Utilizează pachetele existente: nu trebuie să creați totul de la zero; puteți utiliza pachetele NPM existente cu TypeScript. Acest limbaj are, de asemenea, o comunitate puternică care menține și creează definiții de tip pentru pachetele populare.
Cum să utilizați TypeScript cu Node.js
Chiar dacă TypeScript are aceste avantaje, browserele moderne nu pot citi codul său într-o formă simplă. Prin urmare, codul TypeScript trebuie mai întâi transpilat în cod JavaScript pentru a rula pe browsere. Codul rezultat va avea aceeași funcționalitate ca și codul TypeScript original și funcționalități suplimentare indisponibile în JavaScript.
Cerințe preliminare
- Node.js: Node este un mediu de rulare multiplatformă care permite rularea codului JavaScript în afara unui mediu de browser. Puteți verifica dacă nodul este instalat pe mașina dvs. folosind această comandă;
nodul -v
În caz contrar, puteți descărca Node.js de pe site-ul oficial. Rulați comanda de mai sus din nou după instalare pentru a verifica dacă a fost bine configurată.
- Un manager de pachete Node: puteți utiliza NPM sau Yarn. Primul este instalat implicit atunci când instalați Node.js. Vom folosi NPM ca manager de pachete în acest articol. Utilizați această comandă pentru a verifica versiunea curentă;
npm -v
Instalarea TypeScript cu Node.js
Pasul 1: Configurați un folder de proiect
Vom începe prin a crea un folder de proiect pentru proiectul TypeScript. Puteți da acestui folder orice nume doriți. Puteți utiliza aceste comenzi pentru a începe;
mkdir typescript-node
cd typescript-node
Pasul 2: Inițializați proiectul
Utilizați npm pentru a vă inițializa proiectul folosind această comandă;
npm init -y
Comanda de mai sus va crea un fișier package.json. Indicatorul -y din comandă îi spune lui npm să includă valorile implicite. Fișierul generat va avea o ieșire similară.
{
"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: Instalați compilatorul TypeScript
Acum puteți instala compilatorul TypeScript în proiectul dvs. Rulați această comandă;
npm install –save-dev typescript
Rezultatul de pe linia de comandă va fi ceva similar cu acesta;
added 1 package, and audited 2 packages in 26s found 0 vulnerabilities
Notă: Abordarea de mai sus instalează TypeScript local în folderul de proiect la care lucrați. Puteți instala TypeScript la nivel global pe sistemul dvs., astfel încât nu trebuie să îl instalați de fiecare dată când lucrați la un proiect. Utilizați această comandă pentru a instala TypeScript la nivel global;
npm install -g typescript
Puteți verifica dacă TypeScript a fost instalat folosind această comandă;
tsc -v
Pasul 2: Adăugați tipuri Ambient Node.js pentru TypeScript
TypeScript are diferite tipuri, cum ar fi Implicit, Explicit și Ambient. Tipurile de ambient sunt întotdeauna adăugate la domeniul de execuție global. Utilizați această comandă pentru a adăuga tipuri de ambient;
npm install @types/node –save-dev
Pasul 3: Creați un fișier tsconfig.json
Acesta este fișierul de configurare care specifică toate opțiunile de compilare TypeScript. Rulați această comandă care vine cu mai multe opțiuni de compilare definite;
npx tsc --init --rootDir src --outDir build --esModuleInterop --resolveJsonModule --lib es6 --module commonjs --allowJs true --noImplicitAny true
Acesta va fi scos pe terminal;
Va fi generat fișierul tsconfig.json, care conține unele valori implicite și comentarii.
fișierul tsconfig.json
Iată ce am configurat:
- RootDir este locul unde TypeScript va căuta codul nostru. L-am îndreptat către folderul /src unde vom scrie codul nostru.
- Folderul outDir definește locul unde este pus codul compilat. Un astfel de cod este configurat pentru a fi stocat în build/ folder.
Folosind TypeScript cu Node.js
Pasul 1: Creați folderul src și fișierul index.ts
Acum avem configurația de bază. Acum putem crea o aplicație TypeScript simplă și să o compilam. Extensia de fișier pentru un fișier TypeScript este .ts. Rulați aceste comenzi în interiorul folderului pe care l-am creat în pașii anteriori;
mkdir src
atingeți src/index.ts
Pasul 2: Adăugați cod în fișierul TypeScript (index.ts)
Puteți începe cu ceva simplu, cum ar fi;
console.log('Hello world!')
Pasul 3: Compilați codul TypeScript în codul JavaScript
Rulați această comandă;
npx tsc
Puteți verifica folderul de compilare (build/index.js) și veți vedea că a fost generat un index.js cu această ieșire;
TypeScript a fost compilat în cod JavaScript.
Pasul 4: Rulați codul JavaScript compilat
Rețineți că codul TypeScript nu poate rula pe browsere. Vom rula astfel codul în index.js în folderul build. Rulați această comandă;
node build/index.js
Aceasta va fi rezultatul;
Pasul 5: Configurați TypeScript pentru a se compila automat în codul JavaScript
Compilarea manuală a codului TypeScript ori de câte ori vă schimbați fișierele TypeScript poate pierde timp. Puteți instala ts-node (rulează cod TypeScript direct, fără a aștepta să fie compilat) și nodemon (verifică codul pentru modificări și repornește automat serverul).
Rulați această comandă;
npm install --save-dev ts-node nodemon
Puteți apoi să accesați fișierul package.json și să adăugați acest script;
"scripts": {
"start": "ts-node ./src/index.ts"
}
Putem folosi un nou bloc de cod în scopuri demonstrative;
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 rulați npm start.
Ieșirea dvs. va fi similară cu aceasta;
suma a 3 numere
Configurați TypeScript Linting cu eslint
Pasul 1: Instalați eslint
Listingul poate fi util dacă doriți să mențineți consistența codului și să detectați erorile înainte de rulare. Instalați eslint folosind această comandă;
npm install --save-dev eslint
Pasul 2: Inițializați eslint
Puteți inițializa eslint folosind această comandă;
npx eslint --init
Procesul de inițializare vă va conduce prin mai mulți pași. Utilizați următoarea captură de ecran pentru a vă ghida prin;
Odată ce procesul s-a încheiat, veți vedea un fișier numit .eslintrc.js cu conținut similar cu acesta;
module.exports = {
env: {
browser: true,
es2021: true
},
extends: 'standard-with-typescript',
overrides: [
],
parserOptions: {
ecmaVersion: 'latest',
sourceType: 'module'
},
rules: {
}
}
Pasul 3: rulați eslint
Rulați această comandă pentru a verifica și a lăsa scame toate fișierele cu extensia .ts;
npx eslint . --ext .ts
Pasul 4: Actualizați package.json
Adăugați un script lint pe acest fișier pentru listing automat.
"scripts": {
"lint": "eslint . --ext .ts",
},
TypeScript cu Node.js: Cele mai bune practici
- Păstrați TypeScript la zi: dezvoltatorii TypeScript lansează mereu versiuni noi. Asigurați-vă că aveți cea mai recentă versiune instalată pe mașina dvs./dosarul de proiect și beneficiați de noi funcții și remedieri de erori.
- Activați modul strict: puteți detecta erorile obișnuite de programare în timpul compilării atunci când activați modul strict în fișierul tsconfig.json. Acest lucru va reduce timpul de depanare, ceea ce va duce la o productivitate mai mare.
- Activați verificări stricte nule: puteți detecta toate erorile nule și nedefinite în timpul compilării, activând verificări stricte nule în fișierul tsconfig.json.
- Utilizați un editor de cod care acceptă TypeScript: există o mulțime de editori de cod. O bună practică este să alegeți editori de cod, cum ar fi VS Code, Sublime Text sau Atom, care acceptă TypeScript prin pluginuri.
- Utilizați tipuri și interfețe: cu tipuri și interfețe, puteți defini tipuri personalizate pe care le puteți reutiliza în întregul proiect. O astfel de abordare va face codul dvs. mai modular și mai ușor de întreținut.
Încheierea
Acum aveți structura de bază a unei aplicații create cu TypeScript pe Node.js. Acum puteți utiliza pachetele obișnuite Node.js, dar totuși, scrieți codul în TypeScript și vă bucurați de toate funcțiile suplimentare care vin cu acesta din urmă.
Dacă tocmai ați început să utilizați TypeScript, asigurați-vă că înțelegeți diferențele dintre TypeScript și JavaScript.