dikodoksit
Kömür Madencisi
- En iyi cevaplar
- 0
TypeScript #1: Giriş, Yükleme ve Hello World
TypeScript nedir?
TypeScript, Microsoft tarafından oluşturulmuş, açık kaynak kodlu, JavaScript’in bir üst sınıfı olan programlama dilidir.
Neden JavaScript yerine TypeScript?
JavaScript çok uzun zamandır en popüler programlama dili. Ve gitgide daha da popüler olmakta. Bunun en basit sebeplerinden biri ise JavaScript ile Android, IOS, Web veya Masaüstü programları yapmanız mümkün. Bir programlama dilinin popüler olmasının faydası, o programlama dilinin gelişme hızını büyük ölçüde etkilemesidir. Sadece sayısız JavaScript framework’lerine bakarak bunu çok rahat anlayabilirsiniz. Ve bunlar da genellikle ucuz ya da boş beleş firmalardan çıkan işler değiller. Örnek verecek olursak, Google’ın oluşturduğu Angular / Angular2 framework’leri, Facebook’un oluşturduğu React framework’ü, Atom’un oluşturduğu Electron framework’ü, JQuery, Node, Socket, CoffeeScript bunlardan sadece birkaçı. Kısacası, isteyebileceğiniz her şey için ya bir JavaScript framework’ü bulunmakta, ya da muhtemelen gelecekte bulunacak.
Peki madem JavaScript bu kadar destekleniyor, neden TypeScript?
Size 2 sebep vereceğim, muhtemelen yeterli olacaktır. Eğer yeterli olmazsa, Microsoft’un uzunca yaptığı TypeScript tanıtm videosuna
Birincisi:
Yukarıda da belirttiğim gibi, TypeScript, JavaScript’in bir üst sınıfı. Yani, JavaScript’in her özelliğine zaten sahip, fakat ekstra özellikleri de mevcut. Kısacası, JavaScript’te çalışan herhangi bir kod, ya da kullandığınız herhangi bir JavaScript framework’ü (örneğin JQuery), TypeScript’te de aynı şekilde yazıldığında, aynı şekilde çalışacaktır. Lakin, TypeScript, bir yandan JavaScript’in açıklarını kapatırken bir yandan da ekstra özellikler sunuyor. Yani TypeScript, düz bir script dili gibi gözüken JavaScript’ten ziyade, her anlamda, nesne yönelimli programlama dili kavramının özelliklerini taşıyor.
Sınıf tanımlama, static, private, public değişkenler oluşturma, implements, extends, inherits özelliklerini sınıflara dahil etme ise bu bahsettiğimiz özelliklerden birkaçı.
İkincisi:
JavaScript’in en popüler framework’lerinden biri Angular’ın yeni sürümü olan Angular2, Angular’dan çok daha farklı bir yapıya sahip. Bu izlediği yapıyı da tam anlamıyla uygulayabilmeniz için, kendi dökümanlarında da tavsiye ettikleri gibi, TypeScript bilmeniz size çok büyük avantaj sağlamakta.
TypeScript’i Yükleme ve Çalıştırma
TypeScript’i yüklemeniz için iki yol mevcut.
1: NPM kullanarak (NodeJS’in paket yönetimi)
2: TypeScript’in Visual Studio eklentilerini yükleyerek
Ben sadece, 1. yolu anlatacağım.
NPM kullanarak TypeScript yükleme
1) NPM yükleme
Eğer bilgisayarınızda NodeJS yüklüyse, 2. kısma atlayabilirsiniz.
a) Windows ve Macintosh kullanıcıları için,
NodeJS’i indirmek için
Karşınıza gelen bu sayfada, işletim sisteminize göre olan seçeneği seçip NodeJS yükleme dosyasını indirin. Sol taraftaki LTS, NodeJS’in stabil sürümünü, Current ise son sürümünü ifade etmekte. Stabil sürümü indirmeniz, çok fazla açıdan sizin yararınıza olacaktır.
Yükleme oldukça basit. İnen dosyayı açtıktan sonra “Next, Next(...), Install” şeklindeki talimatları takip ederek yüklemenizi tamamlayabilirsiniz.
b) Arch Linux kullanıcıları için,
1: CTRL + ALT + T tuşlarına basarak terminali açın.
2: pacman -S nodejs npm komutunu terminale girin ve Enter’a basın ve yüklemenin bitmesini bekleyin.
c) Ubuntu ve Debian tabanlı Linux dağıtımları kullananlar için,
1: CTRL + ALT + T tuşlarına basarak terminali açın.
2: Terminale, alt taraftaki kodlardan, önce üstteki, sonra alttaki kodu girin ve yüklemenin bitmesini bekleyin.
curl -sL
sudo apt-get install -y nodejs
2) TypeScript yükleme
a) Komut Paneli’ni / Terminali açma,
Eğer Linux kullanıyorsanız CTRL + ALT + T tuşlarına basarak terminali çalıştırın.
Eğer Macintosh kullanıyorsanız Applications klasörünü açıp, daha sonra Utilities klasörüne girerek buradaki Terminal aplikasyonunu çalıştırın.
Eğer Windows kullanıyorsanız, klavyenizde sol tarafta bulunan CTRL tuşunun hemen sağındaki Windows tuşuna basılı tutarken X tuşuna basın, açılan pencerede Komut Paneli’ne sağ tıklayıp ‘Yönetici olarak çalıştır’ a basın.
b) TypeScript’i yükleme,
Eğer Windows kullanıyorsanız komut panelinize aşağıdaki komutu yazıp enter’a basarak yüklemenin bitmesini bekleyin.
npm install -g typescript
Eğer Linux ya da Macintosh kullanıyorsanız terminale aşağıdaki komutu yazıp enter’a basarak yüklemenin bitmesini bekleyin.
sudo npm install -g typescript
**buradan sonra yapılacak her işlem, her işletim sistemi için aynıdır.
TypeScript kodlarını yazmak istediğiniz klasörün içerisine, komut paneli aracılığıyla gidin. Bunun için,
cd full/klasör/yolu/adı
komutunu kullanın (eğer Windows’ta C içerisine TypeScriptDersleri diye bir klasör açarsanız buraya gitmek için yazacağınız örnek komut: cd C://TypeScriptDersleri/).
(Yukarıdaki resimde de, Linux işletim sistemli bilgisayarımda daha önceden oluşturduğum TypeScriptDersleri klasörümün bulunduğu tam yolu yazarak, bu klasöre ilerledim.)
Belirttiğiniz klasör içerisinde, sağ tıklayıp TypeScript kodlarınızı yazacağınız ‘.ts’ uzantılı bir dosya oluşturun. Dosyanın adı herhangi bir şey olabilir, biz ‘helloworld.ts’ isimli bir dosya açacağız.
Artık, terminale/komut paneline geri dönüp son bir komut yazarak TypeScript kodlamaya başlayabiliriz. Yazacağımız bu komut, TypeScript dosyamızın içerisine yazacağımız her kodu, yazdığımız anda, TypeScript dosyamızın bulunduğu yerde aynı isimde bir JavaScript dosyası oluşturup bu dosyaya EcmaScript 6 (diğer adı EcmaScript 2015) halinde derleyerek yazacak. Bu nedenle, TypeScript yazarken komut panelimizin/terminalimizin açık kalması gerek.
tsc helloworld.ts –-watch –-target ES6
Bu komutu yazıp enter’a bastığınız an, bulunduğunuz klasörde helloworld.js isimli bir dosya oluşturulacak. Bu dosya, bizim web sayfamıza dahil edeceğimiz dosya. Bu dosyayı ellemeyin.
Yaptıklarımızın işe yarayıp yaramadığını denemek için, düz bir index.html dosyası oluşturalım ve bunun içerisine TypeScript kodumuzu yazmayı deneyelim.
Oluşturduğumuz bu index.html dosyasını, herhangi bir metin editörü ile açalım (ben Atom ile açtım, siz istediğiniz metin editörünü kullanabilirsiniz.). İçerisine derleyicimizin tüm TS kodlarımızı derleyip kaydedeceği JavaScript dosyasını (helloworld.js), HTML kodları yazarak aşağıdaki gibi dahil edelim (unutmayın, çalışması için .ts uzantılı dosyayı değil, .js uzantılı dosyayı sayfamıza dahil etmemiz gerek).
Tüm bu yaptıklarımızı denemek için helloworld.ts (yine dikkat edelim, .js uzantılı değil .ts uzantılı dosyaya yazıyoruz, daha önceden yaptığımız şeyler yazacağımız kodları otomatik olarak .js uzantılı dosyaya derleyip kaydedecektir.) dosyamızı bir metin editörüyle açıp, aşağıdaki basit, JavaScript’te de kullanılan kodu yazalım ve kaydedelim (yazacağımız kodun ne işe yaradığını daha sonraki derslerde anlatacağım, şimdilik test amaçlı bir Hello World programı oluşturuyoruz).
Şimdi ‘index.html’ dosyamızı web tarayıcımız ile (Chrome, Firefox, Opera, Edge, Explorer [Explorer’da çalışmayabilir]) açalım (tarayıcı ile açmak için dosyaya sağ tıklayıp, birlikte aç’a bastıktan sonra, tarayıcınızı seçmelisiniz).
Eğer her şeyi doğru ve aynı yaptıysanız, açılan web sayfasında, yukarıdaki gibi 'hello world heheh' yazacaktır. Henüz pek bir şey yapmadık fakat TypeScript kodumuzun eş zamanlı olarak JavaScript dosyamıza derlenip kaydedildiğini denemiş ve TypeScript’in ne olduğu hakkında fikir sahibi olmuş olduk.
Çok uzun olmayan bir zaman sonra, TypeScript’te değişkenleri anlatarak devam edeceğim.
İyi günler!
TypeScript nedir?
TypeScript, Microsoft tarafından oluşturulmuş, açık kaynak kodlu, JavaScript’in bir üst sınıfı olan programlama dilidir.
Neden JavaScript yerine TypeScript?
JavaScript çok uzun zamandır en popüler programlama dili. Ve gitgide daha da popüler olmakta. Bunun en basit sebeplerinden biri ise JavaScript ile Android, IOS, Web veya Masaüstü programları yapmanız mümkün. Bir programlama dilinin popüler olmasının faydası, o programlama dilinin gelişme hızını büyük ölçüde etkilemesidir. Sadece sayısız JavaScript framework’lerine bakarak bunu çok rahat anlayabilirsiniz. Ve bunlar da genellikle ucuz ya da boş beleş firmalardan çıkan işler değiller. Örnek verecek olursak, Google’ın oluşturduğu Angular / Angular2 framework’leri, Facebook’un oluşturduğu React framework’ü, Atom’un oluşturduğu Electron framework’ü, JQuery, Node, Socket, CoffeeScript bunlardan sadece birkaçı. Kısacası, isteyebileceğiniz her şey için ya bir JavaScript framework’ü bulunmakta, ya da muhtemelen gelecekte bulunacak.
Peki madem JavaScript bu kadar destekleniyor, neden TypeScript?
Size 2 sebep vereceğim, muhtemelen yeterli olacaktır. Eğer yeterli olmazsa, Microsoft’un uzunca yaptığı TypeScript tanıtm videosuna
Linki görebilmek için üye olmanız gerekiyor.
Giriş yap veya üye ol.
bu linkten ulaşabilirsiniz.Birincisi:
Yukarıda da belirttiğim gibi, TypeScript, JavaScript’in bir üst sınıfı. Yani, JavaScript’in her özelliğine zaten sahip, fakat ekstra özellikleri de mevcut. Kısacası, JavaScript’te çalışan herhangi bir kod, ya da kullandığınız herhangi bir JavaScript framework’ü (örneğin JQuery), TypeScript’te de aynı şekilde yazıldığında, aynı şekilde çalışacaktır. Lakin, TypeScript, bir yandan JavaScript’in açıklarını kapatırken bir yandan da ekstra özellikler sunuyor. Yani TypeScript, düz bir script dili gibi gözüken JavaScript’ten ziyade, her anlamda, nesne yönelimli programlama dili kavramının özelliklerini taşıyor.
Sınıf tanımlama, static, private, public değişkenler oluşturma, implements, extends, inherits özelliklerini sınıflara dahil etme ise bu bahsettiğimiz özelliklerden birkaçı.
İkincisi:
JavaScript’in en popüler framework’lerinden biri Angular’ın yeni sürümü olan Angular2, Angular’dan çok daha farklı bir yapıya sahip. Bu izlediği yapıyı da tam anlamıyla uygulayabilmeniz için, kendi dökümanlarında da tavsiye ettikleri gibi, TypeScript bilmeniz size çok büyük avantaj sağlamakta.
TypeScript’i Yükleme ve Çalıştırma
TypeScript’i yüklemeniz için iki yol mevcut.
1: NPM kullanarak (NodeJS’in paket yönetimi)
2: TypeScript’in Visual Studio eklentilerini yükleyerek
Ben sadece, 1. yolu anlatacağım.
NPM kullanarak TypeScript yükleme
1) NPM yükleme
Eğer bilgisayarınızda NodeJS yüklüyse, 2. kısma atlayabilirsiniz.
a) Windows ve Macintosh kullanıcıları için,
NodeJS’i indirmek için
Linki görebilmek için üye olmanız gerekiyor.
Giriş yap veya üye ol.
adresine gidin.
Karşınıza gelen bu sayfada, işletim sisteminize göre olan seçeneği seçip NodeJS yükleme dosyasını indirin. Sol taraftaki LTS, NodeJS’in stabil sürümünü, Current ise son sürümünü ifade etmekte. Stabil sürümü indirmeniz, çok fazla açıdan sizin yararınıza olacaktır.
Yükleme oldukça basit. İnen dosyayı açtıktan sonra “Next, Next(...), Install” şeklindeki talimatları takip ederek yüklemenizi tamamlayabilirsiniz.
b) Arch Linux kullanıcıları için,
1: CTRL + ALT + T tuşlarına basarak terminali açın.
2: pacman -S nodejs npm komutunu terminale girin ve Enter’a basın ve yüklemenin bitmesini bekleyin.
c) Ubuntu ve Debian tabanlı Linux dağıtımları kullananlar için,
1: CTRL + ALT + T tuşlarına basarak terminali açın.
2: Terminale, alt taraftaki kodlardan, önce üstteki, sonra alttaki kodu girin ve yüklemenin bitmesini bekleyin.
curl -sL
Linki görebilmek için üye olmanız gerekiyor.
Giriş yap veya üye ol.
| sudo -E bash -sudo apt-get install -y nodejs
2) TypeScript yükleme
a) Komut Paneli’ni / Terminali açma,
Eğer Linux kullanıyorsanız CTRL + ALT + T tuşlarına basarak terminali çalıştırın.
Eğer Macintosh kullanıyorsanız Applications klasörünü açıp, daha sonra Utilities klasörüne girerek buradaki Terminal aplikasyonunu çalıştırın.
Eğer Windows kullanıyorsanız, klavyenizde sol tarafta bulunan CTRL tuşunun hemen sağındaki Windows tuşuna basılı tutarken X tuşuna basın, açılan pencerede Komut Paneli’ne sağ tıklayıp ‘Yönetici olarak çalıştır’ a basın.
b) TypeScript’i yükleme,
Eğer Windows kullanıyorsanız komut panelinize aşağıdaki komutu yazıp enter’a basarak yüklemenin bitmesini bekleyin.
npm install -g typescript
Eğer Linux ya da Macintosh kullanıyorsanız terminale aşağıdaki komutu yazıp enter’a basarak yüklemenin bitmesini bekleyin.
sudo npm install -g typescript
**buradan sonra yapılacak her işlem, her işletim sistemi için aynıdır.
TypeScript kodlarını yazmak istediğiniz klasörün içerisine, komut paneli aracılığıyla gidin. Bunun için,
cd full/klasör/yolu/adı
komutunu kullanın (eğer Windows’ta C içerisine TypeScriptDersleri diye bir klasör açarsanız buraya gitmek için yazacağınız örnek komut: cd C://TypeScriptDersleri/).
(Yukarıdaki resimde de, Linux işletim sistemli bilgisayarımda daha önceden oluşturduğum TypeScriptDersleri klasörümün bulunduğu tam yolu yazarak, bu klasöre ilerledim.)
Belirttiğiniz klasör içerisinde, sağ tıklayıp TypeScript kodlarınızı yazacağınız ‘.ts’ uzantılı bir dosya oluşturun. Dosyanın adı herhangi bir şey olabilir, biz ‘helloworld.ts’ isimli bir dosya açacağız.
Artık, terminale/komut paneline geri dönüp son bir komut yazarak TypeScript kodlamaya başlayabiliriz. Yazacağımız bu komut, TypeScript dosyamızın içerisine yazacağımız her kodu, yazdığımız anda, TypeScript dosyamızın bulunduğu yerde aynı isimde bir JavaScript dosyası oluşturup bu dosyaya EcmaScript 6 (diğer adı EcmaScript 2015) halinde derleyerek yazacak. Bu nedenle, TypeScript yazarken komut panelimizin/terminalimizin açık kalması gerek.
tsc helloworld.ts –-watch –-target ES6
Bu komutu yazıp enter’a bastığınız an, bulunduğunuz klasörde helloworld.js isimli bir dosya oluşturulacak. Bu dosya, bizim web sayfamıza dahil edeceğimiz dosya. Bu dosyayı ellemeyin.
Yaptıklarımızın işe yarayıp yaramadığını denemek için, düz bir index.html dosyası oluşturalım ve bunun içerisine TypeScript kodumuzu yazmayı deneyelim.
Oluşturduğumuz bu index.html dosyasını, herhangi bir metin editörü ile açalım (ben Atom ile açtım, siz istediğiniz metin editörünü kullanabilirsiniz.). İçerisine derleyicimizin tüm TS kodlarımızı derleyip kaydedeceği JavaScript dosyasını (helloworld.js), HTML kodları yazarak aşağıdaki gibi dahil edelim (unutmayın, çalışması için .ts uzantılı dosyayı değil, .js uzantılı dosyayı sayfamıza dahil etmemiz gerek).
Tüm bu yaptıklarımızı denemek için helloworld.ts (yine dikkat edelim, .js uzantılı değil .ts uzantılı dosyaya yazıyoruz, daha önceden yaptığımız şeyler yazacağımız kodları otomatik olarak .js uzantılı dosyaya derleyip kaydedecektir.) dosyamızı bir metin editörüyle açıp, aşağıdaki basit, JavaScript’te de kullanılan kodu yazalım ve kaydedelim (yazacağımız kodun ne işe yaradığını daha sonraki derslerde anlatacağım, şimdilik test amaçlı bir Hello World programı oluşturuyoruz).
Şimdi ‘index.html’ dosyamızı web tarayıcımız ile (Chrome, Firefox, Opera, Edge, Explorer [Explorer’da çalışmayabilir]) açalım (tarayıcı ile açmak için dosyaya sağ tıklayıp, birlikte aç’a bastıktan sonra, tarayıcınızı seçmelisiniz).
Eğer her şeyi doğru ve aynı yaptıysanız, açılan web sayfasında, yukarıdaki gibi 'hello world heheh' yazacaktır. Henüz pek bir şey yapmadık fakat TypeScript kodumuzun eş zamanlı olarak JavaScript dosyamıza derlenip kaydedildiğini denemiş ve TypeScript’in ne olduğu hakkında fikir sahibi olmuş olduk.
Çok uzun olmayan bir zaman sonra, TypeScript’te değişkenleri anlatarak devam edeceğim.
İyi günler!
Ekli dosyalar
-
upload_2016-12-16_6-16-14.png
Son düzenleme: