İ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...



C# Developers Kanalı Açılıyor ve Visual Studio 2013 ile Gelen Yeniliklere Giriş Videosu

Evet artik sessizligi bozmanin zamani geldi :) Bir süredir farkindaysaniz paylasimlarimi biraz yavaslatmistim ve özellikle Visual Studio 2013 ve .NET Framework 4.5.1 ile beraber gelen yeniliklere deginmekten biraz kaçinmistim. :) Bunlarin tabi ki bir nedeni vardi :)

C# Developers Kanali Açiliyor

Bundan yaklasik olarak 4 ay önce yayina açtigimiz Teknolot.TV içerisinde bugün itibariyle C# Developers kanalini açiyoruz. CSDevs.TV uzun süredir gerçeklestirmek istedigim bir projeydi ve sonunda teknik hazirliklari da tamamlayarak kanali açabildim. Kanalin adindan anlayabileceginiz üzere kanalimiz C# Developerlarin ugrak yeri olmaya aday :)  Özellikle bu kanal içerisinde C#, Visual Studio, .NET Framework ve open source libraryler ile ilgili pek çok konuya deginecegiz. Isterseniz ben lafi daha fazla uzatmayayim ve kanalin tanitim ve açilis videosuna geçelim :)

Visual Studio 2013 ile Beraber Gelen Yenilikler

CSDevs.TV kanalimizin ilk teknik videosu da Visual Studio 2013 ile beraber gelen yenilikler üzerine oldu ve gelecek videolarda da Visual Studio 2013 ile beraber gelen yeniliklere deginmeye devam edecegiz.

Bir süre kanala koydugum videolari buradan da paylasiyor olacagim. Ancak yine de son videolara zamaninda ulasmak için Teknolot.TV'yi  ve CSDevs.TV'yi ziyaret etmeyin unutmayin derim :)

Son olarak kanalin logosu ve videolarin basinda bulunan introdaki görselin tasarimi Daron Yöndem'e ait. Developerlar için en zor kisimdir bu tasarim isleri. Benim içinse tam bir kabus. Her zaman oldugu gibi bu konuda da yardimci olarak benim için kabus olan bu isten hizli bir sekilde siyrilmami sagladi :) Ne kadar tesekkür etsem azdir...

Hosçakalin



Build 2013 1.Gün Değerlendirmesi, Windows 8.1, Visual Studio 2013 Preview ve .NET 4.5.1 Preview

Build 2013 konferansi 1. günü an itibariyle sona erdi ve dolu dolu bir günü geride biraktik. Hemen detaylara girelim. :)

Keynote

1. gün keynote ile basladi ve tahmin ettigimiz üzere agirlikli olarak Windows 8.1 temali bir keynote oldu. Keynote kisisel tahminlerimin oldukça üzerine çikti ve pek çok Windows 8.1 özelligi duyuruldu. Keynote'un açilisinda aliskin oldugumuz üzere Steve Ballmer vardi.

Öncelikli olarak en çok ses getiren özellikten bahsedelim :) Start Button Windows 8.1 ile geri döndü. Her ne kadar eski Start Button gibi bir islevi olmasa da kullanicilarin Modern UI ile Desktop arasi geçis yapmasini saglayan bir buton oldu yeni Start Button.

Windows 8 için kullanicilarin en çok istedigi özelliklerden olan boot-to-desktop özelligi de Windows 8.1 ile geldi.

Keynote içerisinde pek çok yeni özellikten bahsedildi. Bunlari tek tek açiklamak mümkün olmasa da kisaca deginmekte fayda var.

  • Gelismis Snap View : Snapping tarafinda büyük yenilikler yapilmis ve artik uygulamalar ekranda istenildikleri oranda ve sayida snap edilebiliyorlar. Böylece bir ekranda 2'den fazla sayida snap edilmis uygulama olabilmekte.
  • Bing ile entegre Windows Search : Bing artik neredeyse Windows içerisine gömülmüs ve full entegrasyon saglanmis. Bir arama yaptiginizda aradiginiz kelime hem bilgisayarinizda hem de Bing'de araniyor ve oldukça güzel bir arayüzle arama sonuçlari gösteriliyor.
  • Uygulamalari Otomatik Olarak Update Edilmesi : Son zamanlarda oldukça popüler bir uygulama olan arka planda uygulama update'i Windows 8.1'e  de geliyor. Artik Store Tile'inda update gelen uygulamalarin sayisi olmayacak ve uygulamalar arka planda otomatik olarak update edilecek ve kullanicilarin her zaman en yeni yazilimi kullanmalari saglanacak.
  • Arttirilmis Multi-Monitor Destegi : Çoklu monitörlerle çalisirken artik ekranlar arasi uygulamalari degistirirken bir ekranda uygulama hangi oranlarda bulunuyorsa diger ekrana geçildiginde de uygulama ayni oranda olacak :)
  • Uygulamalarin Wireless ile Birbirleriyle Konusmasi : Windows Store  uygulamalari Wireless ile birbirleriyle artik konusabilmekte. Demo olarak ise bir uygulamadan alinan kamera görüntüsü dogrudan Wireless üzerinden diger bilgisayardaki uygulamaya iletildi. Bununla ilgili olarak Windows 8.1 ile beraber gelen API'lara bakmakta fayda var.
  • Windows Uygulamalarina Gelen Updateler  ve XBOX Music Uygulamasi : Windows 8.1 ile beraber Microsoft uygulamalarinin çoguna yeni updateler geliyor ve bunlarin yaninda yeni uygulamalar da Store'a eklenmis oluyor. Bunlardan en önemlisi XBOX Music olurken Bing Food & Drink uygulamasi, Facebook uygulamasi ile Bing Fitness uygulamalari da Store'a yeni eklenecek olan uygulamalardan.

Windows 8.1 ile ilgili akilda kalan özellikler bunlar. Tabi ki daha pek çok yenilik var. Developerlar için  oldukça fazla yeni API var. Unutmadan Windows 8.1'in Store üzerinden de dagitilacagini da belirtmek gerek. Tabi her zamanki gibi update'i buradan indirip de bilgisayariniza kurabilirsiniz. Windows 8.1 yil sonundan önce RTM olacak ve Windows 8 kullanicilarina ücretsiz olacak.

Bing As Platform

Keynote'ta yapilan duyurulardan biri de Bing tarafindaydi. Bing artik tamamen developerlara açildi ve Bing'in özelliklerinin artik uygulamalara full entegre edilmesinin yolu açildi. Gerek Bing Maps olsun gerekse sesli komut özelliklerini kullanarak Windows 8 ve Windows Phone 8 uygulamalarina güzel özellikler eklemek mümkün.

 Visual Studio 2013 Preview ve .NET 4.5.1 Preview

Daha önce Teched North America'da duyurulan Visual Studio 2013, Build konferansiyla beraber Preview sürümü developerlara açildi. Teched North America'da daha çok TFS ve Git entegrasyonlariyla lanse edilen Visual Studio 2013 Build tarafinda ise IDE tarafina gelen Productivity yenilikleriyle öne çikarildi.

Connected Visual Studio

IDE tarafinda gelen yeniliklerden biri de artik IDE'ye Live ID'lerimizden birini kullanarak login olmamiz. Tabi bu seçenek zorunlu olmasa da eger IDE'ye live ID'nizi kullanarak bir kere login olursaniz, Visual Studio temalariniz, shortcutlariniz ve diger tüm kisisel ayarlariniz cloudda saklaniyor ve böylece baska makinalarda da Visual Studio kullandiginizda live ID'nizi kullanarak Visual Studio'yu aninda alisik oldugunuz görünüme getirebiliyorsunuz. Böylece evde kendi bilgisayariniz üzerinde, is yerinde is bilgisayari üzerinde farkli Visual Studio ayarlari kullanmaniza veya sifirdan bu ayarlari yapmaniza gerek yok. 1 kere login olup tüm ayarlari Visual Studio'ya eklemek yeterli.

x64 Edit & Continue

Visual Studio 2013 ile beraber gelen en önemli yeniliklerden biri de x64 Edit & Continue. User Voice üzerinde en çok talep edilen özelliklerden biri de artik Visual Studio içerisine entegre edilmis oldu. Artik asagidaki ekrani görmek yok :)

 Async Aware Debugging

.NET 4.5 ve C# 5.0'da asenkron programlamanin yeri oldukça ayri. Artik bahsetme geregi duymuyorum. :) Async metotlari debug ederken call stack penceresinde compiler tarafindan arka planda generate edilen kodlarda görünüyordu ve bu kodlar arasinda neredeyse kayboluyorduk. Visual Studio 2013 ile beraber artik call stack penceresinde compiler tarafindan generate edilen kodlar toparlanmis ve kapali olarak gösteriliyor. Böylece uygulamanin ana akisina hizli bir sekilde erisebiliyoruz.

Visual Studio 2012'de call stack penceresi

 Code Editör Yenilikleri - CodeLens ve Peek Özellikleri

Visual Studio 2013 ile beraber editor tarafinda da güzel yenilikler geliyor. Özellikle Visual Studio 2013 ile beraber developerlarin pencereler arasi gezmesi en aza indirgenmeye çalisilmis ve mümkün oldugu kadar ayni kod penceresi içerisinde kalarak istedikleri kodlara ulasabilmeleri saglanmis.

Bu kapsamda gelen yeniliklerden biri de peek özelligi. Peek özelligi ile artik bir tipin üzerine gelip ALT + F12 yaparsaniz ilgili tipin tanimi artik bulundugunuz kod penceresinde altta açilmakta. Böylece yeni bir pencereye geçip sonra eski pencereye geri dönmeye gerek kalmamakta.

Visual Studio 2013 tarafinda üretkenlik, diagnostics ve source control taraflarindan pek çok yenilik bulunmakta. En kisa zamanda bu yenilikleri Teknolot.TV'de inceliyor olacagiz. Visual Studio 2013 Preview'i buradan indirebilirsiniz.

Teknolot.TV ve Giik.FM 1. Gün Paylasimlarimiz

Build'in 1. gününü degerlendirdigimiz Teknolot.TV kayitlarimiz su an itibariyle yayinda. Buradan 1. gün degerlendirmemize ulasabilirsiniz. Ayrica Windows 8.1 cihazlarla ilgili yaptigimiz degerlendirmelere de buradan ulasabilmeniz mümkün.

Giik.FM tarafinda ise 1. gün degerledirme podcastimize buradan ulasabilirsiniz.

Anlayacaginiz her türlü platform için paylasimlarimiz mevcut.

Bakalim Build'de 2. gün neler getirecek. :)

Hosçakalin