TypeScript Academy · Pelajaran

reflect-metadata dan Jenis Design

Ambil jenis parameter dan properti saat runtime.

Pelajaran 3 dari 413 langkah

reflect-metadata dan Jenis Design adalah pelajaran TypeScript Academy gratis di CoddyKit. Ini adalah pelajaran 3 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.

metadata-refleksi dan Tipe Desain

Sebelum metadata distandardisasi, TypeScript dapat memancarkan informasi tipe waktu desain saat runtime melalui pustaka metadata-refleksi dan flag kompilator emitDecoratorMetadata. Pelajaran ini membahas mekanisme lama yang masih banyak digunakan tersebut.

Mengaktifkan Fitur

Dua hal diperlukan: aktifkan opsi kompilator dan impor pustaka tersebut sekali di titik masuk program.

// tsconfig.json
// {
//   "compilerOptions": {
//     "experimentalDecorators": true,
//     "emitDecoratorMetadata": true
//   }
// }

import "reflect-metadata";

Apa yang Dipancarkan

Dengan emitDecoratorMetadata, kompilator memancarkan tiga kunci untuk anggota yang didekorasi: design:type, design:paramtypes, dan design:returntype. Nilainya adalah fungsi konstruktor (misalnya String, Number).

Membaca design:type

Untuk properti yang didekorasi, Reflect.getMetadata("design:type", target, key) mengembalikan konstruktor tipe properti tersebut.

import "reflect-metadata";

function track(target: any, key: string) {
  const t = Reflect.getMetadata("design:type", target, key);
  console.log(key, "->", t.name); // e.g. "name -> String"
}

class Person {
  @track name!: string;
  @track age!: number;
}

Membaca design:paramtypes

Pada konstruktor atau metode, design:paramtypes merupakan larik konstruktor tipe parameter dan menjadi dasar injeksi dependensi.

function injectable(target: any) {
  const params = Reflect.getMetadata("design:paramtypes", target);
  console.log(params.map((p: any) => p.name)); // ["Database", "Logger"]
}

@injectable
class Service {
  constructor(private db: Database, private log: Logger) {}
}

Keterbatasan Tipe yang Dipancarkan

Hanya tipe sederhana yang dapat direpresentasikan saat runtime yang bertahan. Antarmuka, gabungan, dan generik berubah menjadi Object karena tidak memiliki konstruktor saat runtime. Tipe desain hanyalah perkiraan, bukan tipe TS secara lengkap.

Metadata Kustom dengan Refleksi

Anda juga dapat mendefinisikan kunci metadata sendiri dengan Reflect.defineMetadata, secara terpisah dari tipe desain.

import "reflect-metadata";

function required(target: any, key: string) {
  Reflect.defineMetadata("required", true, target, key);
}

function isRequired(target: any, key: string) {
  return Reflect.getMetadata("required", target, key) === true;
}

Tempat Penggunaannya

Mekanisme ini mendukung banyak kerangka kerja mapan (NestJS, TypeORM, dan validator kelas). Kerangka kerja tersebut membaca design:type dan design:paramtypes untuk menghubungkan dependensi dan memvalidasi nilai tanpa Anda perlu menuliskan ulang tipe.

metadata-refleksi dibandingkan Metadata Standar

API Symbol.metadata yang baru merupakan bagian dari bahasa dan tidak memancarkan tipe desain. reflect-metadata secara khusus menyediakan informasi tipe, tetapi terikat pada mode dekorator eksperimental. Pilih satu model untuk setiap proyek.

Urutan Impor Penting

import "reflect-metadata" harus dijalankan sekali, sebelum kelas apa pun yang didekorasi dievaluasi, karena kode tersebut menambal objek global Reflect dengan fungsi metadata. Impor kode tersebut di bagian paling atas berkas titik masuk Anda.

Mengapa Ini Penting

Pemancaran tipe desain memungkinkan kerangka kerja menjembatani kesenjangan antara tipe waktu kompilasi dan perilaku saat runtime, yang menjadi pendukung utama DI dan validasi yang praktis. Memahami keterbatasannya (tanpa antarmuka dan generik) mencegah hasil Object yang mengejutkan.

Pemeriksaan Cepat

Uji pemahaman Anda tentang metadata-refleksi.

Rangkuman

Dengan experimentalDecorators + emitDecoratorMetadata dan import "reflect-metadata" di awal, kompilator memancarkan design:type dan design:paramtypes sebagai konstruktor saat runtime. Kerangka kerja membacanya untuk DI dan validasi, meskipun antarmuka, gabungan, dan generik berubah menjadi Object.

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

Pertanyaan yang Sering Diajukan

Apakah pelajaran “reflect-metadata dan Jenis Design” gratis?

Ya — teks lengkap “reflect-metadata dan Jenis Design” 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 “reflect-metadata dan Jenis Design”?

Ambil jenis parameter dan properti saat runtime. 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 3 dari 4.

Berapa lama pelajaran “reflect-metadata dan Jenis Design” 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

  1. Penjelasan Dekorator Tahap 3
  2. Metadata Dekorator
  3. reflect-metadata dan Jenis Design
  4. Membangun Kerangka Kerja Dekorator
← Kembali ke TypeScript Academy