Yazar adı: Aze Bilir

Selamlar, ben Aze Bilir. Front-end geliştirme alanında çalışmalar yapıyorum. Yaptığım geliştirmeler ile ilgili blog yazıları yazıyorum.

STEM

TypeScript:Type Tanımlamaları

Serinin ilk yazısında TypeScript’e ufak bir giriş yaptık.Bu ikinci yazıda ise type tanımlamaları nasıl yapılır bundan bahsedeceğiz. TypeScript bizden çok net type tanımlamaları bekler. Bu tanımlamalarda en ufak bir eksiklik veya yanlışlık yaptığımızda bunu hata olarak gösterir. Örneğin kod bizden number beklerken biz string değer girersek bunu kabul etmeyecek ve hata verecektir. TypeScript’i JavaScript’in bir uzantısı olarak düşüneceğimizi serinin ilk yazısından biliyoruz. Yazdığımız kod aslında bir JavaScript kodu. Ek olarak static type’ları yazıyoruz. Yani bir değişken oluşturduğumuzda string mi, integer mı, obje ise objenin içinde hangi parametreler var, hangileri opsiyonel, hangileri zorunlu, bir array ise bu array stringlerden mi oluşuyor yoksa objelerden mi oluşuyor şeklinde static type’ları belirtiyoruz. Böylece uygulamamızın genelinde type güvenliği sağlamış oluyoruz. Şimdi  type tanımlamalarını nasıl yaparız bu soruya cevap verebiliriz. Öncelikle TypeScript’in inference özelliğinden kısaca birkaç örnek ile bahsetmek istiyorum. TYPE INFERENCE Öncelikle çalışma ortamında index.ts uzantılı bi dosya oluşturalım. Terminali açıp npm install -g typescript yazarak TypeScript’i bilgisayarımıza kuralım. Bu sayede compilera erişim sağlayacağız. Daha sonra bir değişken oluşturalım. Oluşturduğumuz değişkenin üstüne mouse ile gelip beklediğimizde bize değişkenin tipini veriyor. Bunu aşağıdaki örneklerde açıkça görüyoruz. Bu durum, TypeScript’in inference özelliği sayesinde gerçekleşiyor. Biz henüz herhangi bir type tanımlamadığımızda TypeScript bizim verdiğimiz değere göre bir çıkarım yapıyor ve değişkenin type’ını bize gösteriyor. Aynı şekilde aşağıdaki örnekteki gibi bir obje tanımladığımızda ve “okul” değerinin üzerine mouse ile geldiğimizde iki elemanlı bir obje olduğunu ve elemanların type’larını görmüş oluyoruz. Buraya kadar bir type tanımlaması yapmadık ve TypeScript’in inference özelliğinden faydalanmış olduk. Aşağıdaki örnekler ile birlikte type tanımlamaları nasıl yapılır onları göreceğiz. TYPE TANIMLAMA Satır İçi Tanımlama  İnterface ile Tanımlama Type ile Tanımlama Bu tanımlama şekli yaygın olarak fonksiyon tanımlamalarında kullanılır. Opsiyonel Tanımlama Bir objeye değer girerken, direkt olarak değerin ismini girdiğimizde o değer o objede zorunlu olarak kullanılmalıdır. Eğer kullanmazsak TypeScript bize bu noktada hata verecektir. Aşağıdaki örnekte gördüğünüz gibi “mevcut” değerini tanımlayıp kullanmadığımızda hata ile karşılaşıyoruz. Bu durumda aşağıdaki gibi “?” işareti ile opsiyonel tanımlama yaparak tanımladığımız değeri kullanıp kullanmamak konusunda özgür olabiliriz. Bir değişkenin iki farklı type alabileceği durumlarda ise şöyle bir kullanım ile karşılaşıyoruz; Bu iki farklı kullanım şekli de doğrudur. Type’ların arasına “|” işareti koyarak o değişkenin hem number hem de string türünde kullanabileceğimizi belirtmiş oluyoruz. Literal Type Direkt olarak bir değeri type şeklinde vermeye literal type denir. Aşağıdaki örnek üzerinde açıklamak daha anlaşılır olacaktır ; Burada girdiğimiz “Atatürk İlkokulu” değeri “Isim” type’ı ile eşleşmek zorundadır. Değer ile type eşleşmediği takdirde isim değeri bize aşağıda gördüğümüz hatayı verecektir. Bu durumda biz isim değerine sadece “Atatürk İlkokulu” değerini veya “Diger” değerini verebiliriz. Type’ların Array ile Kullanımı Aşağıda gördüğümüz örnekte “okullar” adında bir obje oluşturduk ve henüz type tanımlaması yapmadık. Burada yine TypeScript’in inference özelliğinin devreye girdiğini görüyoruz. Fakat biz bu “okullar” objesine az önce oluşturduğumuz Okul type’ının dizi hali olacağını belirtmek isteyebiliriz. Bunun kullanımı ise şu şekilde olacaktır; Bu sayede “okullar” objesinin Okul type’ında tanımladığımız objelerden oluşan bir dizi olduğunu belirtmiş olduk. Yukarıdaki örnekte olduğu gibi girebileceğimiz isim değerleri “Atatürk İlkokulu” ve “Diger” olmak zorunda oldu. Generic Type Interface veya type ile oluşturduğumuz bir type başka bir type’ı parametre olarak alabilir. İlk bakışta biraz karmaşık bir cümle gibi görünse de aslında hiç de öyle olmadığını bir örnekle göstermek istiyorum; Son olarak derleme kısmından bahsetmek istiyorum.Bu yazdığımız kodları derlemek istiyorsak TypeScript’in “tsc” komutunu kullanıyoruz. Terminali açıp tsc “dosya adı” girdiğimizde yazdığımız kodu derlemiş olacağız. Derleme gerçekleştikten sonra index.js isimli yeni bir dosyamız oluşacak ve içeriği de aşağıda gördüğümüz şekilde olacak; Gördüğünüz gibi tanımladığımız type’ların hiçbiri index.js dosyamızın içinde görünmüyor. Sadece girdiğimiz objeler ve değerleri görüyoruz. Gördüğünüz bu kod bütün type’ları kontrol edilmiş olduğu için güvenli bir kod olarak düşünülebilir. TypeScript ile giriş aşamasında yapılan type tanımları hakkında söyleyeceklerim şimdilik bu kadar. Sonraki yazılarda görüşmek üzere.    

STEM

TypeScript: JavaScript Temelli Bir Uzantı Dili

Selamlar, bu seride TypeScript hakkında yazıyor olacağım. Serinin bu ilk yazısında ise TypeScript’e giriş yapacak ve JavaScript ile TypeScript’in farklarından bahsedeceğim. Nedir Bu TypeScript? TypeScript, kısaca JavaScript’in tamamını ve fazlasını içeren bir uzantı dilidir. Aynı zamanda biz geliştiricilere oldukça kolaylık ve avantaj sağlayan bir yazım standartıdır. Bu avantajlardan ve kolaylıklardan bahsetmeden önce TypeScript hakkında biraz bilgi sahibi olalım.   TypeScript’e Neden İhtiyaç Duyarız? JavaScript yaygın olarak web uygulamalarında kullanılan bir dildir. Zamanla sunucu taraflı uygulamalarda ve mobil uygulama geliştirmede kullanılmaya başlamıştır ve tahmin edilemeyen bir büyüme göstermiştir. Bu büyüme ile bazı iyileştirmelere ihtiyaç duyulmuştur. TypeScript, JavaScript’e üstünlük sağlayan iyileştirmeler içerir ve JavaScript’i büyük projelerde daha etkili bi şekilde kullanmak için tasarlanmıştır. Birçok JavaScript uygulaması, yüz binlerce dosyadan oluşan uygulamalar oluşturur. Tek bir dosyada yapılacak tek bir değişiklik, gölete bir çakıl taşı atmak ve dalgaların kıyıya yayılmasına neden olmak gibi herhangi bir sayıda başka dosyanın davranışını etkileyebilir. Geliştiricinin projesinin her bölümü arasındaki bağlantıları doğrulamak zaman alabilir. TypeScript gibi tip kontrollü bir dil kullanmak, bunu otomatik olarak giderir ve geliştirme sırasında anında geri bildirim sağlar. Bu özellikler, TypeScript’in biz geliştiricilerin kodlarına daha fazla güvenmelerine yardımcı olur ve projenin yanlışlıkla bozulmadığını doğrulamak için önemli ölçüde zaman tasarrufu sağlar. TypeScript’in JavaScript’e göre avantajlarının listesi şu şekilde; TypeScript hataları geliştirme sırasında ortaya çıkarır. Bu özellik runtime dediğimiz aşamada meydana gelen hataların olasılığını azaltır. TypeScript; generics, inheritance, interfaces, classes vb. nesne yönelimli türdeki çeşitli programlama kavramlarını destekler. TypeScript’in bir özelliği, statik yazmayı etkinleştirmesidir. Statik yazma, derleme aşamasında tür doğruluğunun kontrol edilmesini sağlar. JavaScript’te bu mümkün değildir. Burada ufak bir parantez açıp static ve dynamic typing konusuna kısaca değinmek istiyorum. Static Typing: Bir geliştiricinin değişkenleri kullanmadan önce o değişkenin tipini açıkça belirtmesi gereken bir yazım türüdür. Bu yazım türünde, compile aşamasında hataları görüp düzeltme şansımız olduğundan daha az hata üreten programlar yazarız. Aynı zamanda tip kontrolü önceden yapılır, bu da kodun daha az hafıza kullanarak daha hızlı çalışmasını sağlar. Static yazım kullanan dillere örnek olarak TypeScript, Java, C, C++ dillerini verebiliriz. Dynamic Typing: Değişken tiplerini belirleme zorunluluğumuzun olmadığı bir yazım şeklidir. Değişkenin tipini değiştirmek istediğimizde değiştirebiliriz. Bu özellik geliştiriciye oldukça esnek bir ortam sağlar. Bu yazım türünün static yazıma göre dezavantajı, hataları program çalıştıktan sonra görüyor olmamızdır. Şimdiye kadar TypeScript’in ne olduğundan ve JavaScript ile farklılıklarının bi kısmından bahsettik. Daha iyi anlaşılması için bu farklılıkları tablo biçiminde açıklamakta fayda var. TypeScript vs JavaScript Bu yazı ile TypeScript’e ufak bir giriş yapmış olduk. Serinin ikinci yazısında TypeScript nasıl çalışır buna bakacağız. Görüşmek üzere.  

Scroll to Top