Modul dalam TypeScript
Artikel ini menjelaskan modul dalam TypeScript.
YouTube Video
Modul dalam TypeScript
Modul dalam TypeScript adalah fitur penting untuk meningkatkan kegunaan ulang dan pemeliharaan kode. Seperti JavaScript, TypeScript juga didasarkan pada sistem modul ECMAScript 2015 (ES6), tetapi fitur utamanya adalah kemampuannya untuk memanfaatkan sistem tipe TypeScript.
Apa itu Modul?
Modul adalah sistem untuk mengelompokkan kode terkait dalam satu unit yang dapat diimpor dan digunakan kembali di file lain. Dalam TypeScript, setiap file memiliki cakupan sendiri untuk mengenkapsulasi kode, mencegahnya memengaruhi file lain. Ini membantu menghindari tabrakan kode dan memudahkan pemeliharaan.
Modul Internal dan Eksternal
- Modul Internal (Namespace): Metode definisi modul yang digunakan dalam TypeScript 1.5 dan sebelumnya, sekarang tidak lagi disarankan. Sekarang dianggap sebagai 'namespace.'.
- Modul Eksternal: Standar saat ini, berdasarkan sistem modul ES6. Bagian ini terutama menjelaskan modul eksternal.
Cara Mengekspor Modul
Saat membuat modul, ekspor diperlukan untuk memungkinkan akses dari luar. Dalam TypeScript, Anda dapat mengekspor nilai, fungsi, kelas, dll. menggunakan kata kunci export. Ada dua jenis ekspor utama.
Ekspor Bernama
Digunakan untuk melakukan banyak ekspor, memungkinkan pihak pengimpor memilih dan menggunakan yang spesifik.
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}Ekspor Default
Digunakan ketika Anda ingin seluruh modul memiliki satu ekspor default. Ekspor default diekspor tanpa nama, memungkinkan pihak pengimpor 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}Cara Mengimpor Modul
Untuk menggunakan modul, Anda mengimpor nilai, fungsi, kelas, dll. dari dalam modul menggunakan kata kunci import.
Impor Bernama
Ketika mengimpor elemen tertentu dari ekspor bernama, gunakan kurung kurawal {}.
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)}`);Impor Default
Ketika mengimpor ekspor default, Anda dapat menerimanya dengan nama apa saja.
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 Impor
Untuk menghindari bentrok nama atau memperpendek nama yang panjang, Anda dapat mengimpor 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)}`);Perbedaan Antara Modul dan Namespace
Namespace (namespace) adalah struktur modul internal yang digunakan pada awal TypeScript untuk mengelompokkan kode bersama. Namun, modul ES6 sekarang direkomendasikan, dan namespace jarang diperlukan.
Namespace dapat didefinisikan dalam file yang sama atau di beberapa file, dan karena dapat diperluas secara global, pengelolaan dependensi bisa menjadi sulit. Sebaliknya, modul memiliki cakupan terpisah per file dan memiliki dependensi yang jelas, menjadikannya metode yang lebih modern dan aman.
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, ada dua strategi untuk resolusi modul.
- Resolusi Modul Node: Metode resolusi standar yang digunakan dalam lingkungan Node.js yang menyelesaikan modul dengan mencari di folder
node_modules. - Resolusi Modul Klasik: Metode resolusi milik TypeScript yang melakukan pencarian lebih fleksibel, tetapi tidak sering digunakan saat ini.
Biasanya, resolusi modul Node digunakan dan diaktifkan secara default kecuali ditentukan lain di file konfigurasi.
Contoh Praktis
Akhirnya, sebuah contoh ditampilkan tentang penerapan dan penggunaan kembali fungsi komputasi 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 ampuh untuk mengatur kode, meningkatkan kegunaan kembali, dan meningkatkan pemeliharaan. Penggunaan modul eksternal berdasarkan modul ES6 sangat disarankan, dan menggunakan kata kunci export dan import memungkinkan ekspor dan impor modul dengan mudah.
Anda dapat mengikuti artikel di atas menggunakan Visual Studio Code di saluran YouTube kami. Silakan periksa juga saluran YouTube kami.