TypeScript Academy · Pelajaran

Ekspor Ulang dan File Barrel

Buat file indeks untuk menyederhanakan jalur import.

Pelajaran 2 dari 413 langkah

Ekspor Ulang dan File Barrel adalah pelajaran TypeScript Academy gratis di CoddyKit. Ini adalah pelajaran 2 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar TypeScript Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus TypeScript Academy mencakup 4 pelajaran total.

Selamat Datang

Berkas agregator (index.ts) mengumpulkan dan mengekspor ulang isi modul, sehingga membuat API publik sederhana untuk sebuah direktori dan jalur impor yang lebih rapi bagi pengguna.

Apa Itu Berkas Agregator

Berkas agregator adalah index.ts yang mengekspor ulang semua isi dari direktori yang sama. Pengguna mengimpor dari direktori tersebut, bukan dari berkas individual.

// src/models/index.ts (barrel)
export { User } from './user';
export { Product } from './product';
export { Order } from './order';

Menggunakan Berkas Agregator

Impor dari berkas agregator, bukan dari berkas individual, agar jalurnya lebih rapi.

// Before barrel:
import { User } from '../models/user';
import { Product } from '../models/product';

// After barrel:
import { User, Product } from '../models';

Ekspor Ulang dengan Karakter Pengganti `export *`

Ekspor ulang semua ekspor bernama dari sebuah modul dengan `export *`.

// index.ts
export * from './utils';
export * from './helpers';
export * from './validators';

Mengganti Nama Saat Mengekspor Ulang

Anda dapat mengganti nama ekspor saat mengekspornya ulang.

export { default as MyButton } from './Button';
export { Button as Btn } from './Button';

Ekspor Ulang Hanya Tipe

Ekspor ulang tipe tanpa memengaruhi waktu proses.

export type { User, UserRole } from './user.types';

Berkas Agregator untuk Modul Fitur

Folder fitur dalam aplikasi besar sering memiliki berkas agregator yang hanya mengekspos permukaan publik.

// features/auth/index.ts
export { AuthProvider } from './AuthProvider';
export { useAuth } from './useAuth';
export type { AuthUser } from './types';

Risiko Dependensi Sirkular

Berkas agregator dapat menimbulkan dependensi sirkular jika berkas dalam agregator yang sama saling mengimpor secara tidak langsung melalui index. Perhatikan hal ini.

Penghapusan Kode Tidak Terpakai dan Berkas Agregator

Pengemas modern seperti Webpack, Rollup, dan Vite menghapus ekspor ulang yang tidak digunakan. Hanya ekspor yang benar-benar digunakan yang disertakan dalam bundel.

Berkas Agregator Bertingkat vs Sederhana

Susun berkas agregator secara bertingkat: setiap subdirektori memiliki index.ts sendiri, lalu berkas agregator induk mengekspor ulang dari berkas agregator subdirektori.

// src/index.ts
export * from './models';
export * from './services';
export * from './utils';

Berkas Agregator dan Kinerja TypeScript

Berkas agregator yang sangat bertingkat dapat memperlambat kompilasi TypeScript. Untuk proyek besar, pertimbangkan meratakan strukturnya atau menggunakan alias jalur.

Pemeriksaan Singkat

Apa manfaat utama menggunakan berkas agregator (index.ts)?

Jawab di pelajaran interaktif

Rangkuman

Berkas agregator (index.ts) mengekspor ulang dari sebuah direktori sehingga membuat jalur impor yang rapi. Gunakan `export *` untuk ekspor ulang massal, `export type` hanya untuk tipe, dan waspadai risiko dependensi sirkular dalam proyek besar.

Gratis untuk memulai

Belajar TypeScript dengan tutor AI — gratis

Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.

Kursus: 101
Pelajaran: 352

Mulai belajar gratis Lihat kursus lengkapnya

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Ekspor Ulang dan File Barrel” gratis?

Ya — teks lengkap “Ekspor Ulang dan File Barrel” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus TypeScript Academy, upgrade ke CoddyKit PRO. Kursus TypeScript Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Ekspor Ulang dan File Barrel”?

Buat file indeks untuk menyederhanakan jalur import. Kamu berlatih TypeScript Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai TypeScript Academy?

Tidak diperlukan pengalaman sebelumnya. TypeScript Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 2 dari 4.

Berapa lama pelajaran “Ekspor Ulang dan File Barrel” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran TypeScript Academy ini?

Ya. Setiap pelajaran TypeScript Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke TypeScript Academy