Typescript Nedir?
Typescript, Microsoft tarafından geliştirilen açık kaynak bir programlama dilidir. JavaScript diline katı kurallar eklemeyi sağlar.
Typescript Özellikleri
★ Typescript = Javascript’tir: Typescript temel yapı taşlarını Javascript’ten alır. Bu nedenle Typescript’i öğrenmeden önce Javascript yetkinliğinizin olması gerekir. Typescript ile yaptığınız bütün geliştirmeleriniz, makalenin kurulum adımında da göreceğiniz üzere Javascript’e dönüştürülür.
★ Typescript, tüm Javascript kütüphanelerini destekler: Typescript ile derlenen javascript çıktısı, bütün javascript kütüphaneleri ile birlikte kullanılabilir.
★ Typescript, taşınabilir ve portatiftir: TypeScript platform-serbest bir dildir ve farklı tarayıcılarda, cihazlarda, işletim sistemlerinde çalışabilir. javascript’in çalıştığı herhangi bir ortamda çalışabilir. Hali hazırda javascript ile geliştirilme yapılan bir projeye entegre edilebilir.
Typescript Avantajları
★ Typescript, nesne yönelimlidir.
★ Typescript, statik veri tiplemesine sahiptir.
★ Typescript, ES6 özelliklerini içeririnde barındırır.
★ Typescript, modülerdir.
★ Typescript’in söz dizimi Java, C# gibi yüksek seviyeli dillere benzerdir.
Typescript kodları, tarayıcılar tarafından direkt olarak yorumlanamayacağı için kodların derlenmesi ve javascript çıktısının oluşturulması gerekiyor.
Eğer hemen typescript yazmaya başlamak isterseniz, makalenin kurulum adımını geçerek, Codepen’i veya Typescript’in kendi dokümantasyon sayfasındaki Playground’ı kullanabilirsiniz.
Typescript Kurulumu
Typescript’i kurabilmek için ilk başta bilgisayarımızda Node Js’in kurulu olması gerekiyor. Ardından terminal üzerinden,
npm install -g typescript
komutunu çalıştıralım.
Şimdi örnek olarak, terminal üzerinden typescript yazmak istediğimiz dizine ilerleyerek, dizinimizde bir main.ts oluşturalım ve içerisine,
bu kodları yazalım.
Ardından,
tsc main.ts -w
komutunu terminalde çalıştıralım.
Bu komut ile ana dizinimde bulunan main.ts dosyası javascript’e dönüştürülerek, ana dizine çıktılandı ve ana dizindeki main.js dosyasının içeriği,
bu şekilde oldu.
-w parametresi main.ts dosyasıdaki değişikliklerin anlık olarak izleneceği ve dosya içerisindeki kodların anlık olarak main.js dosyasına çıktılanacağı anlamına gelir. Zorunlu bir parametre değildir.
Bu sayede ilk typescript kodumuzu yazmış ve derlemiş olduk. 🙂
Yapılandırma (Configuration) ve Klasör Yapısı
Terminalde,
tsc --init
komutunu çalıştırdıktan sonra. dizinimizde tsconfig.json dosyası oluşacaktır. Dizinizimde oluşan config dosyasındaki parametreleri düzenleyerek örnek bir klasör yapısı oluşturalım.
Bu yapılandırma dosyasına göre, src dizini içerisinde yer alan .ts dosyalarımız dist dizinine çıktılanacaktır.
Statik Veri Tiplemesi (Static Type Checking) Nedir?
Typescript ile değişkenler, fonksiyonlar, ve fonksiyon parametreleri için tip kontrolü (type checking) yapabilirsiniz.
Özellikleri
★ Tamamen isteğe bağlıdır.
★ Hataları bulmanıza ve önlemenize yardımcı olur.
★ Daha açıklayıcı ve okunaklı kod yazmanızı sağlar.
Tipler
★ String: Metinsel veri türleri için kullanılır.
★ Number: Sayısal veri türleri için kullanılır. ES6 ile gelen ikili ve sekizli değerleri de destekler.
★ Boolean: true/false değerler için kullanılır.
★ Array: Dizi tanımlamaları için kullanılır. İki farklı yazım şekli vardır.
★ Any: Bilinmeyen değişken tipleri için kullanılır. Örneğin, dinamik değerler içeren değişkenler için kullanılabilir.
★ Void: Geriye herhangi bir değer return etmeyen fonksiyonlarda ve null veya undefined değer içeren değişkenlerde kullanılır.
★ Null: null değer içeren değişkenlerde kullanılır.
★ Undefined: undefined değer içeren değişkenlerde kullanılır.
★ Tuple: Grup türleri bilinen ancak aynı olması gerekmeyen dizilerde kullanılır.
★ Enum: Obje içerisindeki key’lere veya key değerlerine daha kolay erişmek için kullanılır.
Key değerleri, varsayılan olarak 0'dan başlar ancak bunu değiştirmek mümkündür.
Tek bir key’in değerini veya birden fazla key’in değerini değiştirebiliriz. 👌💪
Key’lere erişmek için indis numarasını yazmamız yeterli. 😋
Takma Adlar (Type Alias)
type sözcüğü ile tanımlanan ifadeler, tipleri içerisinde tutar ve bu tipleri birden fazla yerde kullanmamıza olanak tanır. 👌
Yukarıdaki örnekte yer alan user alias’ı hem string tipindeki değişkenleri hem de object tipindeki değişkenler için tip kontrolünü sağlar.
Fonskiyonlar
★ Void: Geriye herhangi bir değer return etmeyen fonksiyonlarda kullanılır.
★ Geriye Değer Döndürebilen Fonksiyonlar:
Yukarıdaki örnek, object tipinde parametre alan ve geriye string tipinde değer döndüren bir fonksiyon kullanım örneğidir.
★ Parametresi Zorunlu (Required) Olmayan Fonksiyonlar:
Yukarıdaki örnekte, action parametresi ve user objesi içinde gönderilen age anahtar kelimesi, zorunlu bir parametre değildir. Fonksiyon çalıştırıldığında bu parametreler gönderilmemiş durumsaysa bu kısım işleme alınmaz.
Sınıf Tabanlı Objeler (Class Based Object)
Sınıflar (Classes)
Yukarıdaki örnektede gördüğümüz üzere, sınıf içerisinde yapılan değişken tipi tanımlamaları ve method içerisine gönderilen parametrelerin tip tanımlamaları, değişkenler ve fonksiyonlardaki ile aynıdır.
Soyut Sınıflar (Abstract Classes)
Soyut sınıflar,
★ Kendi instance objesinden türeyemeyen sınıflardır.
★ Kendisini kullanan başka sınıfların instance’ları aracılığıyla içerisindeki özelliklere erişilmesini sağlayan sınıflardır.
Eğer soyut bir sınıftan instance üretmeye çalışırsak, hata alırız.
Yukarıdaki örnekte, Person sınıfı instance’ından türetilen obje ile hem Person sınıfı içindeki parametrelere hem de User sınıfı içindeki parametrelere erişilebilir.
Interface
Dışarıdan erişilebilir durumda olan elemanları, objelere veya sınıflara bildiren yapılardır.
★ Birbirlerinden extend olabilirler.
★ Birbirlerinden implement olamazlar.
★ Objelere ve sınıflara atanabilirler.
Objelerde Kullanımı
Yukarıdaki örnekte, age değeri obje içerisinde kullanımı zorunlu bir parametre olmadığı için soru işareti (?) ile birlikte kullanılmıştır.
Sınıflarda Kullanımı
Yukarıdaki örnekte, User sınıfı, IsPerson Interface’i içinde tanımlanmış olan özellikleri kullanmaktadır.
“public”, “private” ve “readonly”
★ public: Sınıf içerisinde kullanılan özellikleri dışarıdan erişilebilir ve değiştirilebilir hale getirir.
★ private: Sınıf içerisinde kullanılan özelliklerin dışarıdan erişilebilme ve değiştirilebilme durumunu devre dışı bırakır.
★ readonly: Sınıf veya Interface içerisinde kullanılan özelliklerin dışarıdan değiştirilebilme durumunu devre dışı bırakır.
Interface’lerde Kullanımı
Sınıflarda Kullanımı
Sınıf veya obje içerisindeki readonly değerleri değiştirmeye çalışırsak, hata alırız.
Sonuç
Javascript diline katı kurallar eklememize yardımcı olan Typescript, ilk başlarda göze biraz tuhaf gözükse de alıştıktan sonra geliştirme esnasında karşımıza çıkardığı hata mesajlarıyla hayatımızı kolaylaştırıyor.
Bu makalede kullandığım resimlere ve paylaşmış olduğum kaynak kodlara, makale içerisinde bırakmış olduğum resimlerin altındaki linkler üzerinden ulaşabilirsiniz.
Bu linklerin tamamını görüntülemek için: https://github.com/yasinatesim/medium-stories/tree/master/02-a-dan-z-ye-typescript
linkini takip edebilirsiniz.
Makaleyi hazırlarken kullandığım kaynaklar;
Typescript Documentation: https://typescriptlang.org
The Net Ninja: https://www.youtube.com/watch?v=2pZmKW9-I_k&list=PL4cUxeGkcC9gUgr39Q_yD6v-bSyMwKPUI
Traversy Media: https://www.youtube.com/watch?v=rAy_3SIqT-E