{"id":36716,"date":"2025-12-22T01:41:00","date_gmt":"2025-12-21T22:41:00","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/?p=36716"},"modified":"2025-12-22T01:41:00","modified_gmt":"2025-12-21T22:41:00","slug":"vue-js-ve-typescript-ile-sinif-tabanli-bilesenler-yazma-rehberi","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/vue-js-ve-typescript-ile-sinif-tabanli-bilesenler-yazma-rehberi\/","title":{"rendered":"Vue.js ve TypeScript ile S\u0131n\u0131f Tabanl\u0131 Bile\u015fenler Yazma Rehberi"},"content":{"rendered":"

<\/p>\n

Vue.js ve TypeScript ile S\u0131n\u0131f Tabanl\u0131 Bile\u015fenler Yazma Rehberi<\/h2>\n
Vue.js, kullan\u0131c\u0131 aray\u00fczleri olu\u015fturmak i\u00e7in a\u015famal\u0131 olarak benimsenebilen pop\u00fcler bir JavaScript \u00e7er\u00e7evesidir. Geleneksel olarak, Vue bile\u015fenleri Options API (se\u00e7enekler API’si) kullan\u0131larak tan\u0131mlan\u0131r; bu yakla\u015f\u0131m, bile\u015fenin veri, metotlar, hesaplanm\u0131\u015f \u00f6zellikler ve ya\u015fam d\u00f6ng\u00fcs\u00fc kancalar\u0131n\u0131 ayr\u0131 ayr\u0131 nesne \u00f6zellikleri olarak d\u00fczenler. Vue 3 ile birlikte tan\u0131t\u0131lan Composition API (bile\u015fim API’si) ise, daha esnek ve yeniden kullan\u0131labilir mant\u0131k organizasyonu sa\u011flayarak geli\u015ftiricilere farkl\u0131 bir alternatif sunmu\u015ftur. Ancak, \u00f6zellikle C#, Java, Angular veya React’\u0131n s\u0131n\u0131f tabanl\u0131 bile\u015fen yakla\u015f\u0131mlar\u0131ndan gelen geli\u015ftiriciler i\u00e7in, nesne y\u00f6nelimli programlama (OOP) ilkelerine daha yak\u0131n bir yol olan s\u0131n\u0131f tabanl\u0131 bile\u015fenler yazmak cazip olabilir.<\/p>\n
Bu makale, Vue.js projelerinizde TypeScript’in g\u00fc\u00e7l\u00fc tip sistemiyle birlikte s\u0131n\u0131f tabanl\u0131 bile\u015fenleri nas\u0131l kullanaca\u011f\u0131n\u0131z\u0131 ayr\u0131nt\u0131l\u0131 olarak a\u00e7\u0131klayacakt\u0131r. vue-class-component<\/code> ve vue-property-decorator<\/code> gibi yard\u0131mc\u0131 k\u00fct\u00fcphaneler arac\u0131l\u0131\u011f\u0131yla, tan\u0131d\u0131k bir s\u0131n\u0131f yap\u0131s\u0131 i\u00e7inde Vue’nun reaktifli\u011fini ve bile\u015fen \u00f6zelliklerini nas\u0131l y\u00f6netece\u011finizi \u00f6\u011freneceksiniz. Bu yakla\u015f\u0131m, \u00f6zellikle b\u00fcy\u00fck ve karma\u015f\u0131k bile\u015fenlerde kodun okunabilirli\u011fini, bak\u0131m\u0131n\u0131 ve tip g\u00fcvenli\u011fini art\u0131rman\u0131za yard\u0131mc\u0131 olabilir.<\/p>\n

Neden S\u0131n\u0131f Tabanl\u0131 Bile\u015fenler?<\/h3>\nVue’nun Options API’si ve Composition API’si \u00e7o\u011fu senaryo i\u00e7in harika \u00e7\u00f6z\u00fcmler sunsa da, s\u0131n\u0131f tabanl\u0131 bile\u015fenlerin kendine \u00f6zg\u00fc avantajlar\u0131 vard\u0131r:<\/p>\n
*   OOP Geli\u015ftiricileri \u0130\u00e7in Tan\u0131d\u0131kl\u0131k:<\/strong> Nesne y\u00f6nelimli programlama ge\u00e7mi\u015fi olan geli\u015ftiriciler (\u00f6rne\u011fin C#, Java, Angular veya React s\u0131n\u0131f bile\u015fenleri), class<\/code> anahtar kelimesi, kal\u0131t\u0131m ve metod tan\u0131mlamalar\u0131 gibi kavramlara a\u015finad\u0131r. S\u0131n\u0131f tabanl\u0131 bile\u015fenler, bu geli\u015ftiricilerin Vue ekosistemine daha h\u0131zl\u0131 adapte olmalar\u0131n\u0131 sa\u011flar.
\n*   TypeScript ile G\u00fc\u00e7l\u00fc Tip Deste\u011fi:<\/strong> TypeScript, JavaScript’e tip g\u00fcvenli\u011fi getiren bir \u00fcst k\u00fcmedir. S\u0131n\u0131f tabanl\u0131 bile\u015fenler, TypeScript’in sundu\u011fu g\u00fc\u00e7l\u00fc tip denetimi ve otomatik tamamlama \u00f6zelliklerini do\u011fal bir \u015fekilde entegre eder. S\u0131n\u0131f \u00f6zellikleri do\u011frudan tiplendirilebilir, bu da geli\u015ftirme s\u00fcrecinde hatalar\u0131 erken yakalamaya ve daha sa\u011flam kod yazmaya yard\u0131mc\u0131 olur.
\n*   Daha \u0130yi Kod Organizasyonu:<\/strong> S\u0131n\u0131flar, ilgili veri, metotlar ve ya\u015fam d\u00f6ng\u00fcs\u00fc kancalar\u0131n\u0131 tek bir yap\u0131da gruplamak i\u00e7in do\u011fal bir mekanizma sunar. Bu, \u00f6zellikle b\u00fcy\u00fck bile\u015fenlerde kodun daha d\u00fczenli ve anla\u015f\u0131l\u0131r olmas\u0131n\u0131 sa\u011flayabilir.
\n*   Kal\u0131t\u0131m ve Mixin Potansiyeli:<\/strong> S\u0131n\u0131f yap\u0131s\u0131, bile\u015fenler aras\u0131nda kal\u0131t\u0131m veya mixin’ler (kar\u0131\u015f\u0131mlar) arac\u0131l\u0131\u011f\u0131yla ortak mant\u0131\u011f\u0131 payla\u015fma imkan\u0131 sunar. Bu, kod tekrar\u0131n\u0131 azaltmaya ve yeniden kullan\u0131labilirli\u011fi art\u0131rmaya yard\u0131mc\u0131 olabilir. Ancak, Vue 3’\u00fcn Composition API’si genellikle bu t\u00fcr yeniden kullan\u0131labilir mant\u0131k i\u00e7in daha modern ve esnek bir yakla\u015f\u0131m olarak kabul edilir.
\n*   Dekorat\u00f6rlerin G\u00fcc\u00fc:<\/strong> vue-property-decorator<\/code> gibi k\u00fct\u00fcphaneler, @Prop<\/code>, @Watch<\/code>, @Emit<\/code> gibi dekorat\u00f6rler kullanarak Vue’ya \u00f6zg\u00fc \u00f6zellikleri (prop’lar, izleyiciler, olaylar) s\u0131n\u0131f \u00f6zelliklerine ve metotlar\u0131na do\u011frudan eklemeyi m\u00fcmk\u00fcn k\u0131lar. Bu, kodun daha deklaratif ve \u00f6zl\u00fc olmas\u0131n\u0131 sa\u011flar.<\/p>\n
Bu avantajlar, \u00f6zellikle b\u00fcy\u00fck \u00f6l\u00e7ekli uygulamalarda veya belirli geli\u015ftirici tercihleri olan ekiplerde s\u0131n\u0131f tabanl\u0131 bile\u015fenlerin tercih edilmesine yol a\u00e7abilir.<\/p>\n
\u00d6n Gereksinimler<\/h3>\nBu makaledeki \u00f6rnekleri takip edebilmek i\u00e7in a\u015fa\u011f\u0131daki temel bilgilere ve ara\u00e7lara sahip olman\u0131z gerekmektedir:<\/p>\n
*   Temel Vue.js Bilgisi:<\/strong> Vue bile\u015fenlerinin nas\u0131l \u00e7al\u0131\u015ft\u0131\u011f\u0131na dair genel bir anlay\u0131\u015f.
\n*   Temel TypeScript Bilgisi:<\/strong> Tipler, aray\u00fczler ve s\u0131n\u0131flar gibi temel TypeScript kavramlar\u0131na a\u015final\u0131k.
\n*   Node.js ve npm\/yarn:<\/strong> Proje ba\u011f\u0131ml\u0131l\u0131klar\u0131n\u0131 y\u00f6netmek ve geli\u015ftirme sunucusunu \u00e7al\u0131\u015ft\u0131rmak i\u00e7in gereklidir.
\n*   Vue CLI veya Vite:<\/strong> Vue projeleri olu\u015fturmak ve y\u00f6netmek i\u00e7in kullan\u0131lan komut sat\u0131r\u0131 ara\u00e7lar\u0131. Bu makalede hem Vue CLI hem de Vite ile kurulum ad\u0131mlar\u0131na de\u011finece\u011fiz.<\/p>\n
Projenizi Kurma<\/h3>\nS\u0131n\u0131f tabanl\u0131 bile\u015fenleri kullanmak i\u00e7in projenizi do\u011fru \u015fekilde yap\u0131land\u0131rman\u0131z gerekir. Hem Vue CLI hem de Vite ile nas\u0131l yapaca\u011f\u0131n\u0131z\u0131 g\u00f6relim.<\/p>\n
Vue CLI ile Kurulum (\u00d6nerilen)<\/h4>\nVue CLI, s\u0131n\u0131f tabanl\u0131 bile\u015fenler i\u00e7in gerekli t\u00fcm ba\u011f\u0131ml\u0131l\u0131klar\u0131 ve yap\u0131land\u0131rmay\u0131 otomatik olarak ekleyen bir se\u00e7ene\u011fe sahiptir.<\/p>\n
1.  Vue CLI’\u0131 Y\u00fckleyin:<\/strong> Hen\u00fcz y\u00fckl\u00fc de\u011filse, global olarak Vue CLI’\u0131 kurun:<\/p>\n
npm install -g @vue\/cli\n    # veya\n    yarn global add @vue\/cli<\/code><\/pre>\n2.  Yeni Bir Proje Olu\u015fturun:<\/strong><\/p>\n
vue create my-class-component-project<\/code><\/pre>\n3.  \u00d6zellikleri Manuel Olarak Se\u00e7in:<\/strong> Komut sat\u0131r\u0131 isteminde “Manually select features” (\u00d6zellikleri manuel olarak se\u00e7) se\u00e7ene\u011fini i\u015faretleyin.
\n4.  Gerekli \u00d6zellikleri Se\u00e7in:<\/strong> En az\u0131ndan a\u015fa\u011f\u0131daki se\u00e7enekleri se\u00e7ti\u011finizden emin olun (bo\u015fluk tu\u015fu ile se\u00e7ilir, Enter ile devam edilir):
\n    *   TypeScript<\/code>
\n    *   Class-style Component Syntax<\/code>
\n    *   Di\u011fer ihtiya\u00e7lar\u0131n\u0131za g\u00f6re Router, Vuex, Linter\/Formatter gibi se\u00e7enekleri de ekleyebilirsiniz.
\n5.  Vue S\u00fcr\u00fcm\u00fcn\u00fc Se\u00e7in:<\/strong> Vue 3’\u00fc se\u00e7meniz \u00f6nerilir.
\n6.  Di\u011fer Yap\u0131land\u0131rmalar\u0131 Tamamlay\u0131n:<\/strong> Babel, ESLint, paket y\u00f6neticisi gibi di\u011fer sorular\u0131 kendi tercihlerinize g\u00f6re yan\u0131tlay\u0131n.<\/p>\n
Vue CLI, projenizi olu\u015fturduktan sonra tsconfig.json<\/code>, shims-vue.d.ts<\/code> dosyalar\u0131n\u0131 ve main.ts<\/code> i\u00e7inde s\u0131n\u0131f tabanl\u0131 bile\u015fenleri destekleyecek \u015fekilde gerekli yap\u0131land\u0131rmay\u0131 otomatik olarak ekleyecektir. Ayr\u0131ca vue-class-component<\/code> ve vue-property-decorator<\/code> ba\u011f\u0131ml\u0131l\u0131klar\u0131n\u0131 da kuracakt\u0131r.<\/p>\n
Vite ile Kurulum (Modern Alternatif)<\/h4>\nVite, daha h\u0131zl\u0131 geli\u015ftirme deneyimi sunan modern bir yap\u0131 arac\u0131d\u0131r. Vite ile s\u0131n\u0131f tabanl\u0131 bile\u015fenleri kullanmak i\u00e7in baz\u0131 manuel ad\u0131mlar gereklidir.<\/p>\n
1.  Yeni Bir Vite Projesi Olu\u015fturun:<\/strong><\/p>\n
npm init vue@latest<\/code><\/pre>\n2.  Proje Ad\u0131n\u0131 ve Se\u00e7enekleri Belirleyin:<\/strong> Proje ad\u0131n\u0131z\u0131 girin ve istemlerde TypeScript<\/code> se\u00e7ene\u011fini Yes<\/code> olarak i\u015faretleyin. Di\u011fer se\u00e7enekleri (JSX, Router, Pinia, Vitest, ESLint) kendi ihtiya\u00e7lar\u0131n\u0131za g\u00f6re belirleyebilirsiniz.
\n3.  Ba\u011f\u0131ml\u0131l\u0131klar\u0131 Kurun:<\/strong> Proje dizinine gidin ve ba\u011f\u0131ml\u0131l\u0131klar\u0131 kurun:<\/p>\n
cd my-class-component-project\n    npm install<\/code><\/pre>\n4.  Gerekli K\u00fct\u00fcphaneleri Y\u00fckleyin:<\/strong> S\u0131n\u0131f tabanl\u0131 bile\u015fenleri etkinle\u015ftirmek i\u00e7in vue-class-component<\/code> ve vue-property-decorator<\/code>‘\u0131 kurman\u0131z gerekir:<\/p>\n
npm install vue-class-component vue-property-decorator<\/code><\/pre>\n    Vue 3 i\u00e7in dikkat:<\/strong> vue-class-component<\/code>‘\u0131n 8.x s\u00fcr\u00fcm\u00fc Vue 3 ile uyumludur. Y\u00fckledi\u011finizden emin olun.
\n5.  main.ts<\/code> Dosyas\u0131n\u0131 G\u00fcncelleyin:<\/strong> Vue uygulaman\u0131z\u0131 olu\u015fturan main.ts<\/code> dosyas\u0131nda \u00f6zel bir yap\u0131land\u0131rma genellikle gerekmez. Ancak, bile\u015fenlerinizi s\u0131n\u0131f tabanl\u0131 yazmaya ba\u015flayabilirsiniz.
\n6.  tsconfig.json<\/code> Dosyas\u0131n\u0131 Kontrol Edin:<\/strong> Dekorat\u00f6rleri kullanabilmek i\u00e7in tsconfig.json<\/code> dosyas\u0131nda experimentalDecorators<\/code> ve emitDecoratorMetadata<\/code> se\u00e7eneklerinin true<\/code> olarak ayarland\u0131\u011f\u0131ndan emin olun.<\/p>\n
{\n      \"compilerOptions\": {\n        \"target\": \"esnext\",\n        \"module\": \"esnext\",\n        \"strict\": true,\n        \"jsx\": \"preserve\",\n        \"importHelpers\": true,\n        \"moduleResolution\": \"node\",\n        \"skipLibCheck\": true,\n        \"esModuleInterop\": true,\n        \"allowSyntheticDefaultImports\": true,\n        \"sourceMap\": true,\n        \"baseUrl\": \".\",\n        \"types\": [\n          \"webpack-env\"\n        ],\n        \"paths\": {\n          \"@\/*\": [\n            \"src\/*\"\n          ]\n        },\n        \"lib\": [\n          \"esnext\",\n          \"dom\",\n          \"dom.iterable\",\n          \"scripthost\"\n        ],\n        \"experimentalDecorators\": true, \/\/ Bu sat\u0131r \u00f6nemli\n        \"emitDecoratorMetadata\": true \/\/ Bu sat\u0131r da \u00f6nemli\n      },\n      \"include\": [\n        \"src\/<\/em>\/*.ts\",\n        \"src\/<\/em>\/*.tsx\",\n        \"src\/<\/em>\/*.vue\",\n        \"tests\/<\/em>\/*.ts\",\n        \"tests\/<\/em>\/*.tsx\"\n      ],\n      \"exclude\": [\n        \"node_modules\"\n      ]\n    }<\/code><\/pre>\nHer iki kurulum y\u00f6nteminde de temel ama\u00e7, TypeScript’in dekorat\u00f6rleri tan\u0131mas\u0131n\u0131 sa\u011flamak ve vue-class-component<\/code> ile vue-property-decorator<\/code> k\u00fct\u00fcphanelerini projenize dahil etmektir.<\/p>\n
Temel K\u00fct\u00fcphaneler: vue-class-component<\/code> ve vue-property-decorator<\/code><\/h3>\nS\u0131n\u0131f tabanl\u0131 Vue bile\u015fenlerinin arkas\u0131ndaki iki ana k\u00fct\u00fcphane \u015funlard\u0131r:<\/p>\n
1.  vue-class-component<\/code><\/strong>: Bu, s\u0131n\u0131f tabanl\u0131 bile\u015fenlerin temelini olu\u015fturan k\u00fct\u00fcphanedir. JavaScript s\u0131n\u0131flar\u0131n\u0131 Vue bile\u015fenlerine d\u00f6n\u00fc\u015ft\u00fcr\u00fcr. Vue 2 i\u00e7in Component<\/code> dekorat\u00f6r\u00fcn\u00fc, Vue 3 i\u00e7in ise Options<\/code> dekorat\u00f6r\u00fcn\u00fc sa\u011flar. Bir s\u0131n\u0131f\u0131 Vue bile\u015feni olarak tan\u0131mlamak i\u00e7in bu dekorat\u00f6r\u00fc kullan\u0131r\u0131z.<\/p>\n
\/\/ Vue 2 i\u00e7in:\n    import Component from 'vue-class-component';\n    @Component\n    export default class MyComponent extends Vue { \/ ... <\/em>\/ }\n\n    \/\/ Vue 3 i\u00e7in:\n    import { Options, Vue } from 'vue-class-component';\n    @Options({}) \/\/ Bile\u015fen se\u00e7enekleri burada tan\u0131mlan\u0131r\n    export default class MyComponent extends Vue { \/ ... <\/em>\/ }<\/code><\/pre>\n    Vue 3’te Options<\/code> dekorat\u00f6r\u00fc, Options API’sindeki components<\/code>, directives<\/code>, mixins<\/code> gibi \u00f6zellikleri tan\u0131mlamak i\u00e7in kullan\u0131l\u0131r.<\/p>\n
2.  vue-property-decorator<\/code><\/strong>: Bu k\u00fct\u00fcphane, vue-class-component<\/code> \u00fczerine in\u015fa edilmi\u015ftir ve Vue’ya \u00f6zg\u00fc \u00f6zellikleri (prop’lar, izleyiciler, olaylar vb.) s\u0131n\u0131f \u00f6zellikleri ve metotlar\u0131 \u00fczerinde dekorat\u00f6rler arac\u0131l\u0131\u011f\u0131yla tan\u0131mlamam\u0131z\u0131 sa\u011flar. Bu, kodu daha temiz ve okunakl\u0131 hale getirir.
\n    *   @Prop<\/code>: Bile\u015fene d\u0131\u015far\u0131dan veri ge\u00e7irmek i\u00e7in kullan\u0131l\u0131r.
\n    *   @Emit<\/code>: Bile\u015fenden d\u0131\u015far\u0131ya olay f\u0131rlatmak i\u00e7in kullan\u0131l\u0131r.
\n    *   @Watch<\/code>: Bir veri \u00f6zelli\u011finin de\u011fi\u015fimini izlemek i\u00e7in kullan\u0131l\u0131r.
\n    *   @Model<\/code>: v-model<\/code> ile \u00e7ift y\u00f6nl\u00fc veri ba\u011flamay\u0131 etkinle\u015ftirmek i\u00e7in kullan\u0131l\u0131r (Vue 3’te @Model<\/code> yerine v-model<\/code> prop’lar\u0131 do\u011frudan kullan\u0131l\u0131r).
\n    *   @Provide<\/code>, @Inject<\/code>: \u00dcst ve alt bile\u015fenler aras\u0131nda uzun mesafeli veri ileti\u015fimi i\u00e7in kullan\u0131l\u0131r.
\n    *   @Mixins<\/code>: Bir veya daha fazla mixin’i bile\u015fene dahil etmek i\u00e7in kullan\u0131l\u0131r.<\/p>\n
Bu iki k\u00fct\u00fcphane birlikte, Vue’nun reaktif sistemini ve bile\u015fen mimarisini TypeScript s\u0131n\u0131flar\u0131 i\u00e7inde tam olarak kullanmam\u0131z\u0131 sa\u011flar.<\/p>\n
\u0130lk S\u0131n\u0131f Tabanl\u0131 Bile\u015feninizi Olu\u015fturma<\/h3>\n\u015eimdi temel bir s\u0131n\u0131f tabanl\u0131 Vue bile\u015feni olu\u015ftural\u0131m. src\/components\/HelloWorld.vue<\/code> dosyas\u0131n\u0131 d\u00fc\u015f\u00fcnelim.<\/p>\n