TypeScript effent zijn weg als een van de meest populaire programmeertalen voor moderne organisaties.
TypeScript is een gecompileerd, strikt getypeerd JavaScript-superscript (gebouwd bovenop de JavaScript-taal). Deze statisch getypeerde taal, ontwikkeld en onderhouden door Microsoft, ondersteunt objectgeoriënteerde concepten zoals zijn subset, JavaScript.
Deze open-source programmeertaal heeft veel use-cases, zoals het maken van web-, grootschalige en mobiele applicaties. TypeScript kan worden gebruikt voor frontend- en backend-ontwikkeling. Het heeft ook verschillende frameworks en bibliotheken die de ontwikkeling vereenvoudigen en de use cases uitbreiden.
Waarom TypeScript gebruiken met Node.js? In dit artikel wordt besproken waarom TypeScript als “beter” wordt beschouwd dan JavaScript, hoe het kan worden geïnstalleerd met Node.js, en hoe een klein programma kan worden geconfigureerd en gemaakt met TypeScript en Node.js.
TypeScript met Node.js: voordelen
- Optioneel statisch typen: JavaScript wordt dynamisch getypeerd, wat betekent dat het gegevenstype van een variabele tijdens runtime wordt bepaald en niet tijdens het compileren. Aan de andere kant biedt TypeScript optioneel statisch typen, wat betekent dat zodra u een variabele declareert, deze het type niet zal veranderen en alleen bepaalde waarden zal aannemen.
- Voorspelbaarheid: bij het omgaan met TypeScript is er de zekerheid dat alles wat u definieert hetzelfde zal blijven. Als u bijvoorbeeld een bepaalde variabele declareert als een Booleaanse waarde, kan deze onderweg nooit in een string veranderen. Als ontwikkelaar weet je zeker dat je functies hetzelfde blijven.
- Gemakkelijk om bugs vroegtijdig op te sporen: TypeScript detecteert de meeste typefouten vroeg, dus de kans dat ze naar productie gaan is klein. Dit vermindert de tijd die ingenieurs besteden aan het testen van code in latere stadia.
- Ondersteund op de meeste IDE’s: TypeScript werkt met de meeste geïntegreerde ontwikkelomgevingen (IDE’s). De meeste van deze IDE’s bieden codeaanvulling en syntaxisaccentuering. Dit artikel gebruikt Visual Studio Code, een ander Microsoft-product.
- Eenvoudig te herstructureren code: u kunt uw TypeScript-app bijwerken of herstructureren zonder het gedrag ervan te veranderen. De aanwezigheid van navigatietools en de IDE die uw code begrijpt, maakt het gemakkelijk om de codebase moeiteloos te herstructureren.
- Maakt gebruik van bestaande pakketten: u hoeft niet alles vanaf nul te maken; u kunt bestaande NPM-pakketten gebruiken met TypeScript. Deze taal heeft ook een sterke gemeenschap die typedefinities onderhoudt en maakt voor populaire pakketten.
TypeScript gebruiken met Node.js
Hoewel TypeScript deze voordelen heeft, kunnen moderne browsers de code niet in gewone vorm lezen. Daarom moet TypeScript-code eerst worden omgezet in JavaScript-code om op browsers te kunnen worden uitgevoerd. De resulterende code heeft dezelfde functionaliteit als de originele TypeScript-code en extra functionaliteiten die niet beschikbaar zijn in JavaScript.
Vereisten
- Node.js: Node is een platformonafhankelijke runtime-omgeving waarmee JavaScript-code buiten een browseromgeving kan worden uitgevoerd. U kunt met deze opdracht controleren of het knooppunt op uw computer is geïnstalleerd;
knooppunt -v
Anders kunt u Node.js downloaden van de officiële website. Voer de bovenstaande opdracht na installatie nogmaals uit om te controleren of deze goed is geconfigureerd.
- Een Node Package Manager: U kunt NPM of Yarn gebruiken. De eerste wordt standaard geïnstalleerd wanneer u Node.js installeert. In dit artikel gebruiken we NPM als pakketbeheerder. Gebruik deze opdracht om de huidige versie te controleren;
npm -v
TypeScript installeren met Node.js
Stap 1: stel een projectmap in
We beginnen met het maken van een projectmap voor het TypeScript-project. U kunt deze map elke gewenste naam geven. U kunt deze opdrachten gebruiken om aan de slag te gaan;
mkdir typescript-node
cd typescript-knooppunt
Stap 2: Initialiseer het project
Gebruik npm om uw project te initialiseren met behulp van deze opdracht;
npm begin -y
Met de bovenstaande opdracht wordt een package.json-bestand gemaakt. De vlag -y in de opdracht vertelt npm om standaardinstellingen op te nemen. Het gegenereerde bestand heeft een vergelijkbare uitvoer.
{
"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 configureren met Node.js
Stap 1: installeer de TypeScript-compiler
U kunt nu de TypeScript-compiler in uw project installeren. Voer deze opdracht uit;
npm install –save-dev typoscript
De uitvoer op uw opdrachtregel zal er ongeveer zo uitzien;
added 1 package, and audited 2 packages in 26s found 0 vulnerabilities
Opmerking: de bovenstaande benadering installeert TypeScript lokaal in de projectmap waaraan u werkt. U kunt TypeScript wereldwijd op uw systeem installeren, zodat u het niet elke keer hoeft te installeren wanneer u aan een project werkt. Gebruik deze opdracht om TypeScript wereldwijd te installeren;
npm install -g typescript
U kunt met deze opdracht controleren of TypeScript is geïnstalleerd;
tsc -v
Stap 2: voeg Ambient Node.js-typen toe voor TypeScript
TypeScript heeft verschillende typen, zoals Impliciet, Expliciet en Ambient. Omgevingstypen worden altijd toegevoegd aan het globale uitvoeringsbereik. Gebruik deze opdracht om Ambient Types toe te voegen;
npm install @types/node –save-dev
Stap 3: Maak een tsconfig.json-bestand
Dit is het configuratiebestand dat alle TypeScript-compileeropties specificeert. Voer deze opdracht uit die wordt geleverd met verschillende gedefinieerde compileeropties;
npx tsc --init --rootDir src --outDir build --esModuleInterop --resolveJsonModule --lib es6 --module commonjs --allowJs true --noImplicitAny true
Dit wordt uitgevoerd op de terminal;
Het bestand tsconfig.json, dat enkele standaardwaarden en opmerkingen bevat, wordt gegenereerd.
tsconfig.json-bestand
Dit is wat we hebben geconfigureerd:
- De rootDir is waar TypeScript naar onze code zal zoeken. We hebben het naar de map /src geleid waar we onze code zullen schrijven.
- De map outDir definieert waar de gecompileerde code wordt geplaatst. Dergelijke code is geconfigureerd om te worden opgeslagen in de map build/.
TypeScript gebruiken met Node.js
Stap 1: maak de src-map en het index.ts-bestand aan
Nu hebben we de basisconfiguratie. We kunnen nu een eenvoudige TypeScript-app maken en deze compileren. De bestandsextensie voor een TypeScript-bestand is .ts. Voer deze opdrachten uit terwijl u zich in de map bevindt die we in de vorige stappen hebben gemaakt;
mkdir src
raak src/index.ts aan
Stap 2: voeg code toe aan het TypeScript-bestand (index.ts)
Je kunt beginnen met iets simpels als;
console.log('Hello world!')
Stap 3: Compileer TypeScript-code naar JavaScript-code
Voer deze opdracht uit;
npx tsc
U kunt de build-map controleren (build/index.js) en u zult zien dat er een index.js is gegenereerd met deze uitvoer;
TypeScript is gecompileerd in JavaScript-code.
Stap 4: Voer de gecompileerde JavaScript-code uit
Onthoud dat TypeScript-code niet in browsers kan worden uitgevoerd. We zullen dus de code uitvoeren in index.js in de build-map. Voer deze opdracht uit;
node build/index.js
Dit zal de uitvoer zijn;
Stap 5: Configureer TypeScript om automatisch te compileren naar JavaScript-code
Het handmatig compileren van TypeScript-code wanneer u uw TypeScript-bestanden wijzigt, kan tijdverspilling zijn. U kunt ts-node installeren (voert TypeScript-code rechtstreeks uit zonder te wachten om te worden gecompileerd) en nodemon (controleert uw code op wijzigingen en start automatisch de server opnieuw op).
Voer deze opdracht uit;
npm install --save-dev ts-node nodemon
U kunt dan naar het bestand package.json gaan en dit script toevoegen;
"scripts": {
"start": "ts-node ./src/index.ts"
}
We kunnen een nieuw codeblok gebruiken voor demonstratiedoeleinden;
function sum (num1:number, num2:number, num3:number){
return num1 + num2 +num3;
}
console.log(sum(10,15,30))
Verwijder het bestand index.js (/build/index.js) en voer npm start uit.
Uw uitvoer zal vergelijkbaar zijn met deze;
som van 3 getallen
Configureer TypeScript Linting met eslint
Stap 1: Eslint installeren
Linting kan handig zijn als u codeconsistentie wilt behouden en fouten vóór runtime wilt opvangen. Installeer eslint met behulp van deze opdracht;
npm install --save-dev eslint
Stap 2: Eslint initialiseren
U kunt eslint initialiseren met behulp van dit commando;
npx eslint --init
Het initialisatieproces leidt u door verschillende stappen. Gebruik de volgende schermafbeelding om u te begeleiden;
Zodra het proces is voltooid, ziet u een bestand met de naam .eslintrc.js met een soortgelijke inhoud;
module.exports = {
env: {
browser: true,
es2021: true
},
extends: 'standard-with-typescript',
overrides: [
],
parserOptions: {
ecmaVersion: 'latest',
sourceType: 'module'
},
rules: {
}
}
Stap 3: Voer eslint uit
Voer deze opdracht uit om alle bestanden met de extensie .ts te controleren en te pluizen;
npx eslint . --ext .ts
Stap 4: werk package.json bij
Voeg een lintscript toe aan dit bestand voor automatische linting.
"scripts": {
"lint": "eslint . --ext .ts",
},
TypeScript met Node.js: praktische tips
- Houd TypeScript up-to-date: TypeScript-ontwikkelaars brengen altijd nieuwe versies uit. Zorg ervoor dat u de nieuwste versie op uw computer/projectmap hebt geïnstalleerd en profiteer van nieuwe functies en bugfixes.
- Strikte modus inschakelen: u kunt de veelvoorkomende programmeerfouten tijdens het compileren opvangen wanneer u de strikte modus inschakelt in het bestand tsconfig.json. Dit verkort uw foutopsporingstijd, wat leidt tot meer productiviteit.
- Strikte null-controles inschakelen: u kunt alle null- en ongedefinieerde fouten tijdens het compileren opvangen door strikte null-controles in te schakelen voor het bestand tsconfig.json.
- Gebruik een code-editor die TypeScript ondersteunt: er zijn heel veel code-editors. Het is een goede gewoonte om code-editors te kiezen, zoals VS Code, Sublime Text of Atom die TypeScript via plug-ins ondersteunen.
- Typen en interfaces gebruiken: Met typen en interfaces kunt u aangepaste typen definiëren die u in uw hele project kunt hergebruiken. Een dergelijke aanpak maakt uw code meer modulair en gemakkelijk te onderhouden.
Afsluiten
Je hebt nu de basisstructuur van een app gemaakt met TypeScript op Node.js. Je kunt nu de reguliere Node.js-pakketten gebruiken, maar schrijf je code nog steeds in TypeScript en geniet van alle extra functies die bij de laatste horen.
Als u net begint met TypeScript, zorg er dan voor dat u de verschillen tussen TypeScript en JavaScript begrijpt.
