TypeScript banar väg som ett av de mest populära programmeringsspråken för moderna organisationer.
TypeScript är ett kompilerat, strikt skrivet JavaScript-upphöjt skript (byggt ovanpå JavaScript-språket). Detta statiskt skrivna språk, utvecklat och underhållet av Microsoft, stöder objektorienterade koncept som dess undergrupp, JavaScript.
Detta programmeringsspråk med öppen källkod har många användningsfall, som att skapa webbapplikationer, storskaliga och mobila applikationer. TypeScript kan användas för frontend- och backend-utveckling. Den har också olika ramverk och bibliotek som förenklar utvecklingen och utökar dess användningsfall.
Varför använda TypeScript med Node.js? Den här artikeln kommer att diskutera varför TypeScript anses vara ”bättre” än JavaScript, hur man installerar det med Node.js, konfigurerar och skapar ett litet program med TypeScript och Node.js.
TypeScript med Node.js: Fördelar
- Valfri statisk typning: JavaScript skrivs dynamiskt, vilket innebär att en variabels datatyp bestäms vid körning och inte under kompileringstid. Å andra sidan erbjuder TypeScript valfri statisk typning, vilket innebär att när du väl har deklarerat en variabel kommer den inte att ändra dess typ och bara ta vissa värden.
- Förutsägbarhet: När du arbetar med TypeScript, finns det en garanti för att allt du definierar kommer att förbli detsamma. Till exempel, om du deklarerar en viss variabel som en boolesk, kan den aldrig ändras till en sträng längs vägen. Som utvecklare är du säker på att dina funktioner förblir desamma.
- Lätt att upptäcka buggar tidigt: TypeScript upptäcker de flesta typfel tidigt, så sannolikheten att de går till produktion är låg. Detta minskar tiden som ingenjörer lägger ner på att testa kod i senare skeden.
- Stöds på de flesta IDE:er: TypeScript fungerar med de flesta integrerade utvecklingsmiljöer (IDEs). De flesta av dessa IDE tillhandahåller kodkomplettering och syntaxmarkering. Den här artikeln kommer att använda Visual Studio Code, en annan Microsoft-produkt.
- Lätt att omstrukturera kod: Du kan uppdatera eller omfaktorisera din TypeScript-app utan att ändra dess beteende. Närvaron av navigeringsverktyg och IDE som förstår din kod gör det enkelt att omstrukturera kodbasen utan ansträngning.
- Använder befintliga paket: Du behöver inte skapa allt från grunden; du kan använda befintliga NPM-paket med TypeScript. Detta språk har också en stark community som underhåller och skapar typdefinitioner för populära paket.
Hur man använder TypeScript med Node.js
Även om TypeScript har dessa fördelar kan moderna webbläsare inte läsa dess kod i vanlig form. Därför måste TypeScript-kod först överföras till JavaScript-kod för att kunna köras i webbläsare. Den resulterande koden kommer att ha samma funktionalitet som den ursprungliga TypeScript-koden och extra funktioner som inte är tillgängliga i JavaScript.
Förutsättningar
- Node.js: Node är en körtidsmiljö för flera plattformar som tillåter körning av JavaScript-kod utanför en webbläsarmiljö. Du kan kontrollera om noden är installerad på din maskin med det här kommandot;
nod -v
Annars kan du ladda ner Node.js från den officiella webbplatsen. Kör kommandot ovan igen efter installationen för att kontrollera om det har konfigurerats väl.
- En Node Package Manager: Du kan använda NPM eller Yarn. Den förra installeras som standard när du installerar Node.js. Vi kommer att använda NPM som pakethanterare i den här artikeln. Använd detta kommando för att kontrollera dess aktuella version;
npm -v
Installerar TypeScript med Node.js
Steg 1: Konfigurera en projektmapp
Vi börjar med att skapa en projektmapp för TypeScript-projektet. Du kan ge den här mappen vilket namn du vill. Du kan använda dessa kommandon för att komma igång;
mkdir typskript-nod
cd typskript-nod
Steg 2: Initiera projektet
Använd npm för att initiera ditt projekt med detta kommando;
npm init -y
Kommandot ovan skapar filen package.json. Flaggan -y i kommandot talar om för npm att inkludera standardvärden. Den genererade filen kommer att ha en liknande utdata.
{
"name": "typescript-node",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo "Error: no test specified" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
Konfigurera TypeScript med Node.js
Steg 1: Installera TypeScript-kompilatorn
Du kan nu installera TypeScript-kompilatorn till ditt projekt. Kör detta kommando;
npm installera –save-dev typskript
Utdata på din kommandorad kommer att vara något liknande detta;
added 1 package, and audited 2 packages in 26s found 0 vulnerabilities
Obs: Ovanstående tillvägagångssätt installerar TypeScript lokalt på projektmappen du arbetar med. Du kan installera TypeScript globalt på ditt system, så att du inte behöver installera det varje gång du arbetar med ett projekt. Använd det här kommandot för att installera TypeScript globalt;
npm install -g typescript
Du kan kontrollera om TypeScript har installerats med det här kommandot;
tsc -v
Steg 2: Lägg till Ambient Node.js-typer för TypeScript
TypeScript har olika typer, som Implicit, Explicit och Ambient. Omgivningstyper läggs alltid till i det globala exekveringsomfånget. Använd det här kommandot för att lägga till omgivningstyper;
npm installera @types/node –save-dev
Steg 3: Skapa en tsconfig.json-fil
Det här är konfigurationsfilen som anger alla TypeScript-kompileringsalternativ. Kör det här kommandot som kommer med flera definierade kompileringsalternativ;
npx tsc --init --rootDir src --outDir build --esModuleInterop --resolveJsonModule --lib es6 --module commonjs --allowJs true --noImplicitAny true
Detta kommer att matas ut på terminalen;
Filen tsconfig.json, som innehåller några standardinställningar och kommentarer, kommer att genereras.
tsconfig.json filen
Detta är vad vi har konfigurerat:
- RootDir är där TypeScript kommer att leta efter vår kod. Vi har dirigerat den till /src-mappen där vi kommer att skriva vår kod.
- OutDir-mappen definierar var den kompilerade koden placeras. Sådan kod är konfigurerad att lagras i build/mapp.
Använder TypeScript med Node.js
Steg 1: Skapa src-mapp och index.ts-fil
Nu har vi den grundläggande konfigurationen. Vi kan nu skapa en enkel TypeScript-app och kompilera den. Filtillägget för en TypeScript-fil är .ts. Kör dessa kommandon i mappen vi skapade i de föregående stegen;
mkdir src
tryck på src/index.ts
Steg 2: Lägg till kod i TypeScript-filen (index.ts)
Du kan börja med något enkelt som;
console.log('Hello world!')
Steg 3: Kompilera TypeScript-kod till JavaScript-kod
Kör detta kommando;
npx tsc
Du kan kontrollera build-mappen (build/index.js), och du kommer att se att en index.js har genererats med denna utdata;
TypeScript har kompilerats till JavaScript-kod.
Steg 4: Kör den kompilerade JavaScript-koden
Kom ihåg att TypeScript-kod inte kan köras i webbläsare. Vi kommer alltså att köra koden i index.js i build-mappen. Kör detta kommando;
node build/index.js
Detta kommer att vara utgången;
Steg 5: Konfigurera TypeScript för att automatiskt kompilera till JavaScript-kod
Att kompilera TypeScript-kod manuellt när du ändrar dina TypeScript-filer kan slösa tid. Du kan installera ts-node (kör TypeScript-kod direkt utan att vänta på att kompileras) och nodemon (kontrollerar din kod efter ändringar och startar automatiskt om servern).
Kör detta kommando;
npm install --save-dev ts-node nodemon
Du kan sedan gå till filen package.json och lägga till det här skriptet;
"scripts": {
"start": "ts-node ./src/index.ts"
}
Vi kan använda ett nytt kodblock för demonstrationsändamål;
function sum (num1:number, num2:number, num3:number){
return num1 + num2 +num3;
}
console.log(sum(10,15,30))
Ta bort filen index.js (/build/index.js) och kör npm start.
Din produktion kommer att likna den här;
summan av 3 siffror
Konfigurera TypeScript Linting med eslint
Steg 1: Installera eslint
Linting kan vara användbart om du vill bibehålla kodkonsistens och fånga upp fel före körning. Installera eslint med detta kommando;
npm install --save-dev eslint
Steg 2: Initiera eslint
Du kan initiera eslint med detta kommando;
npx eslint --init
Initieringsprocessen tar dig igenom flera steg. Använd följande skärmdump för att guida dig genom;
När processen är över kommer du att se en fil med namnet .eslintrc.js med innehåll som liknar detta;
module.exports = {
env: {
browser: true,
es2021: true
},
extends: 'standard-with-typescript',
overrides: [
],
parserOptions: {
ecmaVersion: 'latest',
sourceType: 'module'
},
rules: {
}
}
Steg 3: Kör eslint
Kör det här kommandot för att kontrollera och luda alla filer med filtillägget .ts;
npx eslint . --ext .ts
Steg 4: Uppdatera package.json
Lägg till ett lint-script på den här filen för automatisk linting.
"scripts": {
"lint": "eslint . --ext .ts",
},
TypeScript med Node.js: Bästa metoder
- Håll TypeScript uppdaterad: TypeScript-utvecklare släpper alltid nya versioner. Se till att du har den senaste versionen installerad på din maskin/projektmapp och dra nytta av nya funktioner och buggfixar.
- Aktivera strikt läge: Du kan fånga de vanliga programmeringsfelen vid kompilering när du aktiverar strikt läge i filen tsconfig.json. Detta kommer att minska din felsökningstid, vilket leder till mer produktivitet.
- Aktivera strikta nollkontroller: Du kan fånga alla noll- och odefinierade fel vid kompilering genom att aktivera strikta nollkontroller på filen tsconfig.json.
- Använd en kodredigerare som stöder TypeScript: Det finns massor av kodredigerare. En bra praxis är att välja kodredigerare som VS Code, Sublime Text eller Atom som stöder TypeScript genom plugins.
- Användningstyper och gränssnitt: Med typer och gränssnitt kan du definiera anpassade typer som du kan återanvända i hela ditt projekt. Ett sådant tillvägagångssätt kommer att göra din kod mer modulär och lätt att underhålla.
Avslutar
Du har nu grundstrukturen för en app skapad med TypeScript på Node.js. Du kan nu använda de vanliga Node.js-paketen men ändå, skriv din kod i TypeScript och njut av alla extrafunktioner som kommer med det senare.
Om du precis har börjat med TypeScript, se till att du förstår skillnaderna mellan TypeScript och JavaScript.
