Ինչպես օգտագործել TypeScript-ը ձեր Node.js նախագծի հետ

Node.js-ի շատ նախագծեր օգտագործում են TypeScript-ը իր խիստ մուտքագրման և օբյեկտի վրա հիմնված հատկանիշների համար: Իմացեք, թե ինչպես սկսել անմիջապես:

TypeScript-ը հարմար է բարդ հավելվածներ և ամուր ճարտարապետություններ ստեղծելու համար, ինչպիսիք են միկրոծառայությունները: Իհարկե, TypeScript-ը չի կարող անել մի բան, որը չի կարող անել JavaScript-ը, բայց այն կարող է բարդ նախագծերն ավելի կառավարելի դարձնել: TypeScript-ի խիստ մուտքագրումը և միջերեսների աջակցությունը նշանակում են, որ այն հիանալի է օբյեկտի վրա հիմնված ծրագրավորման համար: Մենք տեսել ենք, որ շատ ընկերություններ դիմում են TypeScript-ին՝ իրենց backend-ը կոդավորելու համար:

Ձեր Node.js նախագծում TypeScript-ը սկսելու ավելի լավ ժամանակ չկա, քան հիմա: Բայց ինչպե՞ս կարող եք այն կարգավորել ձեր Node.js նախագծի համար: Դուք կիմանաք այս հոդվածում:

Ի՞նչ է TypeScript-ը:

TypeScript-ը JavaScript-ի կազմված, խիստ տպագրված տարբերակ է, որը մշակվել և պահպանվում է Microsoft-ի կողմից: TypeScript կոդը փոխակերպվում է JavaScript-ի:

TypeScript-ի խիստ մուտքագրման բնույթն օգնում է մշակողներին խուսափել իրենց կոդի սխալներից: Այն կկազմի միայն կոդ, որը բավարարում է իր նշված տվյալների տեսակների կանոններին: Սա TypeScript կոդն ավելի ամուր է դարձնում, քան իր մաքուր JavaScript գործընկերը:

Այն նաև աջակցում է ինչպես ֆունկցիոնալ, այնպես էլ օբյեկտի վրա հիմնված ծրագրավորմանը: Այս բոլոր հատկանիշները դարձնում են այն խիստ մասշտաբային և հարմար բարդ հավելվածներ մշակելու համար:

Ինչպես կարգավորել TypeScript-ը Node.JS-ում

Դուք պետք է մի քանի կոնֆիգուրացիաներ քաշեք այստեղ և այնտեղ, որպեսզի սկսեք օգտագործել TypeScript-ը ձեր Node.js նախագծի հետ: Բայց մի անհանգստացեք, դա հեշտ է:

Այնուամենայնիվ, նախքան շարունակելը համոզվեք, որ տեղադրեք Node.js npm փաթեթը:

Նախաձեռնեք package.json ֆայլը

Բացեք ձեր տերմինալը և ստեղծեք նախագծի թղթապանակ: Այնուհետև մուտքագրեք այս նոր գրացուցակը և սկզբնավորեք Node.js նախագիծը.

npm init

Վերոնշյալ հրամանը ստեղծում է package.json ֆայլ՝ ձեր կախվածությունները պահելու համար:

Տեղադրեք TypeScript և այլ կախվածություններ

Հաջորդը, շարունակեք և տեղադրեք TypeScript-ը ձեր Node.js նախագծում.

npm i -D typescript

-D հիմնաբառը երաշխավորում է, որ TypeScript-ը տեղադրվում է որպես devDependencies-ի մաս package.json-ում:

Դուք նաև պետք է տեղադրեք @types/express, TypeScript-ի սահմանումը Express.js-ի համար:

npm install -D @types/express

Հաջորդը, սկզբնավորեք tsconfig.json ֆայլը: Սա մանրամասնում է ձեր նախագծի բազային կազմողի ընտրանքները.

npx tsc --init

Վերոնշյալ հրամանը ստեղծում է tsconfig.json ֆայլ ձեր նախագծի արմատական պանակում:

Տեղադրեք նաև Express.js-ը: Դուք կարող եք բաց թողնել սա, եթե միայն մտադիր եք կառավարել սերվերները Node.js-ի ներկառուցված HTTP պրիմիտիվներով: Բայց Express.js-ը դա հեշտացնում է.

npm install express

Հաջորդը, տեղադրեք nodemon, փաթեթ, որն ավտոմատ կերպով վերագործարկում է ձեր սերվերը, երբ ձեր կոդի մեջ փոփոխություններ են լինում: Համոզվեք, որ սա գլոբալ տեղադրեք, որպեսզի այն աշխատի.

npm install -g nodemon

Կարգավորել TypeScript-ը Node.JS-ով

Բացեք tsconfig.json ֆայլը, որը սկզբնավորել եք ավելի վաղ՝ օգտագործելով ձեր ընտրած կոդերի խմբագրիչը: Այս ֆայլում կարող է շատ բան լինել: Թեև դուք կարող եք կարգավորել այս ֆայլն իր ներկայիս տեսքով, դուք կարող եք փոխարինել դրա ամբողջ բովանդակությունը ստորև բերվածով, որպեսզի այն ավելի պարզ լինի:

Ահա այն ամենը, ինչ ձեզ անհրաժեշտ է tsconfig.json-ում, որպեսզի կարողանաք առաջ գնալ.

{
  "compilerOptions": {
    "module": "commonjs",
    "esModuleInterop": true,
    "target": "es6",
    "moduleResolution": "node",
    "sourceMap": true,
    "outDir": "dist" //Specifies the transpiler directory. 
  },
  "lib": ["es2015"]
}

Այժմ բացեք package.json: Ահա թե ինչպիսի տեսք ունի այն ներկայումս TypeScript-ը և Express-ը տեղադրելուց հետո.

Հաջորդը, scripts զանգվածին ավելացրեք հետևյալ կազմաձևերը.

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "npx tsc",
    "start": "node ./dist/app.js",
    "dist": "tsc -p .",
    "dev": "nodemon ./src/app.ts", //Replace this with the correct directory path for app.ts in your case
    "type": "module"
}

Վերոնշյալ կոնֆիգուրացիան ցույց է տալիս, որ ձեր սերվերը պետք է գործարկվի app.js-ից՝ փոխարկիչից: Անհանգստացեք, սա լռելյայն ֆայլ է, որը ավտոմատ կերպով կստեղծվի dist պանակում, երբ գործարկեք build սկրիպտը: Դուք դա կանեք ավելի ուշ:

Այնուհետև կազմաձևումը սահմանում է զարգացման հիմնական սցենարը որպես app.ts:

Հետևաբար, երբ սկսում եք մշակման միջավայրը, nodemon գործարկում է app.ts: Node.js-ն այնուհետև հավաքում է սա JavaScript-ի մեջ app.js—որը հաղորդակցվում է HTTP սերվերի հետ:

Հաջորդը, ձեր նախագծի արմատական գրացուցակում ստեղծեք src թղթապանակ: Այս թղթապանակի ներսում ստեղծեք դատարկ TypeScript ֆայլ և անվանեք այն app.ts:

Ստեղծեք Transpiler գրացուցակը

Տրանսպիլյատորը JavaScript ֆայլ է, որը կազմում է TypeScript կոդը բնիկ JavaScript-ում: Այսպիսով, սա ապահովում է, որ սերվերը կարող է կապվել ձեր կոդի հետ որպես JavaScript՝ խիստ մուտքագրված սցենարի փոխարեն:

Այսպիսով, մինչ TypeScript-ը մշակում է կոդի կառուցվածքը, փոխարկիչի ֆայլը այն կազմում է JavaScript-ի:

Այժմ գործարկեք build սկրիպտը` ավտոմատ կերպով ստեղծելու dist transpiler գրացուցակը:

npm run build

Վերոնշյալ հրամանը ձեր TypeScript կոդը կազմում է JavaScript-ում: Ստեղծված թղթապանակը պարունակում է երկու ֆայլ. app.js և app.js.map:

Նորից բացեք package.json: Դուք կտեսնեք հիմնական անունով բանալի զանգվածում: Դուք կարող եք տեսնել, որ դրա արժեքը ցույց է տալիս index.js: Փոխարինեք սա app.js (transpiler) ֆայլերի գրացուցակով.

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

Ֆորմատավորումից հետո package.json պետք է այսպիսի տեսք ունենա.

Դա այն է կոնֆիգուրացիաների մասի համար:

Ստեղծեք և գործարկեք HTTP հարցում

Այժմ փորձեք ստեղծել և գործարկել HTTP հարցում Express.js սերվերի միջոցով՝ տեսնելու, թե արդյոք ձեր կոդը կազմվում է այնպես, ինչպես պետք է:

app.ts ներսում՝

import express, {Request, Response} from 'express'
 
const app = express()
 
app.get('/', async (req: Request, res: Response)=>{
    console.log('Hello world')
    res.send('Hello world')
})
 
const port = 8080
 
app.listen(port, (): void=>{
    console.log(`App is listening at http://localhost:${port}`)
})

Հաջորդը, բացեք հրամանի տողը ձեր նախագծի արմատական գրացուցակում և գործարկեք dev սկրիպտը՝ ձեր նախագիծը սկսելու համար.

npm run dev

Բացեք ձեր դիտարկիչը և անցեք localhost:8080, և կտեսնեք պատասխանը (Բարև աշխարհ): Սա կտեսնեք նաև տերմինալում, եթե կիրառեք console.log հրամանը, ինչպես մենք արեցինք վերը նշված օրինակում:

TypeScript-ն ունի բարձր պահանջարկի հեռանկարներ

Հազիվ թե շատ տարբերություն կա TypeScript-ի և JavaScript-ի միջև: Բայց առաջինը հեշտացնում է զարգացումը իր խիստ մուտքագրման ավելացմամբ:

TypeScript-ը արժեքավոր լեզու է frontend շրջանակներում, ինչպիսին է Angular-ը, և մենք չենք կարող ժխտել դրա կատարումն ու մասշտաբայնությունը: Այն դառնում է ավելի տարածված, և TypeScript ծրագրավորողների աշխատանքի հեռանկարները շարունակում են աճել: