İlkay İlknur

just a developer...

Typescript Development Araçları

Bu makaleye Github üzerinden katkıda bulunabilirsiniz.

Typescript Development Araçları

Bir önceki yazımızda "Typescript Nedir ?" konusuna değinmiştik. O yazıda örneklerimizi online bir araç olan Typescript Playground'u kullanarak gerçekleştirmiştik. Bu yazımızda Typescript ile uygulama geliştirmek istediğimizde bilgisayarımızda kullanabileceğimiz araçları inceleyeceğiz. Zaman kaybetmeden ilkiyle başlayalım.

Visual Studio 2015 & 2013

Visual Studio kullanarak Typescript ile uygulamalar geliştirebiliyoruz. Visual Studio 2013 için bir extension yüklemek gerekirken Visual Studio 2015 ile bu extension default olarak kurulu geliyor. Ayrıca ücretsiz olarak kullanabileceğiniz Visual Studio Community Edition ile de Typescript development yapmak mümkün.

Yukarıda bahsettiğim Visual Studio sürümlerinden herhangi birini bilgisayarınıza kurduğunuzda yeni bir project yaratmak istediğinizde diğer diller seçeneğinde artık Typescript'i de görüyor olacaksınız.

"HTML Application with Typescript" proje tipi üzerinden yeni bir proje yaratırsanız doğrudan Typescript'in sağladığı tüm yeteneklere ve özelliklere erişiminiz olacaktır.

Eğer hali hazırda bir javascript kodunuz varsa solution içerisine bir Typescript dosyası eklediğinizde Visual Studio projenize otomatik olarak Typescript desteği ekleyecektir.

NPM ile Typescript Compilerını Yükleme

Bundan sonra bahsedeceğimiz Visual Studio haricindeki alternatifleri kullanmadan önce bilgisayarımıza NPM üzerinden Typescript compilerını kurmamız gerekiyor. Çünkü Visual Studio bu kurulumları otomatik olarak yaparken diğer alternatifler için bizim kurulum işlemini manuel olarak yapmamız gerekiyor. Eğer bilgisayarınızda NPM yok ise öncelikle https://nodejs.org/ üzerinden bilgisayarımıza uygun nodejs sürümünü yüklememiz gerekiyor. Sonrasında da aşağıdaki commandi kullanarak Typescript compilerını bilgisayarımıza yükleyebiliriz.

npm install -g typescript 

Geçtiğimiz -g parametresi Typescript'i global olarak bilgisayarımıza kurmamızı sağlıyor. Typescript compilerını bu şekilde bilgisayarımıza kurduktan sonra alternatif geliştirme araçlarını artık kullanabiliriz.

tsconfig.json

Yine bundan sonra araçları kullanırken mutlaka kullanamamız gereken yapılardan biri de tsconfig.json dosyası. tsconfig.json dosyası Typescript compilerına derleme ile ilgili bir takım bilgileri iletmemizi sağlıyor. Derleyeceğiniz Typescript dosyalarının bulunduğu klasörün root'una tsconfig.json dosyası koyarsanız Typescript compilerı da buradaki bilgiler doğrultusunda Typescript kodlarınızı Javascript'e çevirecektir.

tsconfig.json dosyasının içerisini kısaca incelersek, aslında karşımıza compilerOptions, files ve exclude isminde üç farklı alan çıkıyor. files alanı Typescript compilerının klasör içerisinde sadece belirtilen Typescript dosyalarının derlenmesini sağlıyor. exclude alanı ise files'ın tam tersi olarak belirtilen dosyaların veya klasörlerin Typescript compilerı tarafından derlenmemesi gerektiğini belirtiyor. Bu iki alan da opsiyonel alanlar. Yani bu alanların ikisini de boş geçerseniz Typescript compilerı klasör içerisindeki bütün Typescript dosyalarını derleyecektir.

compilerOption alanı ile de derleyeciye derleme operasyonu ile ilgili direktifler verebiliyoruz. Örneğin Typescript kodlarının Ecmascript 5 versiyonuna göre çevrilmesi veya çevrilirken commentlerin silinmesi gibi pek çok farklı direktifi bu alandan compilera iletebiliyoruz. tsconfig.json dosyasında bulunan tüm alanlarla ile ilgili detaylı bilgiyi burada bulabilirsiniz.

Aşağıda örnek bir tsconfig.json dosyası bulabilirsiniz.

{
"compilerOptions": {
"module": "commonjs",
"noImplicitAny": true,
"removeComments": true,
"preserveConstEnums": true,
"out": "../../built/local/tsc.js",
"sourceMap": true
},
"files": [
"core.ts",
"sys.ts",
"types.ts",
"scanner.ts",
"parser.ts",
"utilities.ts",
"binder.ts",
"checker.ts",
"emitter.ts",
"program.ts",
"commandLineParser.ts",
"tsc.ts",
"diagnosticInformationMap.generated.ts"
]

Visual Studio Code

Windows, Mac ve Linux platformlarında kullanabileceğimiz ücretsiz alternatiflerden biri de Visual Studio Code.

Visual Studio Code'u yüklediğinizde .ts uzantılı dosyaları açtığınızda otomatik olarak ilgili intellisense ve development kolaylıkları size sağlanıyor. Eğer birden fazla Typescript dosyanız varsa ve bunları birbirlerine referans alıp kullanmak isterseniz öncelikle çalıştığınız klasör içerisine tsconfig.json dosyasını eklemeniz gerekiyor.

Sonrasında ise Shift+Alt+B'ye basarak derleme işlemini başlatıyoruz.

Configure Task Runner seçeneğine basarak devam ediyoruz. Sonrasında klasör içerisine tasks.json isimli bir dosya ekleniyor. Burada Visual Studio Code bizim klasör içerisindeki dosyalarımızı nasıl derleyeceği ile ilgili bilgileri tutuyor. Biz Typescript kullandığımız için aşağıda gördüğünüz üzere Typescript compilerının nasıl çağırılacağı ile ilgili detaylar bu dosya içerisinde tutuluyor. Bu dosya içerisindeki args kısmını siliyoruz. Çünkü yaratılan template içerisindeki örnek olması açısından bir dosya adı eklenmiş. Biz bunu silerek devam ediyoruz. Çünkü derlenecek olan dosyaların adını zaten tsconfig.json dosyası içerisinde vermiştik.

tasks.json dosyasını kaydettikten sonra tekrar Shift+Alt+B'ye basıyoruz ve klasörümüz içerisindeki Typescript dosyalarını derliyoruz. Derleme işlemi bittikten sonra sol tarafta .js uzantılı dosyaların oluştuğunu göreceksiniz.

Sublime Text

Sublime Text de yine Visual Studio Code gibi Mac, Windows ve Linux platformlarında kullanabileceğimiz alternatif araçlardan biri.

Eğer bilgisayarınızda Sublime Text kurulu değilse buradaki adresten kurulumu yapıp sonra da Package Manager'ı Sublime Text'e kurmanız gerekiyor. Bu kurumları yaptıktan sonra package control üzerinden Typescript extensionını Sublime Text'e yükleyebilirsiniz.

Package Control --> Install Package --> TypeScript 

Bu adımları tamamladıktan sonra Ctrl+B ile Typescript dosyalarınızı derleyebilirsiniz. Tabi öncelikle çalıştığınız ana klasör içerisine yukarıda bahsettiğim tsconfig.json dosyasını koymanız gerekiyor.

Notepad :)

Son olarak bahsetmek istediğim alternatif ise Notepad :) Tabi Notepad içerisinde herhangi bir şekilde intellisense vs.. gibi güzellikleri kullanmamız mümkün değil. Ancak diyelim ki mevcut bir Typescript kodunuz var ve hızlı bir şekilde ufak bir değişiklik yapacaksınız. Herhangi bir editör vs.. gerek kalmadan değişikliği yapıp commandline üzerinden derleyip sonucunu görebilirsiniz.

Notepad'le veya herhangi bir editörle değişiklik yaptınız diyelim. Hemen tsconfig.json dosyasının bulunduğu klasörünüzün rootuna commandline'ı kullanarak gidin. Sonrasında da tsc commandini çalıştırın. Bu komutu çalıştırdıktan sonra Typescript compilerı klasör içerisindeki Typescript dosyalarınızı tsconfig.json'daki bilgilere göre derleyecektir.

Hatta ufak bir ipucu da veriyim. Eğer tsc commandine ek olarak -w parametresini geçerseniz, üzerinde değişiklik yaptığınız dosya her değiştiğinde Typescript compilerı değişiklik yapıldığını algılar ve otomatik olarak tekrardan derleme işlemini arka planda otomatik olarak yapar.

Gördüğünüz gibi Typescript ile geliştirme yapmak için kullanabileceğiniz pek çok farklı ortam var. İster bir C# developer olun ister front-end developer olun iki taraftan da aşina olduğunuz ve günlük yaşantınızda kullandığınız araçları işletim sistemi kısıtlaması olmadan kullanarak Typescript kodu yazıp derleyebilirsiniz.

Bir sonraki yazıda görüşmek üzere...



Typescript Nedir

Bu makaleye Github üzerinden katkıda bulunabilirsiniz.

Evet bu yazımızın konusu "Typescript nedir ?". Typescript yeni bir programlama dili değil belki ancak bu yazıda istedim ki bilmeyenler için kısaca bir özet geçelim, bilenler ve kullananlar için de bilgi tazelemesi olsun.

Son yıllarda eminim ki Javascriptin önlenemez bir şekilde yükselişini farketmişinizdir. Javascript artık sadece browserda istemci tarafında işler yapmak için kullandığımız bir dil olmaktan çok daha farklı bir yerde. NodeJS gibi platformlarla artık Javascript serverda da çalışabiliyor. İstemci tarafında çalışan büyük masaüstü uygulamaları geliştirmek de artık Javascript ile mümkün. Bakınız electron.js.

Gördüğünüz gibi aslında başlarda sadece browserda çalışan bir programlama dili olarak tasarlanan Javascript zaman geçtikçe çok daha farklı ve tahmin edilemez bir noktaya ulaştı. Javascript'in ilk tasarlandığı zamanlarda büyük ölçekli uygulamalar geliştirmek için kullanılması çok da planlanmadığından aslında içerisinde büyük ölçekli uygulamalar geliştirirken bize oldukça yardımcı olan classlar, modüller, interfaceler vb.. yapıları da içerisinde bulundurmuyordu. Bu nedenle büyük ölçekli uygulamaları Javascript ile geliştirmek ve geliştirdikten sonra bu uygulamaların bakımını yapmak çokta kolay değil.

Javascript programlama dili aynı zamanda dinamik bir dil. Dinamik olması ona büyük bir güç katarken aynı zamanda development esnasında da bize bir o kadar zorluk çıkarıyor. Kod içerisindeki hataları bulmamız ve kodun bakımını yapmamız zorlaşıyor. Statik programlama dillerinin(C#,Java vb..) development esnasında bize sağladığı güzellikleri (refactoring, find references vb..) düşünürsek Javascript doğası gereği bu yeteneklerden de mahrum kalıyor. Eğer 100-200 satırlı bir kod yazıyorsanız bu eksiklikler size çok kritik gelmese de 10000-20000 satırlık bir uygulama yazıyorsanız emin olabilirsiniz ki bu özellikler size büyük zaman kazandıracaktır.

İşte Typescript'in amacı da aslında yukarıda bahsettiğim Javascript'in sıkıntılı yanlarından bizi kurtarak büyük ölçekli uygulamalar geliştirmemizi sağlamak. Bu nedenle Typescript aslında Javascript'in bir üst kümesi olarak konumlanıyor. Yani Javascript'in sahip olduğunu yapıların daha fazlasını içerisinde barındırıyor. Ayrıca Typescript statik bir dil olduğu için statik programlama dillerinin sahip olduğu yeteneklere de sahip oluyorsunuz.

Typescript kodu derlendiğinde çıktı olarak Javascript kodu üretiliyor. Yani Typescript içerisinde kullandığımız enum, interface gibi yapılar geçerli bir Javascript koduna çevriliyor. Kodumuzun düzenini sağlamak için kullandığımız bazı yapılar ise(örneğin interfaceler) Javascripte bile çevrilmiyor. Onlar sadece derleme işlemi sırasında Typescript tarafından kullanılıyor. Böylece temiz bir Javascript çıktısı elimizde bulunuyor. Ayrıca Typescript sadece derleme esnasında görev aldığı için çalışma zamanında Typescript'ten doğabilecek bir performans sorunu da söz konusu değil. Çünkü Typescript kodu derlenip Javascript kodu üretildiğinde Typescript'in işi burada bitiyor. Bunun yanında dışarıya çıkan kod tamamen Javascript olduğu için Typescript kullandığınız için herhangi ekstra bir runtime veya kütüphane vs.. kullanmanız gerekmiyor.

Bu kadar teorik bilgi sanırım yeterli. Şimdi istiyorsanız kısaca bir Typescript'e göz atalım. Örnek yapabilmek için hızlıca Typescript Playground'u kullanacağız. Typescript Playground, online olarak Typescript'i denememizi ve örnek yapabilmemizi sağlayan bir ortam. Sol tarafa Typescript olarak yazdığımız kodun Javascript'e çevrilmiş halini anında sağ tarafta görebiliyoruz. Unutmadan bahsediyim Typescript Playground da Typescript kullanılarak geliştirilmiş.

Typescript'in Javascript'in bir üst kümesi olduğundan bahsetmiştik. Yani yazdığımız Javascript kodları aynı zamanda geçerli bir Typescript kodu. Dolayısıyla Typescript içerisinde alışık olduğunuz gibi Javascript yazabilirsiniz veya elinizde daha önceden yazılmış Javascript kodları varsa bunları Typescript içerisinde kullanabilirsiniz. Eğer aşağıdaki kodu playground'a kopyalarsanız Typescript'in kodu başarılı bir şekilde derlediğini göreceksiniz.

var button = document.createElement('button');
button.textContent = "Hello";
button.onclick = function () {
    alert("Hello Typescript !");
};

Örneği biraz daha geliştirelim. Örneğin Typescript içerisinde OOP dillerinde olduğu gibi classlar kullanabiliyoruz.

class Hello {
    WriteHelloWorld() {
        alert("Hello World");
    }
}

var hello = new Hello();
hello.WriteHelloWorld();

Typescript tarafından da bu kod aşağıdaki gibi Javascript'e çevriliyor. Dolayısıyla biz classlar üzerinden operasyonlarımızı daha kolay bir şekilde yönetirken Typescript işin Javascript tarafıyla kendisi ilgileniyor.

var Hello = (function () {
    function Hello() {
    }
    Hello.prototype.WriteHelloWorld = function () {
        alert("Hello World");
    };
    return Hello;
})();
var hello = new Hello();
hello.WriteHelloWorld();

Typescript sahip olduğu statik programlama yetenekleri nedeniyle kod yazarken bize tanımladığımız değişkenlerle ilgili tip bilgisi verebiliyor. Aynı zamanda hatalı bir kod yazdığımızda da bu hatayı runtime sırasında değil kodu yazma esnasında alıyoruz. Belki de bu Typescriptin sağladığı en güzel fayda diyebiliriz.

Gördüğünüz gibi Typescript Javascript kodu yazmak istediğimizde işimizi oldukça kolaylaştırıyor. Bu yazı yazıldığı sıralarda Typescript 1.7 versiyonunda ve hızla 2.0 versiyonuna doğru ilerliyor. Pek çok büyük projede şu an Typescript etkin bir şekilde kullanılıyor. Mesela Angular 2 projesi şu an Typescript kullanılarak geliştiriliyor. Yani geleceği oldukça parlak bir programlama dili. Eğer şimdiye kadar hiç duymadıysanız veya kullanmadıysanız bir gözatmanızda fayda var derim. İleride eminim bir şekilde karşınıza çıkacaktır. ;)

Bir sonraki yazıda görüşmek üzere.