<\/div>\n

Merhaba,<\/p>\n

Class yap\u0131lar\u0131n\u0131n en temel bile\u015fenlerinden biri olan constructer metodu ilgili s\u0131n\u0131ftan nesne \u00fcretimi esnas\u0131nda s\u0131n\u0131f elemanlar\u0131n\u0131 koordine edebilmenin ba\u015fl\u0131ca y\u00f6ntemlerinden birisidir. Haliyle her OOP’yi destekleyen dilde oldu\u011fu gibi TypeScript dilinde de bu yap\u0131 incelemeye de\u011fer bir \u00f6zellik sergilemektedir.<\/p>\n

Yaz\u0131m\u0131z\u0131n devam\u0131nda da g\u00f6rece\u011finiz \u00fczere TypeScript’te constructer metodun nas\u0131l kullan\u0131ld\u0131\u011f\u0131n\u0131 irdeliyorken bir yandan da bu dile \u00f6zg\u00fc bir kullan\u0131m \u015feklini sizlere g\u00f6steriyor olaca\u011f\u0131m.<\/p>\n

Evet… O halde hi\u00e7 vakit kaybetmeden konuya giri\u015f yapal\u0131m.<\/p>\n

\r\nexport class Contact {\r\n    constructor(adi: string, email: string, meslek: string, mesaj: string) {\r\n        this.adi = adi;\r\n        this.email = email;\r\n        this.meslek = meslek;\r\n        this.mesaj = mesaj;\r\n    }\r\n    adi: string;\r\n    email: string;\r\n    meslek: string;\r\n    mesaj: string;\r\n}\r\n<\/pre>\nTypeScript’te bir s\u0131n\u0131fa constructor metot tan\u0131mlamak istiyorsak e\u011fer ilgili s\u0131n\u0131f i\u00e7erisinde “constructor” isminde bir fonksiyon tan\u0131mlaman\u0131z yeterlidir. Bu \u00f6zel isim compiler taraf\u0131ndan tan\u0131nacak ve yap\u0131c\u0131 metot olarak alg\u0131lanacakt\u0131r.<\/p>\n
Yukar\u0131daki \u00f6rnekte g\u00f6rd\u00fc\u011f\u00fcn\u00fcz \u00fczere Contact s\u0131n\u0131f\u0131n\u0131n constructor’\u0131ndan baz\u0131 parametreler al\u0131nmaktad\u0131r. Bu demek oluyor ki; varsay\u0131lan yap\u0131c\u0131 metot ezilmi\u015f, yerine bizim tan\u0131mlad\u0131\u011f\u0131m\u0131z bu parametreli constructor olu\u015fturulmu\u015ftur.<\/p>\n
Buraya kadar bildi\u011finiz OOP mant\u0131\u011f\u0131nda constructor kullan\u0131m\u0131 ceyran etmi\u015ftir.<\/p>\n
Angular ile bu olu\u015fturdu\u011fumuz constructer metodu kullanmak istersek e\u011fer;<\/p>\n
\r\nimport { Component, OnInit } from '@angular\/core';\r\nimport { Contact } from '..\/contact';\r\n\r\n@Component({\r\n  selector: 'app-iletisim',\r\n  templateUrl: '.\/iletisim.component.html',\r\n  styleUrls: ['.\/iletisim.component.css']\r\n})\r\nexport class IletisimComponent implements OnInit {\r\n  constructor() { }\r\n  contactInstance: Contact = new Contact("....", "....", "....", "....");\r\n  OnClick() {\r\n    alert(this.contactInstance.adi + "\\n" + this.contactInstance.email + "\\n" + this.contactInstance.meslek + "\\n" + this.contactInstance.mesaj);\r\n  }\r\n  ngOnInit() {\r\n  }\r\n}\r\n<\/pre>\n\r\n<input type="text" [(ngModel)]="contactInstance.adi" \/>\r\n<br>\r\n<input type="text" [(ngModel)]="contactInstance.email" \/>\r\n<br>\r\n<input type="text" [(ngModel)]="contactInstance.meslek" \/>\r\n<br>\r\n<input type="text" [(ngModel)]="contactInstance.mesaj" \/>\r\n<br>\r\n<button (click)="OnClick()">G\u00f6nder<\/button>\r\n<\/pre>\n\u015feklinde kullanabiliriz.<\/p>\n
Burada bir nesnenin fieldlar\u0131na nesne \u00fcretimi esnas\u0131nda varsay\u0131lan de\u011ferlerini constructer arac\u0131l\u0131\u011f\u0131yla atam\u0131\u015f bulunmaktay\u0131z. Dikkat ederseniz ilgili s\u0131n\u0131f i\u00e7erisinde fieldlar tan\u0131mlanm\u0131\u015f ve bu fieldlara gerekli de\u011ferler constructer i\u00e7erisinde atanm\u0131\u015ft\u0131r. Yani bilinen klasik OOP mant\u0131\u011f\u0131 ve bu mant\u0131\u011fa uygun i\u015flevselli\u011fi… \u0130\u015fte bu tarz kullan\u0131mlarda TypeScript bizleri field tan\u0131mlama ve parametrelere de\u011ferlerini constructer i\u00e7erisinde tan\u0131mlanan fieldlara atama zahmetinden kurtaracak bir i\u015flevsellik sunmaktad\u0131r.<\/p>\n
\u0130lgili s\u0131n\u0131f i\u00e7erisinde hangi fieldlar\u0131n olmas\u0131n\u0131 istiyorsan\u0131z constructer taraf\u0131ndan o parametreleri public eri\u015fim belirleyicisiyle alman\u0131z yeterli olacakt\u0131r.<\/p>\n
\r\nexport class Contact {\r\n    constructor(public adi: string, public email: string, public meslek: string, public mesaj: string) {\r\n\r\n    }\r\n}\r\n<\/pre>\nG\u00f6r\u00fcld\u00fc\u011f\u00fc \u00fczere Contact s\u0131n\u0131f\u0131 i\u00e7erisine ne bir field tan\u0131mlanm\u0131\u015ft\u0131r ne de constructer i\u00e7erisinde bir i\u015flem yap\u0131lm\u0131\u015ft\u0131r. Buradaki kullan\u0131m aslen yukar\u0131da yapm\u0131\u015f oldu\u011fumuz ilk tan\u0131mlamayla birebir ayn\u0131 i\u015flevsellik g\u00f6sterecek, sanki gerekli fieldlar\u0131 tan\u0131mlam\u0131\u015f\u0131z gibi nesne \u00fcretimi esnas\u0131nda parametrelere verilen de\u011ferleri ilgili nesne tutacakt\u0131r.<\/p>\n
<\/a>
\nYukar\u0131daki ekran al\u0131nt\u0131s\u0131na g\u00f6z atarsan\u0131z e\u011fer sanki ilgili parametreler birer \u00f6zellikmi\u015f(property) gibi s\u0131n\u0131f\u0131n nesnesi \u00fczerinden eri\u015filebilir olmaktad\u0131r.<\/p>\n
\u0130\u015fte bu da TypeScript’in bizlere sunmu\u015f oldu\u011fu pratik bir avantajd\u0131r.<\/p>\n
Sonraki yaz\u0131lar\u0131mda g\u00f6r\u00fc\u015fmek \u00fczere…
\n\u0130yi \u00e7al\u0131\u015fmalar…<\/p>\n","protected":false},"excerpt":{"rendered":"
Merhaba, Class yap\u0131lar\u0131n\u0131n en temel bile\u015fenlerinden biri olan constructer metodu ilgili s\u0131n\u0131ftan nesne \u00fcretimi esnas\u0131nda s\u0131n\u0131f elemanlar\u0131n\u0131 koordine edebilmenin ba\u015fl\u0131ca y\u00f6ntemlerinden birisidir. Haliyle her OOP’yi destekleyen dilde oldu\u011fu gibi TypeScript dilinde de bu yap\u0131...<\/p>\n","protected":false},"author":1,"featured_media":7400,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2144,2192],"tags":[358,2193,2371],"class_list":["post-8146","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angular-4","category-typescript","tag-constructer","tag-typescript","tag-typescriptte-constructer-kullanimi"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/8146","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/comments?post=8146"}],"version-history":[{"count":6,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/8146\/revisions"}],"predecessor-version":[{"id":8153,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/8146\/revisions\/8153"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/media\/7400"}],"wp:attachment":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/media?parent=8146"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/categories?post=8146"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/tags?post=8146"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}