TypeScript’te Constructer Kullanımı

Merhaba,

Class yapılarının en temel bileşenlerinden biri olan constructer metodu ilgili sınıftan nesne üretimi esnasında sınıf elemanlarını koordine edebilmenin başlıca yöntemlerinden birisidir. Haliyle her OOP’yi destekleyen dilde olduğu gibi TypeScript dilinde de bu yapı incelemeye değer bir özellik sergilemektedir.

Yazımızın devamında da göreceğiniz üzere TypeScript’te constructer metodun nasıl kullanıldığını irdeliyorken bir yandan da bu dile özgü bir kullanım şeklini sizlere gösteriyor olacağım.

Evet… O halde hiç vakit kaybetmeden konuya giriş yapalım.

export class Contact {
    constructor(adi: string, email: string, meslek: string, mesaj: string) {
        this.adi = adi;
        this.email = email;
        this.meslek = meslek;
        this.mesaj = mesaj;
    }
    adi: string;
    email: string;
    meslek: string;
    mesaj: string;
}

TypeScript’te bir sınıfa constructor metot tanımlamak istiyorsak eğer ilgili sınıf içerisinde “constructor” isminde bir fonksiyon tanımlamanız yeterlidir. Bu özel isim compiler tarafından tanınacak ve yapıcı metot olarak algılanacaktır.

Yukarıdaki örnekte gördüğünüz üzere Contact sınıfının constructor’ından bazı parametreler alınmaktadır. Bu demek oluyor ki; varsayılan yapıcı metot ezilmiş, yerine bizim tanımladığımız bu parametreli constructor oluşturulmuştur.

Buraya kadar bildiğiniz OOP mantığında constructor kullanımı ceyran etmiştir.

Angular ile bu oluşturduğumuz constructer metodu kullanmak istersek eğer;

import { Component, OnInit } from '@angular/core';
import { Contact } from '../contact';

@Component({
  selector: 'app-iletisim',
  templateUrl: './iletisim.component.html',
  styleUrls: ['./iletisim.component.css']
})
export class IletisimComponent implements OnInit {
  constructor() { }
  contactInstance: Contact = new Contact("....", "....", "....", "....");
  OnClick() {
    alert(this.contactInstance.adi + "\n" + this.contactInstance.email + "\n" + this.contactInstance.meslek + "\n" + this.contactInstance.mesaj);
  }
  ngOnInit() {
  }
}

<input type="text" [(ngModel)]="contactInstance.adi" />
<br>
<input type="text" [(ngModel)]="contactInstance.email" />
<br>
<input type="text" [(ngModel)]="contactInstance.meslek" />
<br>
<input type="text" [(ngModel)]="contactInstance.mesaj" />
<br>
<button (click)="OnClick()">Gönder</button>

şeklinde kullanabiliriz.

Burada bir nesnenin fieldlarına nesne üretimi esnasında varsayılan değerlerini constructer aracılığıyla atamış bulunmaktayız. Dikkat ederseniz ilgili sınıf içerisinde fieldlar tanımlanmış ve bu fieldlara gerekli değerler constructer içerisinde atanmıştır. Yani bilinen klasik OOP mantığı ve bu mantığa uygun işlevselliği… İşte bu tarz kullanımlarda TypeScript bizleri field tanımlama ve parametrelere değerlerini constructer içerisinde tanımlanan fieldlara atama zahmetinden kurtaracak bir işlevsellik sunmaktadır.

İlgili sınıf içerisinde hangi fieldların olmasını istiyorsanız constructer tarafından o parametreleri public erişim belirleyicisiyle almanız yeterli olacaktır.

export class Contact {
    constructor(public adi: string, public email: string, public meslek: string, public mesaj: string) {

    }
}

Görüldüğü üzere Contact sınıfı içerisine ne bir field tanımlanmıştır ne de constructer içerisinde bir işlem yapılmıştır. Buradaki kullanım aslen yukarıda yapmış olduğumuz ilk tanımlamayla birebir aynı işlevsellik gösterecek, sanki gerekli fieldları tanımlamışız gibi nesne üretimi esnasında parametrelere verilen değerleri ilgili nesne tutacaktır.

Yukarıdaki ekran alıntısına göz atarsanız eğer sanki ilgili parametreler birer özellikmiş(property) gibi sınıfın nesnesi üzerinden erişilebilir olmaktadır.

İşte bu da TypeScript’in bizlere sunmuş olduğu pratik bir avantajdır.

Sonraki yazılarımda görüşmek üzere…
İyi çalışmalar…