Mga Module sa TypeScript
Ipinaliliwanag ng artikulong ito ang mga module sa TypeScript.
YouTube Video
Mga Module sa TypeScript
Ang mga module sa TypeScript ay mahalagang tampok para mapahusay ang muling paggamit at pagpapanatili ng code. Katulad ng JavaScript, ang TypeScript ay batay din sa sistema ng module ng ECMAScript 2015 (ES6), ngunit isang susi nito ay ang kakayahang gamitin ang sistema ng type ng TypeScript.
Ano ang Mga Module?
Ang isang module ay isang sistema para pagsama-samahin ang kaugnay na code sa isang unit na maaaring i-import at muling gamitin sa ibang mga file. Sa TypeScript, ang bawat file ay lumikha ng saklaw upang ma-encapsulate ang code, pinipigilan nitong maapektuhan ang ibang mga file. Nakakatulong ito upang maiwasan ang mga sagasaan sa code at gawing mas madali ang pagpapanatili.
Mga Internal at External na Module
- Mga Internal Module (Namespaces): Isang paraan ng pagtukoy sa mga module na ginamit sa TypeScript 1.5 at mas maaga, na ngayon ay hindi na inirerekomenda. Ito ngayon ay itinuturing na isang 'namespace.'.
- Mga External Module: Ang kasalukuyang pamantayan, batay sa sistema ng module ng ES6. Ang seksyong ito ay pangunahing nagpapaliwanag ng mga panlabas na module.
Paano Mag-export ng Mga Module
Kapag gumagawa ng mga module, kinakailangan ang pag-export upang payagan ang access mula sa labas. Sa TypeScript, maaari kang mag-export ng mga value, function, klase, at iba pa gamit ang salitang susi na export. Mayroong pangunahing dalawang uri ng mga export.
Pangalanang Export
Ginagamit para gumawa ng maramihang export, na nagpapahintulot sa import side na pumili at gumamit ng partikular na mga ito.
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}Default na Export
Ginagamit kapag gusto mong magkaroon ng isang default export ang buong module. Ang mga default export ay ina-export nang walang pangalan, na nagpapahintulot sa import side na kunin ang mga ito sa anumang pangalan.
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}Paano Mag-import ng mga Module
Upang magamit ang mga module, mag-iimport ka ng mga halaga, mga function, mga klase, atbp. mula sa loob ng module gamit ang salitang import.
Pangalanang Mga Import
Kapag nag-iimport ng partikular na mga elemento mula sa isang pinangalanang export, gumamit ng mga kulot na bracket {}.
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)}`);Default na Mga Import
Kapag nag-iimport ng isang default na export, maaari mo itong pangalanan ng kahit anong gusto mong pangalan.
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)}`);Mga Import Alias
Upang maiwasan ang banggaan sa pangalan o paikliin ang mahahabang pangalan, maaari kang mag-import gamit ang isang 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)}`);Pagkakaiba sa pagitan ng Mga Module at Mga Namespace
Ang namespace (namespace) ay isang panloob na istruktura ng module na ginagamit sa naunang TypeScript upang pagsama-samahin ang code. Gayunpaman, inirerekumenda na ang ES6 modules ngayon, at bihira nang kinakailangan ang namespaces.
Ang mga namespace ay maaaring tukuyin sa parehong file o sa maraming mga file, at dahil maaari silang global na palawakin, maaaring maging mahirap ang pamamahala ng mga dependency. Sa kabilang banda, ang mga module ay may magkakahiwalay na scope kada file at may malinaw na mga dependency, na ginagawang mas moderno at mas ligtas na paraan.
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}`);Pagtukoy ng Module sa TypeScript
Sa TypeScript, mayroong dalawang estratehiya para sa pagtukoy ng mga module.
- Node Module Resolution: Ang karaniwang paraan ng pagtukoy na ginagamit sa mga Node.js na kapaligiran na naghahanap ng mga module sa loob ng folder na
node_modules. - Classic Module Resolution: Ang sariling paraan ng TypeScript sa pagtukoy ng mga module na mas flexible sa paghahanap, ngunit hindi na karaniwang ginagamit sa kasalukuyan.
Karaniwan, ang Node module resolution ay ginagamit at ito ay nakatakda bilang default maliban kung may ibang itinakda sa configuration file.
Halimbawa ng Praktikal
Sa wakas, ipinapakita ang isang halimbawa ng pag-implementa at muling paggamit ng mga computational function gamit ang mga module.
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}`);Buod
Ang TypeScript na sistema ng module ay makapangyarihang kasangkapan para sa pag-oorganisa ng code, pagpapabuti ng reusability, at pagpapataas ng maintainability. Inirerekumenda ang paggamit ng panlabas na mga module na batay sa ES6 modules, at ang paggamit ng export at import na mga keyword ay nagpapadali sa pag-export at pag-import ng mga module.
Maaari mong sundan ang artikulo sa itaas gamit ang Visual Studio Code sa aming YouTube channel. Paki-check din ang aming YouTube channel.