Ana içeriğe geç

Vueyi TypeScript ile Kullanma

Vue'yi TypeScript ile Kullanma​

TypeScript gibi bir tip sistemi, derleme zamanında statik analiz ile birçok yaygın hatayı tespit edebilir. Bu, üretimde çalışma zamanı hatalarını azaltır ve büyük ölçekli uygulamalarda kodu daha güvenle yeniden düzenlememize olanak tanır. TypeScript ayrıca IDE'lerde tip tabanlı otomatik tamamlama aracılığıyla geliştirici ergonomisini artırır.

Vue, kendisi TypeScript ile yazılmıştır ve birinci sınıf TypeScript desteği sunar. Tüm resmi Vue paketleri, kutudan çıkar çıkmaz çalışması gereken toplu tip bildirimleri ile birlikte gelir.

Proje Ayarları​

create-vue, resmi proje iskeletleme aracı, Vite-tabanlı, TypeScript uyumlu bir Vue projesi oluşturma seçenekleri sunar.

Genel Bakış​

Vite tabanlı bir ayar ile, geliştirici sunucusu ve paketleyici sadece dönüştürme işlemi yapmaktadır ve herhangi bir tip kontrolü gerçekleştirmemektedir. Bu, Vite geliştirici sunucusunun TypeScript kullanırken bile hızını korumasını sağlar.

  • Geliştirme sırasında tip hataları hakkında anında geri bildirim almak için iyi bir IDE ayarı kullanmanızı öneririz.

  • SFC'ler kullanıyorsanız, komut satırı tip kontrolü ve tip bildirimleri oluşturma için vue-tsc yardımcı aracını kullanın. vue-tsc, TypeScript'in kendi komut satırı arayüzü olan tsc etrafında bir sargıdır. Çoğunlukla tsc ile aynı şekilde çalışır, ancak TypeScript dosyalarının yanı sıra Vue SFC'lerini de destekler. vue-tsc'yi Vite geliştirici sunucusuna paralel olarak izleme modunda çalıştırabilir veya kontrolleri ayrı bir iş parçacığında yürüten vite-plugin-checker gibi bir Vite eklentisi kullanabilirsiniz.

  • Vue CLI de TypeScript desteği sağlamaktadır, ancak artık önerilmemektedir. Aşağıdaki notlara bakın.

IDE Desteği​

bilgi

Visual Studio Code (VS Code), TypeScript için harika kutudan çıkar çıkmaz desteği nedeniyle güçlü bir şekilde önerilir.

  • Vue - Official (önceden Volar), Vue SFC'leri içerisinde TypeScript desteği sağlayan resmi VS Code uzantısıdır, bununla birlikte birçok başka harika özellik sunar.

    :::tip Vue - Official uzantısı, Vue 2 için önceki resmi VS Code uzantımız olan Vetur'u değiştirmektedir. Eğer şuan Vetur kuruluysa, onu Vue 3 projelerinde devre dışı bırakmayı unutmayın. :::

  • WebStorm da hem TypeScript hem de Vue için kutudan çıkar çıkmaz destek sunar. Diğer JetBrains IDE'leri de ya kutudan çıkar çıkmaz ya da ücretsiz bir eklenti aracılığıyla destekler. 2023.2 sürümünden itibaren WebStorm ve Vue Eklentisi, Vue Language Server için yerleşik destekle gelir. Vue servisinin, Ayarlar > Diller ve Çerçeveler > TypeScript > Vue altında tüm TypeScript sürümlerinde Volar entegrasyonunu kullanacak şekilde ayarlanabilir. Varsayılan olarak, 5.0 ve üzeri TypeScript sürümleri için Volar kullanılacaktır.

tsconfig.json'ı Yapılandırma​

create-vue aracılığıyla oluşturulan projeler, önceden yapılandırılmış tsconfig.json içermektedir. Temel yapılandırma, @vue/tsconfig paketinde soyutlanmıştır. Projede, farklı ortamlarda (örneğin, uygulama kodu ve test kodu, farklı global değişkenlere sahip olmalıdır) doğru tiplerin sağlanmasını sağlamak için Proje Referansları kullanıyoruz.

tsconfig.json'ı manuel olarak yapılandırırken, bazı dikkate değer seçenekler şunlardır:

Ayrıca bakın:

Vue CLI ve ts-loader Hakkında Not​

tehlike

Vue CLI gibi webpack tabanlı ayarlarda, modül dönüştürme hattı bağlamında, örneğin ts-loader ile tip kontrolü yapması yaygındır. Ancak bu temiz bir çözüm değildir çünkü tip sistemi, tip kontrollerini gerçekleştirmek için tüm modül grafiği hakkında bilgiye ihtiyaç duyar.

Bu, aşağıdaki sorunlara yol açar:

  • ts-loader yalnızca dönüştürme sonrası kodu tip kontrol edebilir. Bu, IDE'lerde veya vue-tsc'den görülen hatalarla örtüşmez; zira bu hatalar doğrudan kaynak koda geri döner.

  • Tip kontrolü yavaş olabilir. Kod dönüşümleri ile aynı iş parçacığında / süreçte gerçekleştirildiğinde, bu, tüm uygulamanın derleme hızını önemli ölçüde etkiler.

  • Zaten IDE'mizde ayrı bir süreçte çalışan bir tip kontrolümüz var, bu nedenle geliştirici deneyimini yavaşlatmanın maliyeti, iyi bir denge değildir.

Eğer şu anda Vue 3 + TypeScript'i Vue CLI aracılığıyla kullanıyorsanız, Vite'ye geçiş yapmanızı kuvvetle öneriyoruz. Ayrıca sadece dönüştürme işlemi yapan TS desteği etkinleştirmek için CLI seçenekleri üzerinde çalışıyoruz, böylelikle tip kontrolü için vue-tsc'ye geçiş yapabilirsiniz.

Genel Kullanım Notları​

defineComponent()​

TypeScript'in bileşen seçenekleri içindeki tipleri doğru bir şekilde çıkarmasını sağlamak için, bileşenleri defineComponent() ile tanımlamamız gerekiyor:

import { defineComponent } from 'vue'

export default defineComponent({
  // tip çıkarımı etkin
  props: {
    name: String,
    msg: { type: String, required: true }
  },
  data() {
    return {
      count: 1
    }
  },
  mounted() {
    this.name // tip: string | undefined
    this.msg // tip: string
    this.count // tip: number
  }
})

defineComponent() ayrıca `olmadan Composition API kullanırkensetup()`'a geçirilen props'ların çıkarımını destekler:

import { defineComponent } from 'vue'

export default defineComponent({
  // tip çıkarımı etkin
  props: {
    message: String
  },
  setup(props) {
    props.message // tip: string | undefined
  }
})

Ayrıca bakın:

ipucu

defineComponent() ayrıca düz JavaScript ile tanımlanan bileşenler için tip çıkarımını da etkinleştirir.

Tek Dosya Bileşenlerinde Kullanım​

SFC'lerde TypeScript kullanmak için, `etiketlerinelang="ts"özelliğini ekleyin.lang="ts"` mevcut olduğunda, tüm şablon ifadeleri daha sıkı tip kontrolünden faydalanır.

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  data() {
    return {
      count: 1
    }
  }
})
</script>

<template>
  <!-- tip kontrolü ve otomatik tamamlama etkin -->
  {{ count.toFixed(2) }}
</template>

lang="ts" ayrıca `` ile de kullanılabilir:

<script setup lang="ts">
// TypeScript etkin
import { ref } from 'vue'

const count = ref(1)
</script>

<template>
  <!-- tip kontrolü ve otomatik tamamlama etkin -->
  {{ count.toFixed(2) }}
</template>

Şablonlarda TypeScript​

ayrıca veya `` kullanıldığında bağlama ifadelerinde TypeScript'i destekler. Bu, şablon ifadelerinde tip dönüşümü yapmanız gerektiğinde kullanışlıdır.

İşte bir örnek:

<script setup lang="ts">
let x: string | number = 1
</script>

<template>
  <!-- hata çünkü x bir string olabilir -->
  {{ x.toFixed(2) }}
</template>

Bu, çevrimiçi bir tip dönüşümü ile aşılabilir:

<script setup lang="ts">
let x: string | number = 1
</script>

<template>
  {{ (x as number).toFixed(2) }}
</template>
ipucu

Eğer Vue CLI veya webpack tabanlı bir yapı kullanıyorsanız, şablon ifadelerinde TypeScript kullanmak için vue-loader@^16.8.0 gerekmektedir.

TSX ile Kullanım​

Vue, bileşenleri JSX / TSX ile yazmayı da destekler. Detaylar Render Fonksiyonu ve JSX kılavuzunda ele alınmaktadır.

Genel Bileşenler​

Genel bileşenlerin desteklendiği iki durum vardır:

  • SFC'lerde: `ilegeneric özelliği
  • Render fonksiyonu / JSX bileşenleri: defineComponent()'ın fonksiyon imzacı`

API'ye Özel Tarifler​

  • Composition API ile TS
  • Options API ile TS