Cum să utilizați TypeScript cu proiectul dvs. Node.js

TypeScript este util pentru crearea de aplicații complexe și arhitecturi robuste, cum ar fi microservicii. Desigur, TypeScript nu poate face nimic ceea ce JavaScript nu poate, dar poate face proiecte complexe mai ușor de gestionat. Tastarea strictă și suportul pentru interfețe de la TypeScript înseamnă că este excelent pentru programarea orientată pe obiecte. Am văzut multe companii apelând la TypeScript pentru a-și codifica backend-ul.

Nu există moment mai potrivit pentru a începe să utilizați TypeScript în proiectul dvs. Node.js decât acum. Dar cum îl puteți configura pentru proiectul dvs. Node.js? Veți afla în acest articol.

Ce este TypeScript?

TypeScript este o versiune compilată, scrisă strict de JavaScript, dezvoltată și întreținută de Microsoft. Codul TypeScript se transpune în JavaScript.

Caracterul strict de tastare a TypeScript îi ajută pe dezvoltatori să evite erorile din codul lor. Acesta va compila doar cod care îndeplinește regulile tipurilor de date specificate. Acest lucru face codul TypeScript mai robust decât omologul său JavaScript pur.

De asemenea, acceptă atât programarea funcțională, cât și cea orientată pe obiecte. Toate aceste caracteristici îl fac extrem de scalabil și potrivit pentru dezvoltarea de aplicații complexe.

Cum se configurează TypeScript în Node. JS

Va trebui să ridicați câteva configurații aici și acolo pentru a începe să utilizați TypeScript cu proiectul dvs. Node.js. Dar nu vă faceți griji, este ușor.

Cu toate acestea, asigurați-vă că dvs instalați pachetul Node.js npm înainte de a începe.

Inițializați un fișier package.json

Deschideți terminalul și creați un folder de proiect. Apoi, introduceți acest nou director și inițializați un proiect Node.js:

npm init

Comanda de mai sus creează un pachet.json fișier pentru a vă stoca dependențele.

Instalați TypeScript și alte dependențe

Apoi, continuați și instalați TypeScript în proiectul dvs. Node.js:

npm i -D dactilografiat

The -D cuvântul cheie asigură că TypeScript este instalat ca parte a dependențe de dezvoltare în pachet.json.

De asemenea, va trebui să instalați @types/express, o definiție TypeScript pentru Express.js:

npm install -D @tipuri/express

Apoi, inițializați a tsconfig.json fişier. Acesta detaliază opțiunile de bază ale compilatorului pentru proiectul dvs.:

npx tsc --init

Comanda de mai sus creează un tsconfig.json fișier în folderul rădăcină al proiectului.

De asemenea, instalați Express.js. Puteți sări peste acest lucru dacă intenționați să gestionați servere numai cu primitivele HTTP încorporate ale Node.js. Dar Express.js face acest lucru ușor:

npm instalare expres

Apoi, instalați nodemon, un pachet care vă repornește automat serverul ori de câte ori apar modificări în codul dvs. Asigurați-vă că instalați acest lucru la nivel global pentru ca acesta să funcționeze:

npm instalare -g nodemon

Configurați TypeScript cu nod. JS

Deschide tsconfig.json fișierul pe care l-ați inițializat mai devreme folosind fișierul dvs editorul de cod ales. S-ar putea să fie multe în acest fișier. Deși este posibil să configurați acest fișier în forma sa actuală, puteți înlocui întregul conținut cu cel de mai jos pentru a-l simplifica.

Iată tot ce ai nevoie tsconfig.json a pleca:

{
"compilerOptions": {
"modul": "commonjs",
"esModuleInterop": Adevărat,
"ţintă": "es6",
"moduleResolution": "nodul",
"Harta sursă": Adevărat,
"outDir": "dist" //Specifică directorul transpiler. 
 },
"lib": ["es2015"]
}

Acum deschis pachet.json. Iată cum arată în prezent după instalarea TypeScript și Express:

Apoi, adăugați următoarele configurații la scenarii matrice:

"scenarii": {
"Test": "ecou \"Eroare: nu a fost specificat niciun test\"&& iesirea 1",
"construi": "npx tsc",
"start": "nod ./dist/app.js",
"dist": "tsc -p .",
 „dev”: „nodemon ./src/app.ts”, //A inlocui acest cu corect directorcalepentru app.ts în ta caz
"tip": "modul"
}

Configurația de mai sus indică serverul dvs. să pornească app.js, transpilerul. Nu vă faceți griji, acesta este un fișier implicit care va fi creat automat într-un dist folderul când rulați construi scenariu. Veți face asta mai târziu.

Configurația specifică apoi scriptul de dezvoltare principal ca app.ts.

Prin urmare, atunci când porniți mediul de dezvoltare, nodemon aleargă app.ts. Node.js apoi compilează acest lucru în JavaScript în interior app.js—care comunică cu serverul HTTP.

Apoi, creați un src folderul din directorul rădăcină al proiectului. În acest folder, creați un fișier TypeScript gol și denumiți-l app.ts.

Creați directorul Transpiler

Transpiler-ul este un fișier JavaScript care compilează codul TypeScript în JavaScript nativ. Deci, acest lucru asigură că serverul poate avea legătură cu codul dvs. ca JavaScript în loc de script-ul strict tastat.

Deci, în timp ce TypeScript se ocupă de structura codului, fișierul transpiler îl compilează în JavaScript.

Acum rulați construi script pentru a crea dist directorul transpiler automat:

npm run build

Comanda de mai sus compilează codul TypeScript în JavaScript. Dosarul creat conține două fișiere; app.js și app.js.map.

Deschis pachet.json din nou. Veți vedea o cheie în matricea numită principal. Puteți vedea că valoarea lui indică index.js. Înlocuiește asta cu app.js director de fișiere (transpiler):

"principal": "./dist/app.js",

După formatare, pachet.json ar trebui sa arate asa:

Asta e pentru partea de configurații.

Creați și rulați o solicitare HTTP

Acum încercați să creați și să rulați o solicitare HTTP prin serverul Express.js pentru a vedea dacă codul dvs. se compila așa cum ar trebui.

Interior app.ts:

import expres, {Solicitare, Răspuns} din 'expres'
const aplicație = expres()
app.get('/', asincron (req: Request, res: Response)=>{
 console.log('Salut Lume')
 res.send('Salut Lume')
})
const port = 8080
app.listen (port, (): vid=>{
consolă.Buturuga(`Aplicația ascultă la http://localhost:${port}`)
})

Apoi, deschideți linia de comandă în directorul rădăcină al proiectului și rulați dev script pentru a începe proiectul dvs.:

npm run dev

Deschideți browserul și accesați localhost: 8080, și vei vedea răspunsul (Salut Lume). Veți vedea acest lucru și în terminal dacă ați aplicat console.log comandă așa cum am făcut în exemplul de mai sus.

TypeScript are perspective de mare cerere

Nu există prea multă diferență între TypeScript și JavaScript. Dar primul ușurează dezvoltarea prin adăugarea sa de tastare strictă.

TypeScript este un limbaj valoros în cadrele frontend precum Angular și nu putem nega performanța și scalabilitatea acestuia. Devine din ce în ce mai popular, iar perspectivele de angajare pentru dezvoltatorii TypeScript continuă să crească.

O introducere în Angular

Citiți în continuare

Despre autor