React displayName İçin String Yerine TypeScript Proxy Hilesi
React component displayName değerlerini elle yazılan string yerine, C#'ın expression tree fikrinden esinlenen bir TypeScript Proxy tekniğiyle üretmenin yolu anlatılıyor.
Bir React component kütüphanesinde displayName değerlerini Component.displayName = "Component" şeklinde elle atamak basit görünse de, component yeniden adlandırıldığında string sabit kalıyor ve DevTools ile loglarda yanlış isimler görünmeye başlıyor. Sorunun kökü, string literal'lerin IDE refactor araçları tarafından takip edilememesi. keyof tabanlı bir yardımcı fonksiyon kısmi çözüm sunsa da, iç içe property yollarını ifade edemiyor ve hâlâ string literal gerektiriyor; ayrıca class'larda private üyeleri kapsamıyor çünkü keyof sadece public şekli tanımlıyor.
Çözüm olarak, C#'taki expression tree mantığından esinlenilerek JavaScript Proxy kullanılan bir teknik geliştirilmiş. Sahte bir hedef nesne oluşturulup her property erişiminde erişilen isim bir diziye kaydediliyor ve aynı proxy tekrar döndürülerek zincirleme erişim (user => user.profile.avatar.url) izlenebiliyor. Bu sayede runtimePathOf tüm yolu, runtimeNameOf ise sadece son segmenti (örneğin "url" veya "Component") döndürüyor; hiçbir AST ayrıştırması, decorator veya derleyici eklentisi gerekmiyor.
Bu yaklaşım TypeScript'in erişim kurallarını atlamıyor; bir class içindeki private üyeye seçici yalnızca o üyeye normal syntax ile erişimin geçerli olduğu yerde (class içinde) ulaşabiliyor, dışarıdan değil. Component.displayName artık typeof import(".") ile modül tipini kullanan bir seçici üzerinden türetiliyor, böylece component yeniden adlandırıldığında IDE'nin refactor aracı bu erişimi de güncelleyebiliyor. Sınırlaması ise sadece basit property erişimlerini desteklemesi; proxy üzerinde metot çağrısı (user.getProfile()) yapılırsa gerçek davranışı taklit edemediği için kullanılmamalı.