Typescript Nedir, Typescript’e giriş seviyesinde olacak bu makalede typescript ile Modern Javascript kodlama ortamının nasıl yapılacağı, typescript kodlaması, örnekleri, tipler ve diğer birçok başlangıç seviyesinde detay bu makalede verilecektir.
Makalede örneklerimi verirken en aktif olarak kullandığım dil olan C#’daki özellikler ile karşılaştırmalar yaparak Typescript’i benimseyemenler için belki yol gösterici olabilir düşüncesiyle özellikler ve örnekler anlatılacaktır.
Neden Typescript?
Biliyorsunuzki özellikle büyük projelerde kod ağırlık kısmını javascript’e verdiğinizde eğer herhangi bir Javascript compiler’ı olan Typescript, Babel v.b. compiler’lar ile çalışmıyorsanız o zaman bir süre sonra yönetilemez bir kod karmaşası ile karşı karşıya olacağınızı söyleyebilirim bu gibi durumlara düşmemek için neredeyse tüm OOP prensiblerini kullanabileceğiniz, okunabilirlik ve yeniden kullanılabilir yapılar oluşturabileceğiniz bir javascript compiler’ı kullanmanızı şiddetle öneririm. Sonuç olarak neden Typescript başlığına verilebilecek en net cevap Typescript kullanmak zorunda değilsiniz farklı olarak kullanabileceğiniz 10 javascript compiler’ını altta listeledim.
- TypeScript ❤
- Dart
- Elm
- PureScript
- CoffeeScript
- ClojureScript
- Scala.js
- Reason
- Haxe
- Nim
ModernJS Özellikleri Kullanma Özgürlüğü
ECMAScript standartları sürekli yenilenerek ve typescript’in bu özellikleri kendine implement edip biz gelişiricilere sunduğu Modern Javascript özelliklerini Typescript compiler’ı sayesinde özgürce kullanabiliyoruz.
Typescript Kurulumu ve Kullanımı
http://www.typescriptlang.org/#download-links adresinden Visual Studio ortamı için yada Komut Satırından kullanmak için ilgili paketleri kurup kullanabilirsiniz örnek olarak Visual Studio 2017 için https://www.microsoft.com/en-us/download/details.aspx?id=55258 adresindeki paketi kurabilirsiniz ama komut satırından typescript’i kullanmak için komut satırından npm paket yöneticisini kullanarak komutu ile typescript’in komut satırından kullanmamız gereken aracını kurabilirsiniz. Komut satırından typescript’i tsc komutu ile kullanabilirsiniz tsc komutuna ait parametrelere https://www.typescriptlang.org/docs/handbook/compiler-options.html sayfasından kolaylıkla ulaşabilirsiniz.
Typescript cli compiler’ını kurduktan sonra ts uzantılı dosyayı compile etmek için alttaki gibi sözdizimi kullanabilirsiniz.
Birden fazla dosyayı compile etmek için alttaki gibi bir sözdizimi kullanabilirsiniz.Bulunduğunuz klasör içerisindeki bütün ts uzantılı dosyaları compile etmek için alttaki komutu çalıştırmanız yeterlidir. Alt klasörlerdeki ts uzantılı dosyalara erişim sağlamayacaktır.
ts uzantılı dosyaları dinlemeye alıp her değişikilte compile işleminin gerçekleştirilmesi için alttaki gibi bir sözdizimi kullanabilirsiniz. Alt klasörlerin tümü altındaki ts uzantılı dosyalar dinlenmeye alınacaktır.
İpucu: üstteki kodun daha kısa sözdizimi yer almaktadır oda tsc -w şeklindedir. Eğer tekbir dosyayı dinlemek isterseniz tsc main.ts --watch şeklinde dinlemeye alabilirsiniz belirli birden fazla dosyayı dinlemek için ise 2 komut üstünde yer alan örnek komutun sonuna --watch komutunu ekleyerek belirlediğiniz birden fazla ts dosyasınıda dinlemeye alabilirsiniz.
Genel Tipler ve Kullanımları
Basit Tipler
Her programlama dilinde yer alan basit tipler’in kullanılması ve değişkenlerimizin bu tiplerle oluşturulması ile kod geliştirmeleriniz daha sağlıklı ve ileriye yönelik olacaktır ayrıca tipleri belli olan değişkenler üzerinde intellisense’in sizi yönlendirmesi ile daha hızlı kod yazabileceksiniz. Basit tiplerden kastedilen ise boolean, number, string, Array gibi tiplerdir.
1 2 3 4 5 6 7 8 9 10 | class Person { public name: string public isMale: boolean public skills: Skill[] } class Skill { name: string score: number } |
Tuple
C#’dan bildiğiniz üzere geri döndürdüğümüz tipler için eğer tek sefer kullanılması öngörülüyor ve 1-2 özellikden oluşacağını düşünüyorsak Tuple gibi yapıları kullanırız C# 7 ile birlikte dahada geliştirilen ValueTuples diye bir geliştiricilere sunulan yeni Tuple’lar ile artık tuple’larımız Item1, Item2 diye değilde kendimiz özel isim tanımlamaları yapabiliyoruz. Ama c#’da kendiniz bir isim tanımlayamıyorsunuz ve Item1, Item2 v.s. diyede erişemiyorsunuz aslında javascript çıktısına baktığınızda sonuç olarak bize bir dizi oluşturduğunu göreceksiniz tam anlamıyla bir tuple demek mümkün değil ama yinede yerine göre ihtiyaç karşılayabiliyor.
1 2 3 4 | var tuple: [string, number] tuple = ['murat', 27] var name = tuple[0] var age = tuple[1] |
Interface
Interface yapısı bolca typescript tarafında sıkça kullanılmaktadır özellikle başkaları tarafından yazılan javascript plugin’lerinin typescript tarafında 100% intellisense’li çalışması için typescript tipleri ile plugin yapısına göre interface yapısı ile oluşturulduğunu göreceksiniz piyasada sıkça kullanılan pluginlerin interface yapılarının yer aldığı tanım dosyalarını http://definitelytyped.org/ adresinden bulabilir ve projelerinizde kullanabilirsiniz.
İpucu: interface yapılarının javascript tarafında bir karşılığı yoktur sadece intellisense açısından yardımcı olup geliştirmelerimizi sağlıklı yapmamıza yaramaktadır. class’lara interface yapılarının miras alınması için implements keyword’u ile class’lara interface içerisindeki tanımların oluşturulması sağlanabilir.
Class’ları interfaceden kalıtım alarak oluşturma
Çok basit bir senaryo oluşturarak ILog adında bir interface oluşturuyoruz basit ve anlaşılır olarak 4 türde loglama yapacağımız metodları tanımlıyoruz ve bu arayüzü ne tür loglama yapacaksak ilgili class’ı oluşturup class’ı implements keyword’ü ile ILog’dan miras alacağız ve böylelikle arayüz içerisindeki metodların gövde kod tanımlarını yapacağız.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 | interface ILog { error(text: string) warning(text: string) info(text: string) success(text: string) } class Console2 implements ILog { /** * Error türündeki loglar buradan yöneliyor. * @param text log metni. */ error(text: string) { console.error(text) } /** * Warning türündeki loglar buradan yöneliyor. * @param text log metni. */ warning(text: string) { console.warn(text) } /** * Info türündeki loglar buradan yöneliyor. * @param text log metni. */ info(text: string) { console.info(text) } /** * Success türündeki loglar buradan yöneliyor. * @param text log metni. */ success(text: string) { console.log(text) } } |
Interface Genişletme
Interface yapılarını diğer farklı interface yapılarından kalıtım alıp genişletebiliriz birçok OOP programlama dilinde en temelde zaten mevcuttur bu kolaylığı birde Typescript tarafında nasıl kullanabildiğimize kısaca örnek kodla gözatalım.
1 2 3 4 5 6 7 8 | interface IPerson { name: string surname: string } interface IWorker extends IPerson { salary: number } |
Class
Contructor Tanımlama
Class tanımlarımız içerisinde constructor(yapıcı) metodlar tanımlayabiliyoruz. Alttaki Square adlı class’ımız içerisinde n adında number tipinde bir parametreye sahip constructor’a sahip olduğunu görüyoruz. Eğer extends komutunu kullanarak farklı bir sınıftan miras alıyorsanız super(); komutunu constructor’ımız içerisinde kullanarak miras aldığımız sınıf içerisindeki default contructor’ın çalıştırılmasını sağlayabilirsiniz default contructor haricinde sizin tanımladığınız constructor var ise parametreleride geçmeniz gerekecektir.
İpucu
Normalde contstructor parametresinde aldığımız değeri class nesnemiz içerisinde bir özelliğe atayarak geliştirmeler yapıyoruz ama typescript’in bu konuda bir kolaylığı mevcüt altta hem normal olarak kullanılan yöntem hemde typescript’in kolaylığı ile constructor parametresi tanımlanırken public yada private özelliğin nasıl tanımlanabileceğini görebilirsiniz.
Normalde C# ve diğer birçok programlama dilinde kullanıcıdan class örneği oluşturma aşamasında construuctor’dan bazı değerleri alıp bu değerlerin özellikler üzerinden saklanması için özelliğe değerin set edilmesi sağlanır altta typescript örneğinde yapıldığı gibi.
1 2 3 4 5 6 7 8 9 | class Person { public name: string private isMale: boolean constructor(name: string, isMale: boolean) { this.name = name; this.isMale = isMale; } } |
Üstteki tanımın typescript tarafındaki daha kısa hali alttaki gibidir ama dikkat etmeniz gereken bir durum var constructor’da tanımlanan parametre adından önce public yada private tanımını yapmanız gerekiyor yapmazsanız constructor parametresine karşılık gelen özellik oluşturulmayacaktır ayrıca public tanımlama yaparsanız örneğini aldığınız Person nesnesi içerisindeki özelliğe erişebilirsiniz alttaki örneğimizde name özelliği üstteki örnekte olduğu gibi public yani dışarıdan erişilebilir ama isMale özelliğine sadece Person nesnesi içerisindeki fonksiyonlar ve özelliklerin get, set blokları içerisinden kullanabiliriz.
1 2 3 4 | class Person { constructor(public name: string, private isMale: boolean) { } } |
Varsayılan ve Opsiyonel Parametre
Yeri gelmişken constructor ve fonksiyonlarda kullanılabilecek varsayılan ve opsiyonel parametreler tanımlayabilirsiniz. Alttaki örneği üstteki örnekten yola çıkarak yazdık constructor’da yer alan isMale parametresine varsayılan olarak true değerini verdik böylelikle bu parametreyi Person sınıfından yeni bir örnek aldığımızda name parametresini doldurup opsiyonel olarak isMale parametresini doldurmak zorunda değilsiniz zaten varsayılan değerinin true olduğu belirtmiştik.
1 2 3 4 | class Person { constructor(public name: string, private isMale: boolean = true) { } } |
Abstract Class
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | abstract class Shapes { // must be implemented in derived classes abstract Area(): number; } class Square extends Shapes { side: number = 0; constructor(n: number) { super(); // Shapes adındaki miras aldığımız sınıf içerisindeki default constructor'ın çalıştırılmasını sağlıyoruz. this.side = n; } // implemented Area method Area(): number { return this.side * this.side; } } class Rectangle extends Shapes { length: number = 0; width: number = 0; constructor(length: number, width: number) { super(); //mandatory to call parent class constructor this.length = length; this.width = width; } // Area metodu tanımı. Area(): number { return this.length * this.width; } } let s = new Square(4); s.Area(); //16 let r = new Rectangle(4, 3); s.Area(); //12 |
Property Erişim Belirleyiciler(Accessors)
C#’daki gibi bir özelliğin get-set bloklarını ayarlayabiliyoruz değer set etme esnasında encapsulate edip değer ile ilgili gerekli kontrollerimizi gerçekleştirebiliyoruz.1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | class Employee { private passcode: string; private _fullName: string; constructor(_passcode?: string) { this.passcode = _passcode; } get fullName(): string { //Değere erişim return this._fullName; } set fullName(newName: string) { //Değeri ayarlama if (this.passcode == "secret_passcode") { this._fullName = newName; } else { console.log("Hata: Yetkisiz güncelleme!"); } } } let e1 = new Employee("secret_passcode"); e1.fullName = "Murat Öner"; if (e1.fullName) { console.log(e1.fullName); } let e2 = new Employee(); e2.fullName = "Sakine Öner"; //Hata: Yetkisiz güncelleme! if (e2.fullName) { console.log(e1.fullName); } |
Readonly Property
readonly tanımı sayesinde sadece okunabilir özellik tanımlama.1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | class Company { readonly country: string = "Türkiye"; readonly name: string; constructor(_name: string) { this.name = _name; } showDetails() { console.log(this.name + " : " + this.country); } } let c1 = new Company("MHG Yazılım"); c1.showDetails(); // MHG Yazılım : Türkiye c1.name = "TCS"; //Hata, name özelliğine sadece contructor içerisinden erişip değer set edebilirsiniz. |
Generic Class
C#’dakiList<T> mantığında bir generic sınıf oluşturalım.1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | class List<T> { private _items: Array<T> constructor() { this._items = new Array() } Add(...items: T[]) { for (const item of items) this._items.push(item) } Remove(...items: T[]) { for (const item of items) { let i = this._items.indexOf(item) if ( i > -1) this._items.splice(i, 1) } } RemoveAt(index: number): boolean { return this._items.splice(index, 1).length > 0 } Clear() { this._items = new Array() } ToArray(): Array<T> { return this._items } } |
Typescript Nedir Sonucu
Bu makalede detaylı olarak Typescript nedir, nasıl kurulur ve nasıl kullanılır sorularına bol örneklerle cevap bulmaya çalıştık ve umarım faydalı olmuştur.📚 Typescript Nedir Benzeri Makaleler
📚 Typescript Nedir Kaynakları
✍ Lütfen Typescript Nedir konulu makale için olumlu-olumsuz tüm görüşlerinizi bana yorum yada mail yolu ile iletmeyi ihmal etmeyin.🔗 Sosyal medya kanallarından Typescript Nedir konulu makaleyi paylaşarak destek olursanız çok sevinirim.👋 Bir sonraki makalede görüşmek dileğiyle.Typescript Nedir ve Nasıl Kurulur?, Typescript Nedir ve Nasıl İndirilir?, Typescript Nedir ve Ne İşe Yarar?, Typescript Nedir ve Neden Kullanılır?, Typescript Nedir ve Kim Kullanır?, Typescript Nedir ve Neden Kullanılmalı?, Typescript Nedir ve Özellikleri Nelerdir?, Typescript Nedir ve Ne Zaman Çıktı?
