TypeScript Geliştirme Ortamı Hazırlama

Merhaba Arkadaşlar,

Bu yazımızda sizlere TypeScript geliştirme ortamının (TypeScript Development Environment) nasıl hazırlanacağından bahsedeceğim.

Öncelikle bu çalışmamda bana her türlü maddi ve manevi desteğini esirgemeyen Taha İpek kardeşime gönülden teşekkürlerimi sunarım.

İlk olarak bilgisayarımıza NPM kurmalıyız. NPM nedir ve nasıl kullanılır hakkında bilgi almak için https://medium.com/@busramemis/npm-nedir-bc08c9610df2 adresindeki yazıya bakabilirsiniz.

Yazının kaybolması ihtimaline karşın bir kopyasına https://collabtr.com/npm-nedir/ adresinden ulaşabilirsiniz.

Ben editor olarak Visual Studio Code kullanacağım. Visual Studio Code hakkında bilgi almak için bu adrese bakabilirsiniz.

Proje klasörü

İlk olarak boş bir klasör oluşturuyoruz. Ben bu klasöre TypeScript ismini veriyorum.

Klasör içerisinde bazı klasör ve dosyalar oluşturacağız. İlk oluşturacağım klasörler src ve dist. src klasörüne typescript dosyalarımı atacağım yani kaynak dosyalarını saklayacağım.

dist klasörü ise dağıtımın ingilizcesi olan distribution’ın kısaltması. Bu klasöre yapacağımız işlemler sonrası ts’nin üreteceği (transpile edeceği) js dosyalarını atacağız.

Bir sonraki dosyam src klasörü içerisinde app.ts ve app.ts içerisinde çağırmak için class.ts dosyasını oluşturacağım.

app.ts

See the gist on github.

class.ts

See the gist on github.

Bu dosyalarda yaptığım şu: class.ts içerisinde bir class oluşturdum. Bu class’a ait iki property tanımladım. Birisi name, diğeri lastname. Yani ad ve soyad. Class’a bir de displayName adında bir method tanımladım. Bu method, class içerisindeki isim ve soyismi birleştirip html dosyamız içerisinde gösterecek. Burada dikkat edeceğiniz husus app.ts içerisinin en üstünde class.ts dosyasını çağırıyoruz ve bu sınıftan yeni bir obje oluşturuyoruz. Sonra sınıf içerisindeki displayName methodunu çağırıyoruz.

class.ts dosyası içerisinde dikkat edeceğimiz iki husus var. Birincisi; es6 ile beraber gelen arrow function yöntemini kullandık. İkincisi ise es6’in başka bir özelliği olan template literals’ı kullandık.

Niçin bundan bahsediyorum. Yazının ilerleyen kısımlarında göreceksiniz, TypeScript bu dosyaları transpile ederken es6 ya göre değil es5’e göre çevirecek. es5’de yukarıda bahsettiğim iki özellik bulunmamaktadır. Ama TypeScript sayesinde bu iki güzel özelliği kullanabiliyoruz.

index.html

See the gist on github.

Burada dikkat etmemiz gereken basit bir html dosyası ama body etiketinin sonunda ileride dist klasörü altında oluşturacağımız bundle.js dosyasını çağırıyoruz.

package.json

See the gist on github.

package.json dosyasının ne işe yaradığından kısaca bahsetmek isterim. https://medium.com/@busramemis/npm-nedir-bc08c9610df2 adresinde göreceğiniz üzere bu dosya projenizde kullandığınız npm paketlerinin listesini saklar. Bizim package.json dosyamızda kullanacağımız paketleri devDepencies altında tutuyor. Bunun sebebi bu paketleri production (canlıda) ortamında kullanmayacak olmamız. Bu dosyayı kendi klasörünüzee kopyalayıp komut satırında “npm i” yazarsanız npm paket yöneticisi bu dosyaya bakar ve gerekli olan paketleri proje klasörünüze internetten indirip yükler.

Örnek video

Bu dosyada geçen script node’unun altındaki kısımlardan ileride bahsedeceğiz.

tsconfig.json

Bu dosyamız TypeScript’in yapılandırma ayarlarını barındırır. Varsayılan olarak bu klasördeyken komut satırı üzerinden tsc -init yazarsanız sizin için otomatik olarak bu dosyayı oluşturacaktır.

See the gist on github.

Bu dosya hakkındaki açıklamalarımız şu şekilde;

1. module ayarını commonjs olarak belirliyoruz. Bu işlem ts dosyaları arasında import export işlemlerini nasıl yapacağımızı belirliyor. Detaylı bilgi için TypeScript modules şeklinde araştırabilirsiniz.
2. target ayarını es5 olarak seçiyoruz. Bu TypeScript’in transpile edeceği dosyaların yani app.ts ve class.ts dosyalarının çıktısı olarak es5 standardı olarak üreteceğini belirliyoruz.

Örnek video

webpack.config.json

webpack paketi bizim birden fazla ts veya js dosyasını birleştirerek tek bir dosya çıkartır. Bu sayede birbirine dahil etttiğimiz ts dosyalarını bularak tek bir dosya altında toplar. Bu dosyamızda webpack’in yapılandırma dosyasıdır.

See the gist on github.

Bu dosyada dikkat edeceğimiz husular;

1. entry ayarı bizim webpack tarafından işlenecek ana dosyamızı işaret eder.
2. module rules kısmında belirttiğimiz ts-loader başka bir npm paketimizdir. ts-loader paketi, webpack dosyalarının ts doyaları ile çalışmasını sağlıyor. Normal şartlarda webpack js dosyaları ile beraber çalışır. Bu loader ile webpack ts dosyalarını okuyup tek bir dosya haline getirebiliyor. Tek dosya haline getirme işlemine bundle diyoruz.
3. mode kısmında yazıdığımız production ayarı webpack’in bundle işlemi sonrası üretilen js dosyasını minify (küçültme) ve uglify etmesi için gereklidir. minify etmesi demek script içerisindeki boşluk ve satırları kaldırıp kb cinsinden daha küçük bir dosya haline getirmesini sağlar. uglify ise üretilen js dosyasındaki değişken, fonksiyon, class isimlerini kısaltıp (a, b, c, x gibi) dosyayı küçültür ve güvenlik olarak işleri biraz zorlaştırıyor.
4. resolve extension kısmında webpack’in hangis uzantılı dosyalar ile çalışacağını anlatıyor.

Dizin Ağacı

Sonuç olarak çalışma klasörümüz aşağıdaki gibi olacaktır.

│   index.html
│   package.json
│   tsconfig.json
│   webpack.config.js
├───dist
└───src
    ├───app.ts
    └───class.ts

Ver coşkuyu…

Şu ana kadar her şeyimiz hazır olması gerekiyor. Şimdi çıktımızı alalım. Bu işlem için daha önce package.json dosyamızda yazdığımız komutları kullanacağız. O dosyada geçen scripts kısmında belirttiğimiz bundle takma adı ve karşılığı olan webpack işlemini tetikleyeceğiz. bundle yerine istediğiniz ismi verebilirsiniz. Komut satırında “npm run bundle” yazarsanız webpack çalışıp ts dosyalarını okuyup tsc yardımıyla js dosyasına çevirir ve tek dosyada toplar. Ardından uglify-webpack-plugin kullanarak dosyamızı küçültür. index.html dosyamızı çalıştırıp sonucu görebiliriz.

Örnek proje dosyalarını https://github.com/hasankoroglu/TypeScript/tree/master/ts-loader adresinden inceleyebilirsiniz.

Yaptığımız tüm işlemleri aşağıdaki videodan görebilirsiniz.

Başka bir makalemizde görüşmek üzere…