Moduler i TypeScript
Denne artikkelen forklarer moduler i TypeScript.
YouTube Video
Moduler i TypeScript
Moduler i TypeScript er en viktig funksjon for å forbedre gjenbrukbarhet og vedlikeholdbarhet for kode. Som JavaScript er TypeScript også basert på ECMAScript 2015 (ES6)-modulsystemet, men en viktig funksjon er evnen til å utnytte TypeScripts typesystem.
Hva er moduler?
En modul er et system for å gruppere relatert kode i en enkelt enhet som kan importeres og gjenbrukes i andre filer. I TypeScript opprettes et omfang per fil for å kapsle inn koden, slik at det forhindres at den påvirker andre filer. Dette hjelper til med å unngå kodekollisjoner og gjør vedlikehold enklere.
Interne og eksterne moduler
- Interne moduler (navnerom): En moduldefineringsmetode brukt i TypeScript 1.5 og tidligere, anbefales ikke lenger. Det behandles nå som et 'navnerom'.
- Eksterne moduler: Den nåværende standarden, basert på ES6-modulsystemet. Denne delen forklarer hovedsakelig eksterne moduler.
Hvordan eksportere moduler
Når man lager moduler, er det nødvendig å eksportere for å gi tilgang fra utsiden. I TypeScript kan du eksportere verdier, funksjoner, klasser osv. ved å bruke nøkkelordet export. Det finnes hovedsakelig to typer eksport.
Navngitte eksporter
Brukes for å lage flere eksporter, slik at importen kan velge og bruke spesifikke.
1// mathUtils.ts
2export const pi: number = 3.14159;
3
4export function add(x: number, y: number): number {
5 return x + y;
6}
7
8export function subtract(x: number, y: number): number {
9 return x - y;
10}Standardeksporter
Brukes når du vil at hele modulen skal ha en enkelt standardeksport. Standardeksporter eksporteres uten et navn, som lar importen motta dem med hvilket som helst navn.
1// calculator.ts
2export default class Calculator {
3 add(x: number, y: number): number {
4 return x + y;
5 }
6
7 subtract(x: number, y: number): number {
8 return x - y;
9 }
10}Hvordan importere moduler
For å bruke moduler importerer du verdier, funksjoner, klasser osv. fra modulen ved hjelp av nøkkelordet import.
Navngitte importer
Når du importerer spesifikke elementer fra en navngitt eksport, bruker du krøllparenteser {}.
1// main.ts
2import { pi, add, subtract } from './mathUtils';
3
4console.log(`Value of pi: ${pi}`);
5console.log(`Addition: ${add(10, 5)}`);
6console.log(`Subtraction: ${subtract(10, 5)}`);Standardimporter
Når du importerer en standardeksport, kan du bruke hvilket som helst navn.
1// main.ts
2import Calculator from './calculator';
3
4const calculator = new Calculator();
5console.log(`Addition: ${calculator.add(10, 5)}`);
6console.log(`Subtraction: ${calculator.subtract(10, 5)}`);Importaliaser
For å unngå navnekonflikter eller forkorte lange navn, kan du importere med et alias.
1// main.ts
2import { add as addition, subtract as subtraction } from './mathUtils';
3
4console.log(`Addition: ${addition(10, 5)}`);
5console.log(`Subtraction: ${subtraction(10, 5)}`);Forskjellen mellom moduler og navneområder
Et navneområde (namespace) er en intern modulstruktur som ble brukt i tidlige versjoner av TypeScript for å gruppere kode sammen. Imidlertid anbefales nå ES6-moduler, og navneområder er sjelden nødvendige.
Navneområder kan defineres i samme fil eller på tvers av flere filer, og fordi de kan utvides globalt, kan administrering av avhengigheter bli vanskelig. Derimot har moduler separate områder per fil og klare avhengigheter, noe som gjør dem til en mer moderne og sikker metode.
1// Example of a namespace
2namespace Geometry {
3 export function calculateArea(radius: number): number {
4 return Math.PI * radius * radius;
5 }
6}
7
8// Can be used directly without importing the module (not recommended)
9const area: number = Geometry.calculateArea(5);
10console.log(`Area: ${area}`);TypeScript Moduloppløsning
I TypeScript finnes det to strategier for moduloppløsning.
- Node Moduloppløsning: Standardmetoden for oppløsning brukes i Node.js-miljøer og finner moduler ved å søke i
node_modules-mappen. - Klassisk Moduloppløsning: TypeScripts egen oppløsningsmetode som gir mer fleksible søk, men brukes sjelden i dag.
Vanligvis brukes Node moduloppløsning, og det er aktivert som standard med mindre det spesifiseres noe annet i konfigurasjonsfilen.
Praktisk eksempel
Til slutt vises et eksempel på implementering og gjenbruk av beregningsfunksjoner ved bruk av moduler.
mathUtils.ts
1export const pi: number = 3.14159;
2
3export function multiply(x: number, y: number): number {
4 return x * y;
5}
6
7export function divide(x: number, y: number): number {
8 if (y === 0) {
9 throw new Error("Cannot divide by zero");
10 }
11 return x / y;
12}calculator.ts
1import { multiply, divide } from './mathUtils';
2
3export default class Calculator {
4 multiplyNumbers(x: number, y: number): number {
5 return multiply(x, y);
6 }
7
8 divideNumbers(x: number, y: number): number {
9 return divide(x, y);
10 }
11}main.ts
1import Calculator from './calculator';
2
3const calculator = new Calculator();
4
5const result1: number = calculator.multiplyNumbers(10, 5);
6console.log(`Multiplication: ${result1}`);
7
8const result2: number = calculator.divideNumbers(10, 2);
9console.log(`Division: ${result2}`);Sammendrag
TypeScript-modulsystemet er et kraftig verktøy for å organisere kode, øke gjenbrukbarhet og forbedre vedlikeholdbarhet. Bruk av eksterne moduler basert på ES6-moduler anbefales, og bruk av nøkkelordene export og import gjør det enkelt å eksportere og importere moduler.
Du kan følge med på artikkelen ovenfor ved å bruke Visual Studio Code på vår YouTube-kanal. Vennligst sjekk ut YouTube-kanalen.