Konunun geçmişi:
Union types, TypeScript'te farklı türlerin değerlerini alabilen değişkenler ve parametrelerin tanımlanması için ortaya çıkmıştır. Bu özellik, klasik dillerle kıyaslandığında tip tanımlama esnekliğini büyük ölçüde artırmıştır.
Sorun:
JavaScript'te fonksiyonlar ve değişkenler genellikle çok formatlıdır (örneğin, hem sayı hem de string alabilir), bu da güvenli tip tanımlamayı zorlaştırır. Union types olmadan, any kullanmak veya kodu tekrarlamak zorunda kalıyorduk. Bu ise üretim ortamında hata sayısını artırıyor ve büyük ekiplerde çalışmayı zorlaştırıyordu.
Çözüm:
Union types, belirli birden fazla türden biri olabilecek bir değişken tanımlamayı sağlar ve kontrollerden sonra doğru işlemleri garanti eder. Ayrıca, tür daraltma (type narrowing) desteği de bulunmaktadır, bu da derleyicinin neyle dealing ettiğini “anlamasına” yardımcı olur.
Kod örneği:
function formatId(id: number | string): string { if (typeof id === 'string') { return id.toUpperCase(); } return id.toString(); }
Ana özellikler:
Farklı özelliklere sahip nesnelerden oluşan bir union yazabilir miyiz ve kontrol etmeden herhangi bir özelliğe erişebilir miyiz?
Hayır. Union types, yalnızca tüm türlerde mevcut olan özellik ve yöntemlere erişmenizi sağlar. Özel özelliklere erişmek için tür daraltma gereklidir.
Kod örneği:
type Fish = { swim: () => void; }; type Bird = { fly: () => void; }; function move(animal: Fish | Bird) { // animal.swim(); // Daraltma olmadan hata if ('swim' in animal) { animal.swim(); // Tamam } }
Neden union türü string | number için tüm yöntemler mevcut değil?
TypeScript, union'da yalnızca tüm dahil olan türlerde bulunanları kabul eder. Bireysel yöntemler için önce gerçek türü kontrol etmeniz gerekir.
Union'da türü kontrol etmezseniz ve özel bir yöntemi çağırmaya çalışırsanız ne olur?
Böyle bir durumda, yöntem mevcut olmadığı için bir derleme hatası oluşur. Bu yalnızca belirli bir türü kontrol ettikten sonra çalışır.
Bir değişkene string | number tipi verildi ve kontrol etmeden toUpperCase() yapıldı. Sonuç olarak uygulama sayısal verilerde çöküyor.
Artılar:
Eksiler:
Bir yöntemle çalışmadan önce türü kontrol edelim:
if (typeof value === 'string') { return value.toUpperCase(); } else { return value.toString(); }
Artılar:
Eksiler: