Typescript function overloadings nasıl yapılır ve nasıl çalışır?

533388 · 19 Aralık 2023

734204 dedi:
Tam olarak ne yapılmak isteniyor anlamadım ama TS'de bir metodun parametrelerinin türü biliniyorsa örneğin; a : string | number şeklinde tip tanımlaması yapılabilir. Eğer dönüş tipi tam olarak bilinmiyorsa a : any şeklinde tanımlanabilir. Keza bu metot dönüş tipi için de geçerli.

Teşekkür ederim, buradaki | isareti number veya string anlamina mi geliyor?

734204 · 19 Aralık 2023

533388 dedi:
Teşekkür ederim, buradaki | isareti number veya string anlamina mi geliyor?

Aynen.

BeecoV · 19 Aralık 2023

Method isimleri aynı tutulur, aldığı parametreler farklı tutulur. Bu işleme Method Overloading denir. Program, verilen parametre türüne göre ilgili methoda yönlendirilir. TS için yapmadım ama mantık bu kısaca.

brkdnmz · 19 Aralık 2023

Öncelikle bu konuyla ilgili resmi kaynağı paylaşayım: Documentation - More on Functions

Görünüşe göre birden fazla fonksiyon imzası (function signature) tanımlayabiliyoruz ancak fonksiyonu yalnızca bir kere implemente edebiliyoruz. İmplementasyonumuz tüm imzaları kapsayabilmeli. Buna göre, anladığım kadarıyla dönüş tipinin de aynı olmasına gerek yok çünkü implemente ettiğimiz fonksiyonun dönüş tipini union olarak ayarlayabiliriz: number | string | object gibi (mesela ilk imza number, ikinci imza string ve üçüncü imza object döndürürse).

Burada deneme yapabilirsiniz.

Yani sanki overloading sadece görünürde işliyor: aynı isimli fonksiyonun farklı imzalarını tanımlıyoruz. Günün sonunda tek bir fonksiyonu şartlar kullanarak implemente etmek durumunda kalıyoruz ki TypeScript sayesinde bu JavaScript'e göre çok daha anlaşılır bir hâlde yapılabiliyor, güzel hata mesajları sayesinde.

RaSGooL · 19 Aralık 2023

TypeScript, type işleri için kullanılır. Fonksiyon değerleri ile ilgilenmez. Bunu JavaScript yapar. JS'te function overload işlemi yok. TS'te bir fonksiyonu istediğin kadar farklı tiplerde yazabilirsin. Fakat asıl işlev kısmı (JS) overload edilmez. Aynı isimde birden fazla değişken bulunmaz. Bu sebeple overloading yapılmaz.
Basit bir örnek;

JavaScript:

type ProcessOptions = {
 multiplier: number
}
type ProcessCallback = (current: number) => void
function process(limit: number): void;
function process(limit: number, callback: ProcessCallback): void;
function process(limit: number, options: ProcessOptions, callback: ProcessCallback): void;

function process(limit: number, optionsOrCallback?: ProcessOptions | ProcessCallback, callback?: ProcessCallback) {
 let options: ProcessOptions = optionsOrCallback as ProcessOptions;
 if (typeof optionsOrCallback === 'function') {
 callback = optionsOrCallback;
 options = {
 multiplier: 1
 }
 }
 for (let i = 0; i < limit; i++) {
 callback?.(options.multiplier * i);
 }
}
process(1)
process(2, current => {
 console.log(current);
})
process(3, { multiplier: 2 }, current => {
 console.log(current);
})

533388 · 19 Aralık 2023

RaSGooL dedi:
Typescript, type işleri için kullanılır. Fonksiyon değerleri ile ilgilenmez. Bunu JavaScript yapar. JS de function overload işlemi yok. TS de bir fonksiyonu istediğin kadar farklı tiplerde yazabilirsin. Fakat asıl işlev kısmı (JS) overload edilmez. Aynı isimde birden fazla değişken bulunmaz. Bu sebeple overloading yapılmaz.

Basit bir örnek;

JavaScript:

type ProcessOptions = { multiplier: number. } type ProcessCallback = (current: number) => void. function process(limit: number): void; function process(limit: number, callback: ProcessCallback): void; function process(limit: number, options: ProcessOptions, callback: ProcessCallback): void; function process(limit: number, optionsOrCallback?: ProcessOptions | ProcessCallback, callback?: ProcessCallback) { let options: ProcessOptions = optionsOrCallback as ProcessOptions; if (typeof optionsOrCallback === 'function') { callback = optionsOrCallback; options = { multiplier: 1 } } for (let i = 0; i < limit; i++) { callback?.(options.multiplier * i); } } process(1) process(2, current => { console.log(current); }) process(3, { multiplier: 2 }, current => { console.log(current); })

Merhaba, yazdığınızı anladım ama kodlardan çok bir şey anlamadım, yorum satırı ekleme şansınız var mı acaba?

RaSGooL · 19 Aralık 2023

533388 dedi:
Merhaba, yazdığınızı anladım ama kodlardan çok bir şey anlamadım, yorum satırı ekleme şansınız var mı acaba?

Tabii;

JavaScript:

// Process fonksiyonunun istediği options ve callback tipi
type ProcessOptions = {
    multiplier: number
}
type ProcessCallback = (current: number) => void
//

// Process fonksiyonunun tip olarak overload edilmiş hali.
function process(limit: number): void;
function process(limit: number, callback: ProcessCallback): void;
function process(limit: number, options: ProcessOptions, callback: ProcessCallback): void;
//

// Process fonksiyonunun implementasyonu - Sadece bir kez implemente edilir. Tüm overload tipler bu implementasyonu kullanır.
function process(limit: number, optionsOrCallback?: ProcessOptions | ProcessCallback, callback?: ProcessCallback) {
    let options: ProcessOptions = optionsOrCallback as ProcessOptions;
    if (typeof optionsOrCallback === 'function') {
        callback = optionsOrCallback;
        options = {
            multiplier: 1
        }
    }

    for (let i = 0; i < limit; i++) {
        callback?.(options.multiplier * i);
    }
}
//
process(1)

process(2, current => {
    console.log(current);
})

process(3, { multiplier: 2 }, current => {
    console.log(current);
})

JavaScript:

function process(limit , options, callback) {
    if (typeof options === 'function') {
        callback = options;
        options = {
            multiplier: 1
        }
    }

    for (let i = 0; i < limit; i++) {
        callback?.(options.multiplier * i);
    }
}

process(1)

process(2, current => {
    console.log(current);
})

process(3, { multiplier: 2 }, current => {
    console.log(current);
})

533388 · 19 Aralık 2023

RaSGooL dedi:

Tabii;

JavaScript:

// Process fonksiyonunun istediği options ve callback tipi.
type ProcessOptions = {
 multiplier: number.
}
type ProcessCallback = (current: number) => void.
//

// Process fonksiyonunun tip olarak overload edilmiş hali.
function process(limit: number): void;
function process(limit: number, callback: ProcessCallback): void;
function process(limit: number, options: ProcessOptions, callback: ProcessCallback): void;
//

// Process fonksiyonunun implementasyonu - Sadece bir kez implemente edilir. Tüm overload tipler bu implementasyonu kullanır.
function process(limit: number, optionsOrCallback?: ProcessOptions | ProcessCallback, callback?: ProcessCallback) {
 let options: ProcessOptions = optionsOrCallback as ProcessOptions;
 if (typeof optionsOrCallback === 'function') {
 callback = optionsOrCallback;
 options = {
 multiplier: 1
 }
 }

 for (let i = 0; i < limit; i++) {
 callback?.(options.multiplier * i);
 }
}
//
process(1)

process(2, current => {
 console.log(current);
})

process(3, { multiplier: 2 }, current => {
 console.log(current);
})

JavaScript:

function process(limit , options, callback) {
 if (typeof options === 'function') {
 callback = options;
 options = {
 multiplier: 1
 }
 }

 for (let i = 0; i < limit; i++) {
 callback?.(options.multiplier * i);
 }
}

process(1)

process(2, current => {
 console.log(current);
})

process(3, { multiplier: 2 }, current => {
 console.log(current);
})

Cok teşekkür ederim anlamadigim yer olursa tekrardan yazarim.

Typescript function overloadings nasıl yapılır ve nasıl çalışır?

533388

Hectopat

734204

Centipat

BeecoV

Megapat

brkdnmz

Megapat

RaSGooL

Kilopat

533388

Hectopat

RaSGooL

Kilopat

533388

Hectopat