0Pricing
TypeScript Academy · Pelajaran

Anotasi Tipe JSDoc sebagai Penghubung

Tambahkan tipe ke file JS menggunakan JSDoc sebelum konversi.

Anotasi Tipe JSDoc sebagai Penghubung 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.

JSDoc sebagai Jembatan TypeScript

TypeScript dapat membaca anotasi tipe JSDoc dalam berkas JavaScript ketika checkJs: true diaktifkan. Dengan demikian, Anda dapat menambahkan tipe ke JS tanpa mengganti nama berkas.

/** @type {string} */
let name = "Alice"; // TypeScript checks this as string

@param dan @returns

Beri anotasi pada parameter fungsi dan tipe hasil menggunakan tag JSDoc.

/**
 * @param {string} name
 * @param {number} age
 * @returns {string}
 */
function greet(name, age) {
  return `${name} is ${age}`;
}

@typedef untuk Tipe Objek

Gunakan @typedef untuk mendefinisikan alias tipe yang dapat digunakan kembali dalam JSDoc.

/**
 * @typedef {Object} User
 * @property {string} id
 * @property {string} name
 * @property {boolean} isActive
 */

/** @type {User} */
const user = { id: "1", name: "Alice", isActive: true };

@template untuk Tipe Generik

Gunakan @template untuk menulis fungsi generik dalam JSDoc.

/**
 * @template T
 * @param {T[]} arr
 * @returns {T | undefined}
 */
function first(arr) {
  return arr[0];
}
// TypeScript infers: first<T>(arr: T[]): T | undefined

Mengimpor Tipe dari Berkas .ts

JSDoc mendukung @type {import("./types").User} untuk mengimpor tipe TypeScript ke dalam berkas JS.

/** @type {import("./types").User} */
const admin = { id: "admin", name: "Admin", isActive: true };

@ts-check untuk Pemeriksaan per Berkas

Tambahkan // @ts-check di bagian atas berkas JS untuk mengaktifkan pemeriksaan TypeScript hanya pada berkas tersebut, tanpa checkJs: true secara global.

// @ts-check
/** @type {number} */
const count = "oops"; // Error: string not assignable to number

@ts-ignore dan @ts-expect-error

Sembunyikan kesalahan tipe JSDoc tertentu dengan direktif sebaris tanpa menonaktifkan seluruh berkas.

// @ts-ignore
const x = badFunction(); // single error suppressed

// @ts-expect-error
const y = anotherBad(); // error expected here

Enum JSDoc

Simulasikan enum TypeScript dalam JSDoc menggunakan @enum.

/** @enum {string} */
const Direction = { Left: "left", Right: "right", Up: "up" };

Aser­si Tipe dalam JSDoc

Gunakan /** @type {SomeType} */ (expression) untuk asersi tipe JSDoc, yang setara dengan as SomeType milik TypeScript.

const el = /** @type {HTMLInputElement} */ (document.getElementById("input"));
el.value; // el: HTMLInputElement — typed

Kapan Beralih ke .ts

Anotasi JSDoc adalah jembatan, bukan tujuan akhir. Setelah sebuah berkas diberi anotasi sepenuhnya dan stabil, ganti namanya menjadi .ts dan hapus komentar tipe JSDoc demi sintaks TypeScript asli.

// Rename: utils.js → utils.ts
// Replace JSDoc: /** @param {string} x */ → (x: string)

Ringkasan: JSDoc sebagai Jembatan

Anotasi tipe JSDoc mengaktifkan pemeriksaan TypeScript dalam berkas JS tanpa mengganti namanya. Gunakan @type, @param, @typedef, dan @template untuk menambahkan keamanan tipe secara bertahap sebelum beralih ke TypeScript asli.

Pemeriksaan Singkat

Tag JSDoc mana yang mengaktifkan pemeriksaan TypeScript dalam satu berkas tanpa checkJs global?

Yang Anda Pelajari

Anotasi tipe JSDoc menjembatani JavaScript dan TypeScript: gunakan @type, @param, @typedef, dan @template untuk menambahkan tipe ke berkas JS. Aktifkan pemeriksaan per berkas dengan // @ts-check, lalu beralih ke TypeScript asli jika sudah siap.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Anotasi Tipe JSDoc sebagai Penghubung” gratis?

Ya — teks lengkap “Anotasi Tipe JSDoc sebagai Penghubung” 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 “Anotasi Tipe JSDoc sebagai Penghubung”?

Tambahkan tipe ke file JS menggunakan JSDoc sebelum konversi. 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 “Anotasi Tipe JSDoc sebagai Penghubung” 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. Memulai Migrasi: allowJs dan checkJs
  2. Anotasi Tipe JSDoc sebagai Penghubung
  3. Strategi Konversi File demi File
  4. Menangani Pustaka Pihak Ketiga Tanpa Tipe
← Kembali ke TypeScript Academy