ProgramlamaFrontend geliştirici

TypeScript'teki union types (birleşik türler) mekanizması nasıl çalışır? Ne için gereklidir, tür daraltma (type narrowing) ile nasıl çalışır ve union türlerle ilgili hangi nüanslar vardır?

Hintsage yapay zeka asistanı ile mülakatları geçin

Cevap.

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:

  • Değişken ve parametrelerin olası türlerini açıkça belirtme olanağı sağlar.
  • Tür daraltma mekanizmasıyla birlikte çalışır (örneğin, typeof veya in ile).
  • Aynı anahtarın farklı türlerde değer alabileceği nesnelerle çalışmayı karmaşıklaştırır — erişim mantığının dikkatli bir şekilde yönetilmesini gerektirir.

Aldatıcı sorular.

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.

Tip hataları ve anti-patternler

  • Kullanım öncesi tür kontrolünü atlamak (erişim hatasına yol açabilir).
  • Çok geniş union türlerini tanımlamak (tip güvenliğini kaybettirir).
  • Yanlış daraltmalar görünmeyen hatalara ve not exhaustive checks'e yol açar.

Gerçek hayattan örnekler

Olumsuz durum

Bir değişkene string | number tipi verildi ve kontrol etmeden toUpperCase() yapıldı. Sonuç olarak uygulama sayısal verilerde çöküyor.

Artılar:

  • Hızlı yazılmış kod.

Eksiler:

  • Çalışma zamanında hatalar.
  • TypeScript’in statik tiplenmesine olan güvenin kaybı.

Olumlu durum

Bir yöntemle çalışmadan önce türü kontrol edelim:

if (typeof value === 'string') { return value.toUpperCase(); } else { return value.toString(); }

Artılar:

  • Derleme aşamasında tam güvenlik.
  • Kodun desteklenebilirliğinin artırılması.

Eksiler:

  • Gereksiz kontroller yazma gerekliliği.