Tabrakan penamaan terjadi ketika dua atau lebih komponen kode menggunakan nama yang sama untuk variabel, fungsi, atau kelas. Mereka umum dalam proyek besar di mana banyak orang bekerja pada basis kode yang sama. Mereka dapat mempersulit untuk menentukan komponen kode mana yang bertanggung jawab atas bug.
Dengan menggunakan ruang nama, Anda dapat mengatur dan mengelola kode Anda sehingga grup komponen terkait berada di bawah pengenal yang sama. Ini akan mengurangi risiko konflik penamaan.
Membuat Ruang Nama
Anda dapat membuat ruang nama di TypeScript menggunakan ruang nama kata kunci. Ikuti dengan pengenal untuk menamai namespace dan blok yang diapit oleh kurung kurawal. Sintaksnya mirip dengan yang Anda gunakan membuat kelas dalam JavaScript.
Misalnya:
ruang nama Contoh {}
Anda kemudian dapat mendeklarasikan anggota namespace—variabel, fungsi, dan kelas—di dalam blok namespace:
ruang nama Contoh {
eksporfungsiFoo(): ruang kosong{
menghibur.catatan("Ini adalah fungsi di dalam ruang nama Contoh");
}eksporkelas Batang {
Properti: rangkaian;konstruktor(Properti: rangkaian) {
ini.properti = properti;
}
}
eksporconst baz = "Ini adalah variabel namespace"
}
Pada contoh di atas, Foo, Batang, Dan baz adalah anggota dari Contoh ruang nama. Secara default, Anda hanya dapat mengakses anggota namespace di dalam namespace yang sama. Menggunakan ekspor kata kunci untuk membuat setiap anggota namespace dapat diakses di luarnya.
Anda dapat mengakses semua anggota namespace yang tersedia untuk umum dengan memanggil nama anggota namespace menggunakan notasi titik:
Contoh.foo(); // Ini adalah fungsi di dalam namespace Contohconst batang = baru Contoh. Batang("rangkaian");
menghibur.log (bar.properti); // rangkaian
menghibur.log (Contoh.baz); // Ini adalah variabel namespace
Ruang Nama Bersarang
TypeScript memungkinkan Anda untuk menyarangkan ruang nama di dalam ruang nama lain untuk membuat struktur hierarki untuk kode Anda. Nesting namespaces selanjutnya dapat mengurangi risiko penamaan tabrakan dengan mengelompokkan namespace terkait di bawah pengenal umum.
Misalnya:
ruang nama Contoh {
eksporconst properti_1 = "Foo";eksporruang nama Batang {
eksporconst printFoo = fungsi () {
menghibur.log (properti_1);
};
}eksporruang nama baz {
eksporkelas Foo {
Properti: rangkaian;
konstruktor(Properti: rangkaian) {
ini.properti = properti;
}
}
}
}
Blok kode di atas memberikan contoh namespace bersarang. Itu Contoh namespace adalah namespace tingkat atas, yang berisi Batang ruang nama dan Baz ruang nama.
Anda dapat mengakses properti di namespace bersarang menggunakan notasi titik yang mengikuti struktur hierarkis yang Anda buat.
Misalnya:
menghibur.log (Contoh.properti_1); // Foo
Contoh. Bar.printFoo() // Foo
const foo = baru Contoh. Baz. Foo("contoh")
Kode contoh ini mengakses setiap anggota namespace melalui parent namespace. Mengakses properti secara langsung, alih-alih melalui namespace induknya, akan menimbulkan kesalahan:
Contoh.printFoo()
// error TS2339: Properti 'printFoo' tidak ada pada tipe 'typeof Contoh'
Meskipun ruang nama bersarang dapat membantu Anda mengatur kode, ruang nama bersarang dalam dapat menghasilkan efek sebaliknya. Ruang nama yang sangat bersarang membuat kode Anda lebih sulit dibaca dan dipelihara.
Alias Namespace
Alias namespace adalah nama singkat yang diberikan kepada anggota namespace, yang membuatnya lebih mudah untuk dirujuk.
Anda dapat membuat alias namespace menggunakan impor kata kunci diikuti dengan nama yang ingin Anda tetapkan ke alias. Kemudian, tetapkan impor kata kunci dan nama alias ke anggota namespace.
Misalnya:
ruang nama Mobil {
eksporruang nama Tesla {
eksporkelas ModelX {
membuat(): Rangkaian {
kembali`Model X Dibuat`
}
}
}eksporruang nama Toyota {
eksporkelas Camry {}
}eksporruang nama mengarungi {
eksporkelas mustang {}
}
}// Membuat alias
impor tesla = Mobil. Tesla
const modelX = baru tesla. ModelX()
modelX.create() // Model X Dibuat
Contoh ini membuat sebuah alias untuk Mobil. Tesla ruang nama. Anda dapat menggunakan alias ini untuk mengakses properti dari Tesla namespace, seperti kelas ModelX, lebih mudah.
Menggunakan Ruang Nama di Banyak File
Untuk menggunakan namespace di file yang berbeda, Anda harus mengimpornya. Mengimpor ruang nama berbeda dengan mengimpor variabel, fungsi, kelas, dll. Tergantung pada proyek Anda sistem modul, Anda dapat mengimpornya menggunakan memerlukan atau impor kata kunci.
Namun, Anda hanya dapat mengimpor ruang nama menggunakan arahan garis miring tiga, yang merupakan komentar satu baris yang berisi tag XML.
Misalnya:
// main.ts
///
Contoh.foo()
Contoh ini menggunakan arahan triple slash di dalam a main.ts mengajukan. Direktif merujuk pada index.ts file, yang berisi Contoh ruang nama. Tanpa mengimpor, namespace hanya tersedia dalam file yang sama yang mendefinisikannya.
Setelah merujuk ke index.ts file, Anda dapat mengakses Contoh namespace dan anggotanya yang tersedia untuk umum. Misalnya, Anda dapat memanggil foo metode pada Contoh ruang nama.
Setelah Anda menggunakan banyak file, Anda harus memastikan bahwa TypeScript mengkompilasi dan memuat semua kode yang diperlukan. Anda dapat melakukannya dengan menggabungkan output dari kompiler TypeScript menggunakan outFile pilihan. Ini kemudian akan mengkompilasi semua file input menjadi satu file output JavaScript. Sintaks umum untuk menjalankan kompiler seperti ini adalah:
tsc --outFile
Mengganti dengan nama file JavaScript target Anda. Mengganti dengan nama file TypeScript yang berisi direktif triple-slash.
Misalnya:
tsc --outFile index.js main.ts
Perintah ini akan mengkompilasi isi dari main.ts file, bersama dengan semua file yang direferensikan oleh arahan triple-slash, ke dalam index.js mengajukan.
Atau, Anda dapat menentukan setiap file satu per satu:
tsc --outFile
Penting untuk dicatat bahwa arahan triple-slash hanya berlaku bila dideklarasikan di bagian atas file. Jika Anda mencoba menggunakannya di tempat lain, TypeScript akan memperlakukannya sebagai komentar satu baris biasa tanpa arti khusus.
Haruskah Anda Menggunakan Ruang Nama atau Modul?
Meskipun ruang nama tidak digunakan lagi, sering disarankan untuk mengatur dan mengelola kode Anda menggunakan modul ES6. Modul lebih mudah dipelihara dan dikelola dan Anda dapat mengaturnya di beberapa file.
Selain itu, Anda dapat menentukan hubungan antar modul dalam hal impor dan ekspor pada tingkat file. Ruang nama tidak dapat menentukan dependensinya.
Pada akhirnya, pilihan antara ruang nama dan modul akan bergantung pada kebutuhan dan persyaratan khusus proyek Anda, karena keduanya menawarkan cara yang berharga untuk mengatur dan mengelola kode di TypeScript.
