Vue Academy · Ders

Bileşen Kütüphaneleri için TypeScript Bildirimleri

vite-plugin-dts, .d.ts dosyaları oluşturma ve kütüphane kullanıcıları için bileşen props'larını türlendirme.

Bileşen Kütüphaneleri için TypeScript Bildirimleri, CoddyKit'te ücretsiz bir Vue 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, Vue Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Vue Academy kursu toplamda 4 dersten oluşur.

Tür Bildirimleri Neden Gereklidir

TypeScript kullanıcıları, bileşenleri ve özellikleri için otomatik tamamlama ve tür denetimi alabilmek amacıyla .d.ts dosyaları bekler. Yayımlanan bir kütüphane, oluşturulan bildirimleri JS'siyle birlikte sunmalıdır.

vite-plugin-dts

vite-plugin-dts, Vite derlemesi sırasında kaynak kodunuzdan .d.ts dosyaları oluşturur; buna .vue tek dosyalı bileşenlerin türleri de dahildir.

npm install -D vite-plugin-dts

Eklentiyi Ekleme

Eklentiler dizisine dts() ekleyin. Derlemeden sonra çalışarak bildirimleri dist içine oluşturur.

import dts from "vite-plugin-dts";

export default defineConfig({
  plugins: [vue(), dts()]
});

insertTypesEntry

insertTypesEntry seçeneği, tüm türlerinizi yeniden dışa aktaran tek bir index.d.ts giriş dosyası oluşturur ve böylece JS giriş noktanızla eşleşir.

dts({
  insertTypesEntry: true
})

Oluşturulan d.ts Dosyaları

Derlemeden sonra dist, kaynak yapınızı yansıtan .d.ts dosyalarını ve birleştirilmiş giriş bildirimini içerir. Bunlar bileşen özelliklerini, yayılan olayları ve dışa aktarımları açıklar.

// dist/index.d.ts
export { MyButton } from "./MyButton.vue";
// dist/MyButton.vue.d.ts describes its props

package.json Türler Alanı

TypeScript'in kütüphanenizin türlerini çözümleyebilmesi için kullanıcıları giriş bildirimine types (veya typings) alanıyla yönlendirin.

{
  "types": "./dist/index.d.ts"
}

Dışa Aktarımlar Haritasındaki Türler

Modern paketler, alt yol içe aktarmalarının doğru şekilde çözümlenmesi için türleri her giriş noktası bazında exports haritasında da sunar.

{
  "exports": {
    ".": {
      "types": "./dist/index.d.ts",
      "import": "./dist/my-ui-lib.es.js"
    }
  }
}

Genel Bileşenler için Otomatik Tamamlama

Kullanıcılar bileşenlerinizi genel olarak kaydettiğinde, şablonlarda otomatik tamamlama ve özellik denetimi sağlamak için TypeScript bunların GlobalComponents arayüzünde bildirilmesine ihtiyaç duyar.

GlobalComponents'ı Genişletme

Bileşenlerinizi vue'nun GlobalComponents arayüzüne ekleyen bir modül genişletmesi sunun. Türlerinize başvuran kullanıcılar şablonlarda IntelliSense alır.

// global.d.ts
import MyButton from "./MyButton.vue";

declare module "vue" {
  export interface GlobalComponents {
    MyButton: typeof MyButton;
  }
}
export {};

Bileşen Özelliklerini Türlendirme

Oluşturulan bildirimin kullanıcılara doğru özellik türlerini taşıması için defineProps işlevini bir TypeScript türüyle kullanın.

// MyButton.vue <script setup lang="ts">
defineProps<{
  label: string;
  disabled?: boolean;
}>();

Türleri Doğrulama

Yayımlamadan önce, bildirimlerin doğru çözümlendiğini ve özelliklerin denetlendiğini doğrulamak için örnek bir kullanıcı uygulamasında tsc --noEmit çalıştırın (veya attw/are-the-types-wrong gibi bir araç kullanın).

npx tsc --noEmit

Hızlı Kontrol

GlobalComponents genişletmesi kütüphaneyi kullananlara ne sağlar?

Özet

insertTypesEntry ile birlikte vite-plugin-dts kullanarak .d.ts dosyaları oluşturun; package.json'daki types alanını (ve exports haritasını) giriş bildirimine yönlendirin ve kullanıcıların şablonlarda otomatik tamamlama alması için bir GlobalComponents genişletmesi sunun. Özellikleri defineProps ile türlendirin ve tsc --noEmit ile doğrulayın.

Sıkça Sorulan Sorular

“Bileşen Kütüphaneleri için TypeScript Bildirimleri” dersi ücretsiz mi?

Evet — “Bileşen Kütüphaneleri için TypeScript Bildirimleri” 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 Vue Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Vue Academy kursu toplamda 4 dersten oluşur.

“Bileşen Kütüphaneleri için TypeScript Bildirimleri” dersinde ne öğreneceğim?

vite-plugin-dts, .d.ts dosyaları oluşturma ve kütüphane kullanıcıları için bileşen props'larını türlendirme. Vue 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.

Vue Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Vue 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.

“Bileşen Kütüphaneleri için TypeScript Bildirimleri” 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 Vue Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Vue 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

Vite Kütüphane Modu Yapılandırması
Bileşen Kütüphaneleri için TypeScript Bildirimleri
Ağaç Sarsma ve Otomatik İçe Aktarma
npm'ye Yayınlama ve Anlamsal Sürümleme

← Vue Academy Sayfasına Dön