TypeScript baner vei som et av de mest populære programmeringsspråkene for moderne organisasjoner.
TypeScript er et kompilert, strengt skrevet JavaScript-oppskrift (bygget på toppen av JavaScript-språket). Dette statisk skrevet språket, utviklet og vedlikeholdt av Microsoft, støtter objektorienterte konsepter som undergruppen JavaScript.
Dette programmeringsspråket med åpen kildekode har mange bruksområder, for eksempel å lage nett-, storskala- og mobilapplikasjoner. TypeScript kan brukes til frontend- og backend-utvikling. Den har også ulike rammeverk og biblioteker som forenkler utviklingen og utvider bruken.
Hvorfor bruke TypeScript med Node.js? Denne artikkelen vil diskutere hvorfor TypeScript anses som «bedre» enn JavaScript, hvordan du installerer det ved hjelp av Node.js, konfigurerer og lager et lite program ved hjelp av TypeScript og Node.js.
Innholdsfortegnelse
TypeScript med Node.js: Fordeler
- Valgfri statisk skriving: JavaScript skrives dynamisk, noe som betyr at en variabels datatype bestemmes under kjøring og ikke under kompilering. På den annen side tilbyr TypeScript valgfri statisk skriving, noe som betyr at når du erklærer en variabel, vil den ikke endre typen og bare ta visse verdier.
- Forutsigbarhet: Når du arbeider med TypeScript, er det sikkerhet for at alt du definerer vil forbli det samme. For eksempel, hvis du erklærer en viss variabel som en boolsk, kan den aldri endres til en streng underveis. Som utvikler er du trygg på at funksjonene dine forblir de samme.
- Enkelt å oppdage feil tidlig: TypeScript oppdager de fleste typefeil tidlig, så sannsynligheten for å gå over til produksjon er lav. Dette reduserer tiden ingeniører bruker på å teste kode i senere stadier.
- Støttes på de fleste IDE-er: TypeScript fungerer med de fleste integrerte utviklingsmiljøer (IDE-er). De fleste av disse IDE-ene gir kodefullføring og syntaksutheving. Denne artikkelen vil bruke Visual Studio Code, et annet Microsoft-produkt.
- Enkel å refaktorisere kode: Du kan oppdatere eller refaktorisere TypeScript-appen uten å endre oppførselen. Tilstedeværelsen av navigasjonsverktøy og IDE som forstår koden din, gjør det enkelt å refaktorisere kodebasen uten problemer.
- Bruker eksisterende pakker: Du trenger ikke lage alt fra bunnen av; du kan bruke eksisterende NPM-pakker med TypeScript. Dette språket har også et sterkt fellesskap som vedlikeholder og lager typedefinisjoner for populære pakker.
Slik bruker du TypeScript med Node.js
Selv om TypeScript har disse fordelene, kan ikke moderne nettlesere lese koden i ren form. Derfor må TypeScript-kode først transpileres til JavaScript-kode for å kjøre på nettlesere. Den resulterende koden vil ha samme funksjonalitet som den originale TypeScript-koden og ekstra funksjonalitet som ikke er tilgjengelig i JavaScript.
Forutsetninger
- Node.js: Node er et kjøretidsmiljø på tvers av plattformer som tillater å kjøre JavaScript-kode utenfor et nettlesermiljø. Du kan sjekke om noden er installert på maskinen din ved å bruke denne kommandoen;
node -v
Ellers kan du laste ned Node.js fra den offisielle nettsiden. Kjør kommandoen ovenfor igjen etter installasjonen for å sjekke om den er godt konfigurert.
- En Node Package Manager: Du kan bruke NPM eller Yarn. Førstnevnte er installert som standard når du installerer Node.js. Vi vil bruke NPM som pakkebehandling i denne artikkelen. Bruk denne kommandoen for å sjekke gjeldende versjon;
npm -v
Installerer TypeScript med Node.js
Trinn 1: Sett opp en prosjektmappe
Vi starter med å lage en prosjektmappe for TypeScript-prosjektet. Du kan gi denne mappen et hvilket som helst navn du vil. Du kan bruke disse kommandoene for å komme i gang;
mkdir typescript-node
cd typescript-node
Trinn 2: Initialiser prosjektet
Bruk npm for å initialisere prosjektet ved å bruke denne kommandoen;
npm init -y
Kommandoen ovenfor vil opprette en package.json-fil. -y-flagget i kommandoen forteller npm å inkludere standardverdier. Den genererte filen vil ha en lignende utgang.
{
"name": "typescript-node",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo "Error: no test specified" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
Konfigurere TypeScript med Node.js
Trinn 1: Installer TypeScript-kompilatoren
Du kan nå installere TypeScript-kompilatoren til prosjektet ditt. Kjør denne kommandoen;
npm install –save-dev typescript
Utdataene på kommandolinjen vil være noe som ligner på dette;
added 1 package, and audited 2 packages in 26s found 0 vulnerabilities
Merk: Tilnærmingen ovenfor installerer TypeScript lokalt på prosjektmappen du jobber med. Du kan installere TypeScript globalt på systemet ditt, slik at du ikke trenger å installere det hver gang du jobber med et prosjekt. Bruk denne kommandoen til å installere TypeScript globalt;
npm install -g typescript
Du kan sjekke om TypeScript er installert ved å bruke denne kommandoen;
tsc -v
Trinn 2: Legg til Ambient Node.js-typer for TypeScript
TypeScript har forskjellige typer, for eksempel Implicit, Explicit og Ambient. Omgivelsestyper legges alltid til det globale utførelsesomfanget. Bruk denne kommandoen for å legge til omgivelsestyper;
npm installer @types/node –save-dev
Trinn 3: Opprett en tsconfig.json-fil
Dette er konfigurasjonsfilen som spesifiserer alle TypeScript-kompileringsalternativene. Kjør denne kommandoen som kommer med flere kompileringsalternativer definert;
npx tsc --init --rootDir src --outDir build --esModuleInterop --resolveJsonModule --lib es6 --module commonjs --allowJs true --noImplicitAny true
Dette vil sendes ut på terminalen;
Filen tsconfig.json, som inneholder noen standardinnstillinger og kommentarer, vil bli generert.
tsconfig.json-filen
Dette er hva vi har konfigurert:
- RootDir er der TypeScript vil se etter koden vår. Vi har sendt den til /src-mappen hvor vi skal skrive koden vår.
- OutDir-mappen definerer hvor den kompilerte koden plasseres. Slik kode er konfigurert til å lagres i build/mappe.
Bruke TypeScript med Node.js
Trinn 1: Opprett src-mappe og index.ts-fil
Nå har vi den grunnleggende konfigurasjonen. Vi kan nå lage en enkel TypeScript-app og kompilere den. Filtypen for en TypeScript-fil er .ts. Kjør disse kommandoene mens du er inne i mappen vi opprettet i de forrige trinnene;
mkdir src
trykk på src/index.ts
Trinn 2: Legg til kode i TypeScript-filen (index.ts)
Du kan starte med noe enkelt som;
console.log('Hello world!')
Trinn 3: Kompiler TypeScript-kode til JavaScript-kode
Kjør denne kommandoen;
npx tsc
Du kan sjekke build-mappen (build/index.js), og du vil se at en index.js har blitt generert med denne utgangen;
TypeScript er kompilert til JavaScript-kode.
Trinn 4: Kjør den kompilerte JavaScript-koden
Husk at TypeScript-kode ikke kan kjøres på nettlesere. Vi vil dermed kjøre koden i index.js i build-mappen. Kjør denne kommandoen;
node build/index.js
Dette vil være utgangen;
Trinn 5: Konfigurer TypeScript til å automatisk kompilere til JavaScript-kode
Å kompilere TypeScript-kode manuelt hver gang du endrer TypeScript-filene dine kan kaste bort tid. Du kan installere ts-node (kjører TypeScript-kode direkte uten å vente på å bli kompilert) og nodemon (sjekker koden for endringer og starter automatisk serveren på nytt).
Kjør denne kommandoen;
npm install --save-dev ts-node nodemon
Du kan deretter gå til filen package.json og legge til dette skriptet;
"scripts": {
"start": "ts-node ./src/index.ts"
}
Vi kan bruke en ny kodeblokk for demonstrasjonsformål;
function sum (num1:number, num2:number, num3:number){
return num1 + num2 +num3;
}
console.log(sum(10,15,30))
Slett filen index.js (/build/index.js) og kjør npm start.
Utgangen din vil være lik denne;
summen av 3 tall
Konfigurer TypeScript Linting med eslint
Trinn 1: Installer eslint
Linting kan være nyttig hvis du ønsker å opprettholde kodekonsistens og fange opp feil før kjøretid. Installer eslint ved å bruke denne kommandoen;
npm install --save-dev eslint
Trinn 2: Initialiser eslint
Du kan initialisere eslint ved å bruke denne kommandoen;
npx eslint --init
Initialiseringsprosessen vil ta deg gjennom flere trinn. Bruk følgende skjermbilde for å veilede deg gjennom;
Når prosessen er over, vil du se en fil som heter .eslintrc.js med innhold som ligner på dette;
module.exports = {
env: {
browser: true,
es2021: true
},
extends: 'standard-with-typescript',
overrides: [
],
parserOptions: {
ecmaVersion: 'latest',
sourceType: 'module'
},
rules: {
}
}
Trinn 3: Kjør eslint
Kjør denne kommandoen for å kontrollere og lo alle filene med filtypen .ts;
npx eslint . --ext .ts
Trinn 4: Oppdater package.json
Legg til et lint-skript på denne filen for automatisk linting.
"scripts": {
"lint": "eslint . --ext .ts",
},
TypeScript med Node.js: Gode fremgangsmåter
- Hold TypeScript oppdatert: TypeScript-utviklere gir alltid ut nye versjoner. Sørg for at du har den nyeste versjonen installert på maskinen/prosjektmappen din og dra nytte av nye funksjoner og feilrettinger.
- Aktiver streng modus: Du kan fange opp de vanlige programmeringsfeilene ved kompilering når du aktiverer streng modus på tsconfig.json-filen. Dette vil redusere feilsøkingstiden, og føre til mer produktivitet.
- Aktiver strenge nullkontroller: Du kan fange opp alle null- og udefinerte feil under kompilering ved å aktivere strenge nullkontroller på tsconfig.json-filen.
- Bruk et koderedigeringsprogram som støtter TypeScript: Det finnes massevis av koderedigeringsprogrammer. En god praksis er å velge koderedigerere som VS Code, Sublime Text eller Atom som støtter TypeScript gjennom plugins.
- Bruk typer og grensesnitt: Med typer og grensesnitt kan du definere egendefinerte typer du kan gjenbruke i hele prosjektet. En slik tilnærming vil gjøre koden din mer modulær og enkel å vedlikeholde.
Innpakning
Du har nå den grunnleggende strukturen til en app laget med TypeScript på Node.js. Du kan nå bruke de vanlige Node.js-pakkene, men likevel, skriv koden din i TypeScript og nyt alle ekstrafunksjonene som følger med sistnevnte.
Hvis du akkurat har begynt med TypeScript, sørg for at du forstår forskjellene mellom TypeScript og JavaScript.