Vue Academy · Ders

Vue Projelerinde TypeScript Kurulumu

vite.config.ts, tsconfig.json, vue-tsc, SFC'lerde lang='ts' ve IDE TypeScript desteği.

Vue Projelerinde TypeScript Kurulumu, CoddyKit'te ücretsiz bir Vue Academy dersidir. Bu, 4 dersinin 1. 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.

Vue 3'te TypeScript

Vue 3, TypeScript ile yeniden yazılmıştır; bu nedenle mükemmel tür desteği sunar. İyi yapılandırılmış bir proje, hataları derleme zamanında yakalar ve .vue dosyalarında güçlü bir düzenleyici otomatik tamamlaması sağlar.

TS ile Proje İskeleti Oluşturma

En kolay başlangıç, TypeScript eklemek isteyip istemediğinizi soran ve tsconfig.json, vue-tsc ile uygun araçları yapılandıran create-vue kullanmaktır.

npm create vue@latest
# select "Add TypeScript? Yes"

tsconfig.json Temelleri

tsconfig.json derlemeyi denetler. Hataları yakalamak için en önemli ayar katı moddur.

{
  "compilerOptions": {
    "strict": true,
    "target": "ESNext",
    "module": "ESNext"
  }
}

Katı Mod Neden Önemlidir

strict: true, strictNullChecks, noImplicitAny ve daha fazlasını etkinleştirir. null/undefined durumlarını ele almanızı zorunlu kılar ve türü belirtilmemiş değerlerin fark edilmeden geçmesini önler.

Yol Takma Adları

@/ takma adı src klasörüne eşlenir; böylece içe aktarmalar, dosyanın derinliği ne olursa olsun temiz kalır. Bunu hem tsconfig.json içinde hem de paketleyicinizde yapılandırın.

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

Takma Adı Kullanma

Artık içe aktarmalar, göreli ../../ zincirleri yerine proje kökündeki modüllere başvurur.

import Button from '@/components/Button.vue'
import { useAuth } from '@/composables/useAuth'

SFC'lerde TypeScript

Bir Tek Dosyalı Bileşenin içinde TypeScript kullanmak için betik etiketine lang="ts" ekleyin. <script setup> ile bu, tür bilgili makroları kullanıma açar.

<script setup lang="ts">
const count: number = 0
</script>

SFC'lerin Türlerini Denetleme

Normal tsc derleyicisi .vue dosyalarını anlayamaz. Vue, şablonları ve betikleri birlikte tür denetiminden geçiren bir sarmalayıcı olan vue-tsc'yi sunar.

vue-tsc --noEmit

Bir Denetim Betiği Ekleme

CI'nin ve sizin türleri tek bir komutla doğrulayabilmeniz için package.json dosyasına bir betik ekleyin.

{
  "scripts": {
    "type-check": "vue-tsc --noEmit"
  }
}

Volar ile Düzenleyici Desteği

Volar (Vue - Official) VS Code uzantısı, .vue dosyalarının içinde TypeScript zekâsı sağlar: otomatik tamamlama, tanıma gitme ve şablon türü hataları. Çakışmaları önlemek için eski Vetur'u devre dışı bırakın.

Devralma Modu

Volar, yerleşik TS uzantısının yerini alarak hem .ts hem de .vue dosyalarını işleyebilir ve Devralma Modu'nda çalışabilir. Bu, büyük projelerde performansı ve tutarlılığı artırır.

Hızlı Sınama

TypeScript kurulumuyla ilgili bilginizi sınayın.

Özet

Vue'da TypeScript'i kurdunuz:

En güçlü denetimler için tsconfig.json içinde katı modu etkinleştirin.
@/* yol takma adını src'ye eşleyin.
SFC betiklerine lang="ts" ekleyin.
vue-tsc --noEmit ile tür denetimi yapın ve VS Code'da Volar uzantısını kullanın.

Sıkça Sorulan Sorular

“Vue Projelerinde TypeScript Kurulumu” dersi ücretsiz mi?

Evet — “Vue Projelerinde TypeScript Kurulumu” 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.

“Vue Projelerinde TypeScript Kurulumu” dersinde ne öğreneceğim?

vite.config.ts, tsconfig.json, vue-tsc, SFC'lerde lang='ts' ve IDE TypeScript desteği. 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 1. dersidir.

“Vue Projelerinde TypeScript Kurulumu” 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

Vue Projelerinde TypeScript Kurulumu
defineProps/defineEmits ile Türü Belirlenmiş Props ve Emit'ler
Composable'ları ve Ref'leri Türlendirme
Genel Amaçlı Vue Bileşenleri

← Vue Academy Sayfasına Dön