{"id":30311,"date":"2025-09-26T16:18:34","date_gmt":"2025-09-26T13:18:34","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/?p=30311"},"modified":"2025-09-26T16:20:04","modified_gmt":"2025-09-26T13:20:04","slug":"vue-js-ve-typescript-ile-sinif-tabanli-bilesenler-nasil-yazilir","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/vue-js-ve-typescript-ile-sinif-tabanli-bilesenler-nasil-yazilir\/","title":{"rendered":"Vue.js ve TypeScript ile S\u0131n\u0131f Tabanl\u0131 Bile\u015fenler Nas\u0131l Yaz\u0131l\u0131r"},"content":{"rendered":"

<\/p>\n

Giri\u015f: Vue.js ve TypeScript ile S\u0131n\u0131f Tabanl\u0131 Bile\u015fenlerin G\u00fcc\u00fc<\/h2>\n

Vue.js, esnekli\u011fi ve \u00f6\u011frenme kolayl\u0131\u011f\u0131 sayesinde modern web uygulamalar\u0131 geli\u015ftirmek i\u00e7in pop\u00fcler bir JavaScript \u00e7er\u00e7evesidir. Geleneksel olarak Vue bile\u015fenleri, Options API ad\u0131 verilen bir nesne tabanl\u0131 yakla\u015f\u0131mla tan\u0131mlan\u0131r. Ancak, \u00f6zellikle b\u00fcy\u00fck \u00f6l\u00e7ekli uygulamalar geli\u015ftirirken veya nesne y\u00f6nelimli programlama (OOP) ilkelerine daha yatk\u0131n geli\u015ftiriciler i\u00e7in, s\u0131n\u0131f tabanl\u0131 bile\u015fenler daha d\u00fczenli ve y\u00f6netilebilir bir yap\u0131 sunabilir.<\/p>\n

Bu makalede, Vue.js’i TypeScript ile birle\u015ftirerek s\u0131n\u0131f tabanl\u0131 bile\u015fenler yazman\u0131n inceliklerini ke\u015ffedece\u011fiz. TypeScript’in sundu\u011fu tip g\u00fcvenli\u011fi ve s\u0131n\u0131f tabanl\u0131 yap\u0131n\u0131n getirdi\u011fi d\u00fczen, kodunuzun daha sa\u011flam, okunabilir ve bak\u0131m\u0131 kolay olmas\u0131n\u0131 sa\u011flayacakt\u0131r. \u00d6zellikle Java, C# gibi dillerden gelen veya Angular gibi di\u011fer \u00e7er\u00e7evelerde s\u0131n\u0131f tabanl\u0131 yap\u0131larla \u00e7al\u0131\u015fmaya al\u0131\u015fk\u0131n geli\u015ftiriciler i\u00e7in bu yakla\u015f\u0131m olduk\u00e7a cazip olabilir.<\/p>\n

Neden S\u0131n\u0131f Tabanl\u0131 Yakla\u015f\u0131m?<\/h2>\n

Vue.js’te s\u0131n\u0131f tabanl\u0131 bile\u015fenler kullanmak, Options API’ye k\u0131yasla baz\u0131 \u00f6nemli avantajlar sunar. Bu avantajlar, \u00f6zellikle b\u00fcy\u00fck ve karma\u015f\u0131k uygulamalarda kendini daha belirgin bir \u015fekilde g\u00f6sterir.<\/p>\n

Geli\u015fmi\u015f Tip G\u00fcvenli\u011fi ve Otomatik Tamamlama<\/h3>\n

TypeScript’in en b\u00fcy\u00fck faydas\u0131 tip g\u00fcvenli\u011fidir. S\u0131n\u0131f tabanl\u0131 bile\u015fenler, TypeScript ile do\u011fal bir uyum i\u00e7indedir. Bile\u015feninizin prop’lar\u0131n\u0131, veri \u00f6zelliklerini, hesaplanm\u0131\u015f \u00f6zelliklerini ve metotlar\u0131n\u0131 a\u00e7\u0131k\u00e7a tiplendirebilirsiniz. Bu sayede, geli\u015ftirme a\u015famas\u0131nda potansiyel hatalar\u0131 yakalar, kodunuzun daha g\u00fcvenilir olmas\u0131n\u0131 sa\u011flars\u0131n\u0131z. Ayr\u0131ca, IDE’niz (Visual Studio Code gibi) bu tipleri anlayarak m\u00fckemmel otomatik tamamlama ve IntelliSense deste\u011fi sunar, bu da geli\u015ftirme h\u0131z\u0131n\u0131z\u0131 art\u0131r\u0131r ve yaz\u0131m hatalar\u0131n\u0131 azalt\u0131r.<\/p>\n

Nesne Y\u00f6nelimli Programlama (OOP) \u0130lkelerine Uyum<\/h3>\n

S\u0131n\u0131f tabanl\u0131 yakla\u015f\u0131m, bile\u015fenlerinizi birer s\u0131n\u0131f olarak tan\u0131mlaman\u0131za olanak tan\u0131r. Bu, kal\u0131t\u0131m, soyutlama ve kaps\u00fclleme gibi OOP ilkelerini uygulayabilece\u011finiz anlam\u0131na gelir. \u00d6rne\u011fin, ortak i\u015flevselli\u011fe sahip bile\u015fenler i\u00e7in bir temel s\u0131n\u0131f olu\u015fturabilir ve di\u011fer bile\u015fenlerin bu s\u0131n\u0131ftan t\u00fcremesini sa\u011flayabilirsiniz. Bu, kod tekrar\u0131n\u0131 azalt\u0131r ve daha mod\u00fcler bir yap\u0131 olu\u015fturur.<\/p>\n

Daha Okunabilir ve Bak\u0131m\u0131 Kolay Kod<\/h3>\n

Options API’de data<\/code>, methods<\/code>, computed<\/code>, watch<\/code> gibi farkl\u0131 se\u00e7enekler aras\u0131nda gezinmek bazen karma\u015f\u0131k olabilir. S\u0131n\u0131f tabanl\u0131 bile\u015fenlerde ise t\u00fcm bu \u00f6\u011feler bir s\u0131n\u0131f\u0131n \u00fcyeleri olarak tan\u0131mlan\u0131r: veri \u00f6zellikleri s\u0131n\u0131f\u0131n alanlar\u0131d\u0131r, metotlar s\u0131n\u0131f\u0131n metotlar\u0131d\u0131r, hesaplanm\u0131\u015f \u00f6zellikler ise getter\/setter metotlar\u0131d\u0131r. Bu yap\u0131, bile\u015fenin t\u00fcm mant\u0131\u011f\u0131n\u0131 tek bir yerde, daha tutarl\u0131 ve anla\u015f\u0131l\u0131r bir \u015fekilde g\u00f6rmenizi sa\u011flar. \u00d6zellikle uzun bile\u015fen dosyalar\u0131nda bu d\u00fczen, kodun okunabilirli\u011fini ve bak\u0131m\u0131n\u0131 \u00f6nemli \u00f6l\u00e7\u00fcde art\u0131r\u0131r.<\/p>\n

B\u00fcy\u00fck Projelerde \u00d6l\u00e7eklenebilirlik<\/h3>\n

Uygulaman\u0131z b\u00fcy\u00fcd\u00fck\u00e7e, bile\u015fenlerinizin karma\u015f\u0131kl\u0131\u011f\u0131 da artar. S\u0131n\u0131f tabanl\u0131 bile\u015fenler, karma\u015f\u0131kl\u0131\u011f\u0131 y\u00f6netmek i\u00e7in daha iyi bir yap\u0131 sunar. Tip g\u00fcvenli\u011fi ve OOP ilkelerinin uygulanabilirli\u011fi sayesinde, daha b\u00fcy\u00fck ekiplerin birlikte \u00e7al\u0131\u015fmas\u0131 ve kod taban\u0131n\u0131 daha kolay anlamas\u0131 m\u00fcmk\u00fcn olur. Bu da b\u00fcy\u00fck \u00f6l\u00e7ekli projelerde s\u00fcrd\u00fcr\u00fclebilirli\u011fi ve \u00f6l\u00e7eklenebilirli\u011fi destekler.<\/p>\n

\u00d6n Gereksinimler ve Proje Kurulumu<\/h2>\n

S\u0131n\u0131f tabanl\u0131 Vue bile\u015fenleri yazmaya ba\u015flamadan \u00f6nce, projenizin do\u011fru \u015fekilde ayarland\u0131\u011f\u0131ndan emin olmal\u0131y\u0131z.<\/p>\n

Vue CLI Kurulumu<\/h3>\n

E\u011fer hen\u00fcz kurulu de\u011filse, Vue CLI’y\u0131 global olarak kurman\u0131z gerekmektedir. Vue CLI, Vue projelerini h\u0131zl\u0131 bir \u015fekilde olu\u015fturmak ve y\u00f6netmek i\u00e7in kullan\u0131lan standart bir ara\u00e7t\u0131r.<\/p>\n

npm install -g @vue\/cli\r\n
veya<\/h2>\r\nyarn global add @vue\/cli<\/code><\/pre>\n
Yeni Bir Vue Projesi Olu\u015fturma<\/h3>\n
\u015eimdi TypeScript deste\u011fiyle yeni bir Vue projesi olu\u015ftural\u0131m. Vue CLI size \u00e7e\u015fitli se\u00e7enekler sunacakt\u0131r; burada “Manually select features” se\u00e7ene\u011fini se\u00e7erek TypeScript’i etkinle\u015ftirmemiz \u00f6nemlidir.<\/p>\n
vue create my-class-vue-app<\/code><\/pre>\n
Proje olu\u015fturma s\u0131ras\u0131nda a\u015fa\u011f\u0131daki gibi se\u00e7enekleri i\u015faretlemelisiniz:<\/p>\n
    \n
  • Manually select features<\/code><\/li>\n
  • TypeScript<\/code><\/li>\n
  • Router<\/code> (iste\u011fe ba\u011fl\u0131, ama genellikle kullan\u0131l\u0131r)<\/li>\n
  • Vuex<\/code> (iste\u011fe ba\u011fl\u0131, ama genellikle kullan\u0131l\u0131r)<\/li>\n
  • Class-style Component syntax<\/code> (kesinlikle i\u015faretlenmeli!)<\/li>\n
  • Babel<\/code> (TypeScript ile birlikte kullan\u0131lmas\u0131 \u00f6nerilir)<\/li>\n<\/ul>\n
    Bu ad\u0131mlar\u0131 tamamlad\u0131\u011f\u0131n\u0131zda, s\u0131n\u0131f tabanl\u0131 bile\u015fenler i\u00e7in gerekli temel yap\u0131land\u0131rmaya sahip bir Vue projeniz olacakt\u0131r.<\/p>\n
    Gerekli K\u00fct\u00fcphanelerin Eklenmesi: vue-class-component ve vue-property-decorator<\/h3>\n
    S\u0131n\u0131f tabanl\u0131 bile\u015fenler yazmak i\u00e7in iki ana k\u00fct\u00fcphaneye ihtiyac\u0131m\u0131z var:<\/p>\n
      \n
    1. vue-class-component<\/code><\/strong>: Bu k\u00fct\u00fcphane, Vue bile\u015fenlerini ES Class’lar\u0131 olarak tan\u0131mlaman\u0131z\u0131 sa\u011flayan temel bir dekorat\u00f6r olan @Component<\/code>‘i sa\u011flar. Vue CLI ile proje olu\u015ftururken “Class-style Component syntax” se\u00e7ene\u011fini i\u015faretlediyseniz, bu k\u00fct\u00fcphane otomatik olarak kurulur.<\/li>\n
    2. vue-property-decorator<\/code><\/strong>: Bu k\u00fct\u00fcphane, Vue’nun Options API \u00f6zelliklerini (prop’lar, watch’lar, emit’ler, ref’ler vb.) s\u0131n\u0131f tabanl\u0131 bile\u015fenlerde dekorat\u00f6rler arac\u0131l\u0131\u011f\u0131yla kullanmam\u0131z\u0131 sa\u011flayan bir dizi yard\u0131mc\u0131 dekorat\u00f6r sunar. Bu k\u00fct\u00fcphane, s\u0131n\u0131f tabanl\u0131 bile\u015fenlerin g\u00fcc\u00fcn\u00fc tam olarak kullanmak i\u00e7in vazge\u00e7ilmezdir.<\/li>\n<\/ol>\n
      E\u011fer Vue CLI kurulumu s\u0131ras\u0131nda otomatik olarak eklenmediyse veya manuel olarak eklemek isterseniz, a\u015fa\u011f\u0131daki komutlar\u0131 kullanabilirsiniz:<\/p>\n
      npm install vue-class-component vue-property-decorator\r\n
      veya<\/h2>\r\nyarn add vue-class-component vue-property-decorator<\/code><\/pre>\n
      Bu k\u00fct\u00fcphaneler kurulduktan sonra, s\u0131n\u0131f tabanl\u0131 Vue bile\u015fenleri geli\u015ftirmeye haz\u0131rs\u0131n\u0131z.<\/p>\n
      Temel S\u0131n\u0131f Tabanl\u0131 Bile\u015fen Yap\u0131s\u0131<\/h2>\n
      \u015eimdi s\u0131n\u0131f tabanl\u0131 bir Vue bile\u015feninin temel yap\u0131s\u0131na ve Options API’deki kar\u015f\u0131l\u0131klar\u0131na bakal\u0131m.<\/p>\n
      @Component Dekorat\u00f6r\u00fc<\/h3>\n
      Her s\u0131n\u0131f tabanl\u0131 Vue bile\u015feni, vue-class-component<\/code> k\u00fct\u00fcphanesinden gelen @Component<\/code> dekorat\u00f6r\u00fc ile i\u015faretlenmelidir. Bu dekorat\u00f6r, s\u0131n\u0131f\u0131 bir Vue bile\u015feni olarak tan\u0131r ve Vue’nun reaktif sistemine entegre eder. Options API’deki gibi components<\/code>, filters<\/code>, directives<\/code> gibi se\u00e7enekleri bu dekorat\u00f6r\u00fcn i\u00e7ine bir nesne olarak ge\u00e7irebilirsiniz.<\/p>\n
      \/\/ MyComponent.vue\r\nimport { Component, Vue } from 'vue-property-decorator';\r\n\r\n@Component({\r\n  \/\/ Options API'deki gibi di\u011fer bile\u015fenleri, filtreleri vb. tan\u0131mlayabilirsiniz.\r\n  \/\/ components: {\r\n  \/\/   ChildComponent,\r\n  \/\/ },\r\n  \/\/ filters: {\r\n  \/\/   myFilter: (value: string) => value.toUpperCase(),\r\n  \/\/ },\r\n})\r\nexport default class MyComponent extends Vue {\r\n  \/\/ Bile\u015feninizin mant\u0131\u011f\u0131 buraya gelecek\r\n}<\/code><\/pre>\n
      export default class MyComponent extends Vue<\/code> ifadesi, bile\u015fenimizin Vue<\/code> s\u0131n\u0131f\u0131ndan t\u00fcredi\u011fini g\u00f6sterir. Bu, Vue’nun dahili \u00f6zelliklerine ve ya\u015fam d\u00f6ng\u00fcs\u00fc metotlar\u0131na eri\u015fmemizi sa\u011flar.<\/p>\n
      Veri (Data) Y\u00f6netimi: S\u0131n\u0131f \u00d6zellikleri<\/h3>\n
      Options API’de data<\/code> fonksiyonu ile tan\u0131mlad\u0131\u011f\u0131n\u0131z reaktif veriler, s\u0131n\u0131f tabanl\u0131 bile\u015fenlerde do\u011frudan s\u0131n\u0131f\u0131n \u00f6zellikleri olarak tan\u0131mlan\u0131r. Bu \u00f6zelliklere ba\u015flang\u0131\u00e7 de\u011ferleri atayabilir ve TypeScript sayesinde tiplerini belirtebilirsiniz.<\/p>\n
      import { Component, Vue } from 'vue-property-decorator';\r\n\r\n@Component\r\nexport default class MyComponent extends Vue {\r\n  message: string = 'Merhaba Vue!';\r\n  count: number = 0;\r\n  isActive: boolean = false;\r\n\r\n  \/\/ ... di\u011fer metotlar veya \u00f6zellikler\r\n}<\/code><\/pre>\n
      Bu \u00f6zellikler, Vue’nun reaktif sistemi taraf\u0131ndan otomatik olarak izlenir. \u015eablonunuzda bu \u00f6zelliklere eri\u015febilir ve de\u011fi\u015fikliklerinde UI’\u0131n g\u00fcncellenmesini bekleyebilirsiniz.<\/p>\n