Modul dalam TypeScript
Artikel ini menerangkan modul dalam TypeScript.
YouTube Video
Modul dalam TypeScript
Modul dalam TypeScript adalah ciri penting untuk meningkatkan penggunaan semula dan penyelenggaraan kod. Seperti JavaScript, TypeScript juga berasaskan sistem modul ECMAScript 2015 (ES6), tetapi ciri utama adalah keupayaannya untuk memanfaatkan sistem jenis TypeScript.
Apakah Modul?
Modul adalah sistem untuk mengumpulkan kod berkaitan ke dalam satu unit yang boleh diimport dan digunakan semula dalam fail lain. Dalam TypeScript, satu skop dicipta bagi setiap fail untuk menutup kod, mencegahnya daripada mempengaruhi fail lain. Ini membantu mengelakkan perlanggaran kod dan menjadikan penyelenggaraan lebih mudah.
Modul Dalaman dan Luaran
- Modul Dalaman (Namespace): Kaedah definisi modul yang digunakan dalam TypeScript 1.5 dan sebelumnya, kini tidak digalakkan. Ia kini dianggap sebagai 'namespace.'.
- Modul Luaran: Piawaian semasa, berasaskan sistem modul ES6. Bahagian ini terutamanya menerangkan modul luaran.
Cara Mengeksport Modul
Apabila mencipta modul, pengeksportan diperlukan untuk membolehkan akses dari luar. Dalam TypeScript, anda boleh mengeksport nilai, fungsi, kelas, dan sebagainya menggunakan kata kunci export. Terdapat dua jenis eksport utama.
Eksport Bernama
Digunakan untuk membuat banyak eksport, membolehkan pihak pengimport memilih dan menggunakan yang tertentu.
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}Eksport Lalai
Digunakan apabila anda mahu keseluruhan modul mempunyai satu eksport lalai. Eksport lalai dieksport tanpa nama, membolehkan pihak pengimport menerimanya dengan nama apa pun.
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}Bagaimana Mengimport Modul
Untuk menggunakan modul, anda mengimport nilai, fungsi, kelas, dsb. dari dalam modul menggunakan kata kunci import.
Import Bernama
Apabila mengimport elemen tertentu daripada eksport bernama, gunakan kurungan keriting {}.
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)}`);Import Lalai
Apabila mengimport eksport lalai, anda boleh menerimanya dengan sebarang nama.
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)}`);Alias Import
Untuk mengelakkan pertembungan nama atau memendekkan nama panjang, anda boleh mengimport dengan 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)}`);Perbezaan Antara Modul dan Ruang Nama
Ruang nama (namespace) adalah struktur modul dalaman yang digunakan pada awal TypeScript untuk mengelompokkan kod bersama-sama. Namun, modul ES6 kini disyorkan, dan ruang nama jarang diperlukan.
Ruang nama boleh ditakrifkan dalam fail yang sama atau merentas beberapa fail, dan kerana ia boleh dikembangkan secara global, pengurusan kebergantungan boleh menjadi sukar. Sebaliknya, modul mempunyai skop berasingan bagi setiap fail dan mempunyai kebergantungan yang jelas, menjadikannya kaedah yang lebih moden dan selamat.
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}`);Resolusi Modul TypeScript
Dalam TypeScript, terdapat dua strategi untuk resolusi modul.
- Resolusi Modul Node: Kaedah resolusi standard yang digunakan dalam persekitaran Node.js yang menyelesaikan modul dengan mencari dalam folder
node_modules. - Resolusi Modul Klasik: Kaedah resolusi tersendiri TypeScript yang menjalankan carian lebih fleksibel, tetapi tidak begitu digunakan pada masa kini.
Biasanya, resolusi modul Node digunakan dan diaktifkan secara lalai melainkan dinyatakan sebaliknya dalam fail konfigurasi.
Contoh Praktikal
Akhirnya, satu contoh ditunjukkan tentang pelaksanaan dan penggunaan semula fungsi pengkomputan menggunakan modul.
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}`);Ringkasan
Sistem modul TypeScript adalah alat yang berkuasa untuk mengatur kod, meningkatkan penggunaan semula, dan meningkatkan penyelenggaraan. Penggunaan modul luaran berdasarkan modul ES6 disyorkan, dan menggunakan kata kunci export dan import membolehkan eksport dan import modul dengan mudah.
Anda boleh mengikuti artikel di atas menggunakan Visual Studio Code di saluran YouTube kami. Sila lihat juga saluran YouTube kami.