Köprü Olarak JSDoc Tür Açıklamaları
Dönüştürmeden önce JSDoc kullanarak JS dosyalarına türler ekleyin
Köprü Olarak JSDoc Tür Açıklamaları, CoddyKit'te ücretsiz bir TypeScript Academy dersidir. Bu, 4 dersinin 2. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, TypeScript Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. TypeScript Academy kursu toplamda 4 dersten oluşur.
TypeScript'e Köprü Olarak JSDoc
checkJs: true etkinleştirildiğinde TypeScript, JavaScript dosyalarındaki JSDoc tür ek açıklamalarını okuyabilir. Bu sayede dosyaların adını değiştirmeden JS koduna türler ekleyebilirsiniz.
/** @type {string} */
let name = "Alice"; // TypeScript checks this as string@param ve @returns
JSDoc etiketlerini kullanarak işlev parametrelerine ve dönüş türlerine ek açıklama ekleyin.
/**
* @param {string} name
* @param {number} age
* @returns {string}
*/
function greet(name, age) {
return `${name} is ${age}`;
}Nesne Türleri için @typedef
JSDoc'ta yeniden kullanılabilir tür takma adları tanımlamak için @typedef kullanın.
/**
* @typedef {Object} User
* @property {string} id
* @property {string} name
* @property {boolean} isActive
*/
/** @type {User} */
const user = { id: "1", name: "Alice", isActive: true };Jenerikler için @template
JSDoc'ta jenerik işlevler yazmak için @template kullanın.
/**
* @template T
* @param {T[]} arr
* @returns {T | undefined}
*/
function first(arr) {
return arr[0];
}
// TypeScript infers: first<T>(arr: T[]): T | undefined.ts Dosyalarından Türleri İçe Aktarma
JSDoc, TypeScript türlerini JS dosyalarına aktarmak için @type {import("./types").User} kullanımını destekler.
/** @type {import("./types").User} */
const admin = { id: "admin", name: "Admin", isActive: true };Dosya Başına Denetim için @ts-check
checkJs: true değerini genel olarak etkinleştirmeden yalnızca belirli bir JS dosyası için TypeScript denetimini etkinleştirmek üzere dosyanın en üstüne // @ts-check ekleyin.
// @ts-check
/** @type {number} */
const count = "oops"; // Error: string not assignable to number@ts-ignore ve @ts-expect-error
Tüm dosyayı devre dışı bırakmadan satır içi yönergelerle belirli JSDoc tür hatalarını bastırın.
// @ts-ignore
const x = badFunction(); // single error suppressed
// @ts-expect-error
const y = anotherBad(); // error expected hereJSDoc Enümerasyonları
@enum kullanarak JSDoc'ta TypeScript enümerasyonlarını benzetin.
/** @enum {string} */
const Direction = { Left: "left", Right: "right", Up: "up" };JSDoc'ta Tür İddiaları
TypeScript'teki as SomeType ifadesine eşdeğer JSDoc tür iddiaları için /** @type {SomeType} */ (expression) kullanın.
const el = /** @type {HTMLInputElement} */ (document.getElementById("input"));
el.value; // el: HTMLInputElement — typed.ts'ye Ne Zaman Geçilmeli
JSDoc ek açıklamaları bir köprüdür, varış noktası değil. Bir dosyaya tüm ek açıklamalar eklendiğinde ve dosya kararlı hâle geldiğinde dosyanın adını .ts olarak değiştirin ve JSDoc tür yorumlarını kaldırarak yerel TypeScript söz dizimini kullanın.
// Rename: utils.js → utils.ts
// Replace JSDoc: /** @param {string} x */ → (x: string)Özet: Köprü Olarak JSDoc
JSDoc tür ek açıklamaları, dosyaların adını değiştirmeden JS dosyalarında TypeScript denetimini etkinleştirir. Yerel TypeScript'e geçmeden önce kademeli olarak tür güvenliği eklemek için @type, @param, @typedef ve @template kullanın.
Hızlı Kontrol
Genel checkJs kullanmadan tek bir dosyada TypeScript denetimini hangi JSDoc etiketi etkinleştirir?
Öğrendikleriniz
JSDoc tür ek açıklamaları JavaScript ile TypeScript arasında köprü kurar: JS dosyalarına türler eklemek için @type, @param, @typedef ve @template kullanın. // @ts-check ile dosya başına denetimi etkinleştirin, ardından hazır olduğunuzda yerel TypeScript'e dönüştürün.
Sıkça Sorulan Sorular
“Köprü Olarak JSDoc Tür Açıklamaları” dersi ücretsiz mi?
Evet — “Köprü Olarak JSDoc Tür Açıklamaları” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve TypeScript Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. TypeScript Academy kursu toplamda 4 dersten oluşur.
“Köprü Olarak JSDoc Tür Açıklamaları” dersinde ne öğreneceğim?
Dönüştürmeden önce JSDoc kullanarak JS dosyalarına türler ekleyin TypeScript Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
TypeScript Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te TypeScript Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 2. dersidir.
“Köprü Olarak JSDoc Tür Açıklamaları” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu TypeScript Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her TypeScript Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- Geçişi Başlatma: allowJs ve checkJs
- Köprü Olarak JSDoc Tür Açıklamaları
- Dosya Dosya Dönüştürme Stratejisi
- Türlendirilmemiş Üçüncü Taraf Kitaplıklarını Yönetme