TypeScript ir kļuvusi par vienu no populārākajām programmēšanas valodām mūsdienu organizācijās.
TypeScript ir kompilēts, stingri ierakstīts JavaScript augšraksts (izveidots uz JavaScript valodas). Šī statiski ievadītā valoda, ko izstrādājis un uztur Microsoft, atbalsta objektorientētas koncepcijas, piemēram, tās apakškopu JavaScript.
Šai atvērtā koda programmēšanas valodai ir daudz lietošanas gadījumu, piemēram, tīmekļa, liela mēroga un mobilo lietojumprogrammu izveide. TypeScript var izmantot priekšgala un aizmugursistēmas izstrādei. Tam ir arī dažādi ietvari un bibliotēkas, kas vienkāršo izstrādi un paplašina tā lietošanas gadījumus.
Kāpēc izmantot TypeScript ar Node.js? Šajā rakstā tiks apspriests, kāpēc TypeScript tiek uzskatīts par “labāku” par JavaScript, kā to instalēt, izmantojot Node.js, konfigurēt un izveidot nelielu programmu, izmantojot TypeScript un Node.js.
TypeScript ar Node.js: priekšrocības
- Izvēles statiskā rakstīšana: JavaScript tiek ievadīts dinamiski, kas nozīmē, ka mainīgā datu tips tiek noteikts izpildlaikā, nevis kompilēšanas laikā. No otras puses, TypeScript piedāvā neobligātu statisko rakstīšanu, kas nozīmē, ka pēc mainīgā deklarēšanas tas nemainīs tā veidu un izmantos tikai noteiktas vērtības.
- Paredzamība: strādājot ar TypeScript, ir pārliecība, ka viss, ko definējat, paliks nemainīgs. Piemēram, ja jūs deklarējat noteiktu mainīgo kā Būla vērtību, tas nekad nevar mainīties uz virkni. Kā izstrādātājs jūs esat pārliecināts, ka jūsu funkcijas paliks nemainīgas.
- Viegli pamanīt kļūdas agri: TypeScript agri atklāj lielāko daļu veidu kļūdu, tāpēc iespēja, ka tās pāriet uz ražošanu, ir maza. Tas samazina laiku, ko inženieri pavada koda testēšanai vēlākos posmos.
- Atbalstīts lielākajā daļā IDE: TypeScript darbojas ar lielāko daļu integrēto izstrādes vidi (IDE). Lielākā daļa šo IDE nodrošina koda pabeigšanu un sintakses izcelšanu. Šajā rakstā tiks izmantots cits Microsoft produkts Visual Studio Code.
- Viegli pārveidojams kods: varat atjaunināt vai pārveidot savu TypeScript lietotni, nemainot tās darbību. Navigācijas rīku klātbūtne un IDE, kas saprot jūsu kodu, ļauj viegli pārveidot kodu bāzi bez piepūles.
- Izmanto esošās pakotnes: Jums nav viss jāizveido no nulles; varat izmantot esošās NPM pakotnes ar TypeScript. Šai valodai ir arī spēcīga kopiena, kas uztur un izveido veidu definīcijas populārām pakotnēm.
Kā lietot TypeScript ar Node.js
Lai gan TypeScript ir šīs priekšrocības, mūsdienu pārlūkprogrammas nevar nolasīt tā kodu vienkāršā formā. Tāpēc TypeScript kods vispirms ir jāpārveido JavaScript kodā, lai tas darbotos pārlūkprogrammās. Iegūtajam kodam būs tāda pati funkcionalitāte kā oriģinālajam TypeScript kodam, un papildu funkcijas, kas nav pieejamas JavaScript.
Priekšnoteikumi
- Node.js: Node ir starpplatformu izpildlaika vide, kas ļauj palaist JavaScript kodu ārpus pārlūkprogrammas vides. Izmantojot šo komandu, varat pārbaudīt, vai mezgls ir instalēts jūsu datorā;
mezgls -v
Pretējā gadījumā varat lejupielādēt Node.js no oficiālās vietnes. Pēc instalēšanas vēlreiz palaidiet iepriekš minēto komandu, lai pārbaudītu, vai tā ir pareizi konfigurēta.
- Mezglu pakotņu pārvaldnieks: varat izmantot NPM vai dziju. Pirmais tiek instalēts pēc noklusējuma, kad instalējat Node.js. Šajā rakstā mēs izmantosim NPM kā pakotņu pārvaldnieku. Izmantojiet šo komandu, lai pārbaudītu tās pašreizējo versiju;
npm -v
TypeScript instalēšana ar Node.js
1. darbība: iestatiet projekta mapi
Mēs sāksim, izveidojot projekta mapi TypeScript projektam. Šai mapei varat piešķirt jebkuru nosaukumu, kas jums patīk. Lai sāktu, varat izmantot šīs komandas;
mkdir mašīnraksta mezgls
CD mašīnraksta mezgls
2. darbība: inicializējiet projektu
Izmantojiet npm, lai inicializētu projektu, izmantojot šo komandu;
npm init -y
Iepriekš minētā komanda izveidos failu package.json. -y karodziņš komandā liek npm iekļaut noklusējuma vērtības. Ģenerētajam failam būs līdzīga izvade.
{
"name": "typescript-node",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo "Error: no test specified" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
TypeScript konfigurēšana ar Node.js
1. darbība. Instalējiet TypeScript kompilatoru
Tagad savā projektā varat instalēt TypeScript kompilatoru. Palaidiet šo komandu;
npm install –save-dev mašīnraksts
Jūsu komandrindas izvade būs kaut kas līdzīgs šim;
added 1 package, and audited 2 packages in 26s found 0 vulnerabilities
Piezīme. Iepriekš minētā pieeja instalē TypeScript lokāli projekta mapē, ar kuru strādājat. TypeScript savā sistēmā var instalēt globāli, tāpēc jums tas nav jāinstalē katru reizi, kad strādājat pie projekta. Izmantojiet šo komandu, lai globāli instalētu TypeScript;
npm install -g typescript
Varat pārbaudīt, vai TypeScript ir instalēts, izmantojot šo komandu;
tsc -v
2. darbība. Pievienojiet TypeScript Ambient Node.js veidus
TypeScript ir dažādi veidi, piemēram, Implicit, Explicit un Ambient. Apkārtējās vides veidi vienmēr tiek pievienoti globālajai izpildes tvērumam. Izmantojiet šo komandu, lai pievienotu apkārtējās vides tipus;
npm instalēt @types/node –save-dev
3. darbība. Izveidojiet failu tsconfig.json
Šis ir konfigurācijas fails, kurā norādītas visas TypeScript kompilēšanas opcijas. Palaidiet šo komandu, kurai ir vairākas definētas kompilēšanas opcijas;
npx tsc --init --rootDir src --outDir build --esModuleInterop --resolveJsonModule --lib es6 --module commonjs --allowJs true --noImplicitAny true
Tas tiks izvadīts terminālī;
Tiks ģenerēts fails tsconfig.json, kurā ir daži noklusējuma iestatījumi un komentāri.
tsconfig.json failu
Mēs esam konfigurējuši šo:
- RootDir ir vieta, kur TypeScript meklēs mūsu kodu. Mēs to esam novirzījuši uz / src mapi, kur mēs ierakstīsim savu kodu.
- Mape outDir nosaka, kur tiek ievietots apkopotais kods. Šāds kods ir konfigurēts glabāšanai build/mapē.
Izmantojot TypeScript ar Node.js
1. darbība. Izveidojiet src mapi un failu index.ts
Tagad mums ir pamata konfigurācija. Tagad mēs varam izveidot vienkāršu TypeScript lietotni un to apkopot. TypeScript faila faila paplašinājums ir .ts. Palaidiet šīs komandas, atrodoties mapē, kuru izveidojām iepriekšējās darbībās;
mkdir src
pieskarieties src/index.ts
2. darbība. Pievienojiet kodu TypeScript failam (index.ts)
Jūs varat sākt ar kaut ko vienkāršu, piemēram;
console.log('Hello world!')
3. darbība. Kompilējiet TypeScript kodu JavaScript kodā
Palaidiet šo komandu;
npx tsc
Varat pārbaudīt būvēšanas mapi (build/index.js), un jūs redzēsiet, ka ar šo izvadi ir ģenerēts index.js;
TypeScript ir apkopots JavaScript kodā.
4. darbība. Palaidiet apkopoto JavaScript kodu
Atcerieties, ka TypeScript kodu nevar palaist pārlūkprogrammās. Tādējādi mēs palaidīsim kodu index.js failā build mapē. Palaidiet šo komandu;
node build/index.js
Tas būs rezultāts;
5. darbība: konfigurējiet TypeScript, lai tā automātiski kompilētu JavaScript kodā
TypeScript koda manuāla kompilēšana ikreiz, kad maināt TypeScript failus, var tērēt laiku. Varat instalēt ts-node (palaiž TypeScript kodu tieši, negaidot kompilāciju) un nodemon (pārbauda, vai kodā nav notikušas izmaiņas, un automātiski restartē serveri).
Palaidiet šo komandu;
npm install --save-dev ts-node nodemon
Pēc tam varat doties uz failu package.json un pievienot šo skriptu;
"scripts": {
"start": "ts-node ./src/index.ts"
}
Demonstrācijas nolūkos varam izmantot jaunu koda bloku;
function sum (num1:number, num2:number, num3:number){
return num1 + num2 +num3;
}
console.log(sum(10,15,30))
Izdzēsiet failu index.js (/build/index.js) un palaidiet npm start.
Jūsu izvade būs līdzīga šai;
3 skaitļu summa
Konfigurējiet TypeScript Linting ar eslint
1. darbība: instalējiet eslint
Lining var būt noderīga, ja vēlaties saglabāt koda konsekvenci un novērst kļūdas pirms izpildlaika. Instalējiet eslint, izmantojot šo komandu;
npm install --save-dev eslint
2. darbība: inicializējiet eslint
Jūs varat inicializēt eslint, izmantojot šo komandu;
npx eslint --init
Inicializācijas procesā būs jāveic vairākas darbības. Izmantojiet šo ekrānuzņēmumu, lai palīdzētu jums to paveikt;
Kad process būs beidzies, jūs redzēsiet failu ar nosaukumu .eslintrc.js ar līdzīgu saturu šim;
module.exports = {
env: {
browser: true,
es2021: true
},
extends: 'standard-with-typescript',
overrides: [
],
parserOptions: {
ecmaVersion: 'latest',
sourceType: 'module'
},
rules: {
}
}
3. darbība: palaist eslint
Palaidiet šo komandu, lai pārbaudītu un savilktu visus failus ar paplašinājumu .t;
npx eslint . --ext .ts
4. darbība. Atjauniniet package.json
Pievienojiet šim failam savārstīšanas skriptu automātiskai pūkošanai.
"scripts": {
"lint": "eslint . --ext .ts",
},
TypeScript ar Node.js: paraugprakse
- Atjauniniet TypeScript: TypeScript izstrādātāji vienmēr izdod jaunas versijas. Pārliecinieties, ka jūsu datorā/projekta mapē ir instalēta jaunākā versija, un izmantojiet jaunas funkcijas un kļūdu labojumus.
- Iespējot stingro režīmu: varat konstatēt izplatītākās programmēšanas kļūdas kompilēšanas laikā, iespējojot stingro režīmu failā tsconfig.json. Tas samazinās atkļūdošanas laiku, palielinot produktivitāti.
- Iespējot stingras nulles pārbaudes: varat atrast visas nulles un nedefinētās kļūdas kompilēšanas laikā, iespējojot stingras nulles pārbaudes failā tsconfig.json.
- Izmantojiet koda redaktoru, kas atbalsta TypeScript: pastāv daudz koda redaktoru. Laba prakse ir izvēlēties koda redaktorus, piemēram, VS Code, Sublime Text vai Atom, kas atbalsta TypeScript, izmantojot spraudņus.
- Izmantojiet veidus un saskarnes: izmantojot veidus un saskarnes, varat definēt pielāgotus veidus, kurus varat atkārtoti izmantot visā projektā. Šāda pieeja padarīs jūsu kodu modulārāku un viegli uzturējamu.
Iesaiņošana
Tagad jums ir pamatstruktūra lietotnei, kas izveidota ar TypeScript vietnē Node.js. Tagad varat izmantot parastās Node.js pakotnes, taču ierakstiet savu kodu programmā TypeScript un izbaudiet visas pēdējās piedāvātās papildu funkcijas.
Ja jūs tikko sākat lietot TypeScript, pārliecinieties, ka saprotat atšķirības starp TypeScript un JavaScript.