dikodoksit
Kömür Madencisi
- En iyi cevaplar
- 0
Not: Yazıları önce Word'e, sonra oradan kopyalayıp buraya yazdığım için bazı yerlerde kaymalar vs. mevcut, farkedebildiklerimi farkettiğimde düzeltiyorum, farkedemediklerimi yorum yoluyla bildirebilirsiniz.
Uyarı: Eğer sizde farklı bir editör ya da IDE ya da editör yüklüyse (Notepad++, Geany, Brackets, Eclipse vs.), muhtemelen TypeScript kodlarınız düzgün şekilde gözükmeyecektir. Bu nedenle TypeScript destekleyen bir editör indirmeniz ya da eğer editörünüzde varsa, TypeScript eklentisini kullandığınız programa dahil etmeniz gerek.
1) Çalışma Ortamı
TypeScript, birçok bilindik IDE’de ve editörde desteklense de (Eclipse, NetBeans, Atom, Emacs vs.), ben kurulumu ve kullanımı basit olan ve her işletim sistemini destekleyen Visual Studio Code’u kullanacağım. Çünkü Visual Studio Code, ekstra bir plugin yüklemeden, direk olarak içerisinde TypeScript kurulu halde geliyor.
Diğer bilindik TypeScript destekleyen editörlere bakmak için
Linki görebilmek için üye olmanız gerekiyor.
Giriş yap veya üye ol.
adresine gidebilirsiniz.Visual Studio Code yükleme,
Öncelikle,
Linki görebilmek için üye olmanız gerekiyor.
Giriş yap veya üye ol.
adresine ilerleyin ve Download’a tıklayarak yükleme dosyasını indirin.Kurulum, Windows ve Macintosh için dosyayı açtıktan sonra ‘Next, Next(...), Install’ talimatlarını takip ederek mümkün.
a) Linux için Visual Studio Code yükleme,
-) Ubuntu ya da Debian tabanlı Linux dağıtımları için,
Sol taraftaki ‘.deb’ yazan indirme linkine tıklayarak yükleme dosyasını indirin.
Önce, indirdiğiniz dosyanın olduğu yere terminali kullanarak gidin. Bir önceki konuda bunu nasıl yapacağımızı öğrenmiştik. Varsayılan olarak indirdiğiniz dosya Downloads klasörüne kaydedilecektir. Aşağıdaki kodu terminale yazarak Downloads klasörüne gidebilirsiniz.
cd -/Downloads
Buraya geldikten sonra, aşağıdaki komutu girerek yüklemeyi başlatın.
sudo dpkg -i code_1.8.0-1481651903_amd64.deb
Uyarı: Yukarıdaki komutta bulunan ‘code_1.8.0-1481651903_amd64.deb’ kısmı, indirdiğimiz dosyanın tam adıdır. Sizde bu farklı olabilir, o yüzden kopyala yapıştır yapmak yerine dpkg -i code yazdıktan sonra boşluk bırakıp klavyenizdeki TAB tuşuna basarsanız, otomatik olarak dosyanın adının geri kalanını terminal yazacaktır. Daha sonrasında enter’a basarak yüklemeyi başlatabilirsiniz.
-) Diğer Linux dağıtımları için,
Sol taraftaki ‘.rpm’ yazan indirme linkine tıklayarak yükleme dosyasını indirin.
Önce, indirdiğiniz dosyanın olduğu yere terminali kullanarak gidin. Bir önceki konuda bunu nasıl yapacağımızı öğrenmiştik. Varsayılan olarak indirdiğiniz dosya Downloads klasörüne kaydedilecektir. Aşağıdaki kodu terminale yazarak Downloads klasörüne gidebilirsiniz.
cd -/Downloads
Buraya geldikten sonra, aşağıdaki komutu girerek yüklemeyi başlatın.
sudo rpm -ivh code-1.8.0-1481651903.el7.x86_64.rpm
Uyarı: Yukarıdaki komutta bulunan ‘code-1.8.0-1481651903.el7.x86_64.rpm’ kısmı, indirdiğimiz dosyanın tam adıdır. Sizde bu farklı olabilir, o yüzden kopyala yapıştır yapmak yerine sudo rpm -ivh code yazdıktan sonra boşluk bırakıp klavyenizdeki TAB tuşuna basarsanız, otomatik olarak dosyanın adının geri kalanını terminal yazacaktır. Daha sonrasında enter’a basarak yüklemeyi başlatabilirsiniz.
Artık editörümüzü de yüklediğimize göre başlayabiliriz. Visaul Studio Code programını açalım. Sol üstteki File sekmesine tıklayıp çıkacak seçeneklerden Open Folder seçeneğine, TypeScript projemizin bulunduğu klasörü (bir önceki konuda oluşturduğumuz klasörü açabilirsiniz, biz onu açacağız) açalım ve Visual Studio Code editörüne çok kısa bir göz atalım.
Yukarıda, TypeScriptDersleri klasörünü açtıktan sonra karşınıza gelecek ekran mevcut. Burada sol taraftaki TypeScriptDersleri altında bulunan ‘helloworld.js’, ‘helloworld.ts’ ve ‘index.html’ dosyaları, bizim bir önceki konuda oluşturduğumuz dosyalar. ‘helloworld’ isimli ts uzantılı dosyamızın adını, dosyanın üzerine sağ tıklayıp ‘Rename’ e basarak script.ts olarak değiştirelim. Çünkü artık helloworld programı yapmayacağız. Daha sonra da, artık işimize yaramayacak olan ‘helloworld.js’ dosyasına sağ tıklayıp ‘Delete’ seçeneğine basarak bu dosyayı silelim. Şimdi de ‘index.html’ ve yeni açtığımız ‘script.ts’ dosyalarına sırayla çift tıklayalım.
Not: ‘script.js’ diye bir dosyayı manuel olarak oluşturmamıza gerek yok, birazdan terminal/komut paneli bizim için bunu otomatik olarak halledecek.
Karşımıza gelen yeni ekran yukarıdaki gibi olacak. Solda Open Editors yazan kısım ve yukarıdaki ‘index.html’ ve ‘script.ts’ bölümleri biraz önce çift tıklayarak açtığımız sayfalar. Soldan ya da yukarıdan, bu açık sayfalardan düzenlemek istediğimiz sayfa olan ‘index.html’ i yukarıdaki gibi seçili hale getirerek yine yukarıdaki kodları yazın. Buradaki kodlar, sayfamızın biraz daha düzenli olması ve Türkçe karakterleri destekleyebilmesi için yazdığımız basit html kodları. Eğer bu kodların tam olarak ne işe yaradığını öğrenmek istiyorsanız aşağıdaki linke giderek html için hazırladığım ders serisini izleyebilirsiniz.
Kodları tek tek bakarak yazmakla uğraşmayıp kopyala yapıştır yapabilmeniz için aşağıya bırakıyorum.
--index.html--
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> TypeScript Dersleri </title>
<script src="script.js"></script>
</head>
<body>
</body>
</html>
Artık TypeScript kodlarımızı yazmaya başlayabilmemiz gerekli ortamı hazırladık. Fakat kodlarımızın sürekli ve gerçek zamanlı olarak bir .js dosyasına derlenmesi için, TypeScript çalışırken, komut panelinde/terminalde bir önceki konuda kullandığımız bir kodu girmemiz gerek. Bunun için de önce cd komutumuzla, yine geçen konuda yaptığımız gibi çalıştığımız klasöre ilerliyoruz.
cd full/klasör/yolu/adı
Burada, script.ts dosyamızın sürekli bir .js dosyasına derlenmesi için, aşağıdaki komutu yazıyoruz ve TypeScript çalıştığımız sürece komut panelini açık bırakıyoruz.
tsc script.ts –-watch –-target ES6
Artık sıkıcı kısımları bitirdik. Şimdi, Visual Studio Code’a geri dönüp yukarıdan script.ts dosyasını açalım ve yine geçen konuda olduğu gibi yaptığımız işlemleri görebilmek için bir yandan da index.html dosyamıza sağ tıklayıp birlikte aç yaparak index.html dosyamızı internet tarayıcımızda açalım.
2) Genel Yazım Kuralı, Değişkenler, Veri Tipleri
a) Genel Yazım Kuralı
TypeScript’teki genellikle tercih edilen yazım kuralı, çoğu programlama dilinde olduğu gibidir. Yazdığımız her kod satırının sonuna ; ekleyerek o kodun bittiğini belirtiriz. Ya da ; eklemek yerine 1 satır boşluk bırakırsak TypeScript otomatik olarak o kodu bitirdiğimizi anlayacaktır. Biz, klasik yazım kuralı olan ; halini kullanacağız. Birinci sebebimiz, farklı programlama dillerine geçtiğimizde alışkanlık döneminden kurtulmak, ikincisi ise büyük bir program yaptığımızda bunu compress edip (küçültüp), web sayfalarımızda programlarımızın daha hızlı yüklenebilmesini sağlamak. Aşağıda bu kurala uyulup 2 örnek satır kod yazılmıştır.
var x = 5;
document.write(x + 8);
Uyarı: TypeScript'te de JavaScript'te de büyük küçük harf ayrımı vardır. Yani document.write ile Document.write aynı sonucu vermeyecektir. Aynı şekilde eğer x ve X isminde 2 değişken tanımlarsanız, bu değişkenler birbirinden farklı 2 değişken olacaktır.
b) Değişkenler
Değişkenler, daha sonra kullanabilmemiz için içlerine veri depolarlar. Bu değişkenler içerisine depoladığımız verileri, değişkeni tanımlayış şeklimize göre (ilerde daha ayrıntılı işleyeceğiz) programın belli yerlerinde kullanabileceğiz. Değişkenler,
Linki görebilmek için üye olmanız gerekiyor.
Giriş yap veya üye ol.
te denklem çözerken kullandığımız x ve y’den farklı değildir.
Linki görebilmek için üye olmanız gerekiyor.
Giriş yap veya üye ol.
te de denklemlerimizi değişkenler kullanarak çözmezsek, problem çok uzun ve zor bir hale gelecektir.-) Değişken tanımlama
JavaScript'te alışılagelmiş var değişken tipinin dışında, JavaScript'in yeni sürümüyle gelen const ve let değişken tiplerini, JavaScript'te olduğu gibi TypeScript'te de kullanabiliriz. Öncelikle bu anahtar kelimeleri tanımlayalım, daha sonra da birkaç örnek verelim.
- var: var anahtar kelimesi variable (değişken) kelimesinin kısaltılmış halidir. Değişken tanımlarken en çok kullanılan değişken tipidir. var anahtar kelimesi ile tanımlanan bir değişken, bulunduğu kod bloğunun ve bu kod bloğunun içerisinde bulundurduğu kod bloklarının hepsinden erişilebilir değişken tipidir. Erişilebildiği herhangi bir yerde, herhangi bir işlem uygulanarak içerisindeki değer değiştirilebilir.
- const: const anahtar kelimesi constant (sabit) kelimesinin kısaltılmış halidir. const anahtar kelimesi ile tanımlanan bir değişken, bulunduğu kod bloğunun içerisinde değiştirilemez. Programımızda, sabit kalmasını istediğimiz verileri, const anahtar kelimesi ile oluşturulmuş değişkenlere atamalıyız.
- let: let anahtar kelimesi, bulunduğu bloğa, duruma veya bölüme göre değişebilen değişken tipleri için kullanılır. var ile farkı, var değişken tipi ile tanımlanan ya da değeri değiştirilen bir değişken, var anahtar kelimesinin erişebildiği her yerde o değer olarak kalacaktır. Fakat let ile tanımlanan bir değişken, programın her yerine özel olarak değer alabilir ve sadece o yerde o değere sahip olur.
degiskentipi degiskenadi: depoladigiveritipi = deger;
Buradaki degiskentipi, yukarıda anlattığımız var, let veya const'tan biri olacaktır. degiskenadi ise, değişkenimizi daha sonradan çağırabilmemiz için bu değişkene atayacağımız isim olacak. Eğer değişkenimize veriyi programın başka bir yerinde tanımlamak isteyip, tanımlanana kadar boş bırakmak istiyorsak da, aşağıdaki değişken tanımlama türünü seçmeliyiz.
degiskentipi degiskenadi: depoladigiveritipi;
degiskenadi = deger;
Gördüğünüz üzere, değişken 1. satırda tanımlanıp, 2. satırda bir değere sahip oldu. Eğer bu değişkeni ekranımıza yazdırmak isteseydik, tanımlanmamış anlamına gelen 'undefined' sonucunu alırdık.
Değişken adımızı seçerken aşağıdaki kurallara dikkat etmemiz gerek:
- Değişken adında Türkçe karakter kullanılmamalıdır.
- $ _ veya bir harf ile başlanmak zorundadır. Tanımlanan değişken sayı ya da farklı bir işaret ile başlayamaz.
Hemen bir sonraki başlıkta, veri tiplerini incelerken her biri için örnek vereceğim fakat şimdilik değişken tanımlamaya örnek olması için burada da, üstte tanımladığımız şekillerde 2 tane değişken örneği verelim.
var x: number = 5;
var y: string;
y = "dikodoksit";
b) Veri Tipleri
Önce veri tiplerinin genel bir tanımını yapalım,
Veri tipleri, programımızın sayılar, karakterler, diziler vs. farklı tip girdileri karşılaştırabilmesi ve bu girdilere göre işlemler yapabilmesi için kullanılırlar. Yani 5 ve 6’nın programımıza sayı olduğunu söylersek, bu 2 sayıyı çarpmak, toplamak, çıkarmak vb. birçok işleme sokabiliriz. Fakat toplama işlemimizi Fatih ve Çakmak diye 2 tane yazı tipinde veri tanımlayıp bunlara uygularsak, programımız 2 yazıyı toplamaya çalıştığımız için
Linki görebilmek için üye olmanız gerekiyor.
Giriş yap veya üye ol.
sel işlem yerine FatihÇakmak çıktısını verecektir. Şimdi anlamadıysanız, aşağıdaki tanımlarla veri tiplerinin birbirleri arasındaki farkları anlayacaksınız.Boolean,
Boolean türü veri tipi, en temel veri türüdür ve içerisine yalnızca 2 tip değer alabilir. Birisi true, diğeri false. Bu tür bir veri tipini genellikle karşılaştırmalarda kullanırız. Örneğin, girilen kullanıcı adı ve şifrenin eşleşmesini bir boolean tipi veriye atarsak, true değeri döndüğünde kullanıcıyı giriş yaptırıp, false değeri döndüyse de kullanıcıyı yanlış kullanıcı adı ya da şifre girdiğine dair uyarabiliriz.
var sonuc: boolean = true;
document.write(sonuc);
Üstteki örnekte sonuc isminde bir değişken tanımlayıp, document.write(sonuc); koduyla bunu ekrana yazdırdık. Eğer bu kodu script.ts dosyanıza yazıp, kaydedip index.html sayfanızı web tarayıcınızla açarsanız (ya da açıksa yenilerseniz) ekranda true değerini göreceksiniz. document.write kodunun nasıl çalıştığını şimdilik anlamanıza gerek yok, ilerde DOM objelerini incelerken ayrıntılı olarak değineceğiz.
Number,
Number türü veri tipi, adından da anlaşıldığı gibi sayı tanımlarken kullanacağımız veri tipi. Bu veri tiplerine dilediğimiz
Linki görebilmek için üye olmanız gerekiyor.
Giriş yap veya üye ol.
formüllerini uygulayabiliriz. Örneğin, basit bir hesap makinesi yapımında, kullanacağımız veri türü number olacaktır. Aşağıdaki örneği script.ts dosyanıza yazıp kaydederseniz index.html sayfanızı yenilediğinizde, ekranda 3.14 sayısını göreceksiniz.const PI: number = 3.14;
document.write(PI);
String,
String türü veri tipi, metin değişkenlerinde kullanılır. Metinler, içerlerinde sayı da bulundurabilirler fakat string olarak tanımlanan “5” ve “6” metinlerini toplamak istediğinizde, sonuç 11 yerine 56 olacaktır. Çünkü, programımız bunlara number değil string olarak bakar.
String’lerin kullanımına örnek verecek olursak, yine bir üyelik sisteminde girilen kullanıcı adı ve şifre verilerini düşünebiliriz. Kullanıcı adı da, şifre de içerisine her tür yazı karakteri alabilir. Bu nedenle bunları metin olarak tanımlarsak, bunlara oldukları gibi ulaşabiliriz.
Diğer türlerin aksine, string verileri çift ya da tek tırnak işaretleri arasına, ya da ` işaretlerinin arasına yazılmalıdır. Aralarındaki farkları ilerledikçe öğreneceğiz. Şimdilik, aşağıdaki örnekteki gibi tırnak işaretleri arasına yazalım.
let isim: string = "Fatih";
document.write(isim);
Array,
Array türü veri tipi, içerisine birden çok veri depolayabilen türdeki veri tipidir. Yani, birçok farklı number, string, boolean değişkenlerini, bir tane array içerisine depolayıp, buradan array’in içerisindeki istediğimiz veriye ulaşabiliriz. Depolanacak veriler, köşeli parantezler içerisine, aralarına virgül konarak yazılır (["Fatih", "Çakmak", 20] gibi) ve depolanacak veri türünün yanına array olduğunu belli etmek için [] işareti konulur.
let bilgiler:string[] = ["Fatih", "Çakmak", "dikodoksit"];
İçerisinden veri çekmek istediğimizde ise, verinin sırasını belirtmemiz gerekir. Bilgisayar programları saymaya 0'dan başladıkları için, 1. değeri 0 anahtarıyla belirtiriz. yani üstteki örnekte tanımlanan bilgiler değişkeninden Fatih'i (1. sırada olan değeri) çekmek istersem bunu aşağıdaki gibi bilgiler[0] 'ı ekrana yazdırarak yapabilirim.
document.write(bilgiler[0]);
TypeScript'te, array'lerimizi oluşturabileceğimiz bir yönte mdaha mevcut. Aşağıdaki örneğe bakalım.
var sayilar: Array<number> = [5,6,7];
document.write(sayilar[2]);
Gördüğünüz üzere, bu kuralda, önce Array yazıp daha sonra küçüktür ve büyüktür işaretleri arasında, array'imizin kabul ettiği veri tipini yazdık ve içerisine number türünde veriler depoladık. Daha sonra da ekrana, 2. anahtardaki (3. sıradaki) veriyi yazdırdık. Artık anahtar kelimesi kullanmak yerine, index kelimesini kullanacağız. Yani 2. index, 3. sıra anlamına gelmekte.
Tuple,
Tuple veri tipi, içlerinde birden fazla türde veri tipini bulundurabilen array'lerdir. Yani, bir tuple'ın içerisinde string, number, boolean veya array bile bulunabilir. Çağırırken kullandığımız mantık array'lerde kullandığımız mantık ile aynıdır (tupledegiskeni[index]). Aşağıdaki örneği inceleyelim.
var tup: [string, number];
tup = ["Fatih", 23, 53 "Çakmak", "dikodoksit"];
document.write(tup[3]);
Bu örnek, ekrana "Çakmak" metnini yazdıracaktır. Dikkat ederseniz tup değişkenimiz içerisine string ve number türü veriler depoladı. Lakin, eğer biz içeri bir boolean yazmak isteseydik, hata almazdık. Fakat, kullanımı yanlış yapmış olurduk. Programımızın rahat okunup anlaşılabilmesi için, bu tarz şeylere dikkat etmemiz gerek. Tuple'ımızın çerisine tam olarak ne türde değerleri ekleyeceğimizi bilmiyorsak ya da her tür olma olasılığı varsa, tuple tanımımız aşağıdaki gibi olmalıdır.
var tup = [];
tup[0] = 32;
tup[1] = true;
tup[2] = "dikodoksit";
document.write(tup[1]);
Örnekte önce boş bir tuple değişkeni tanımladık. Daha sonrasında 0, 1 ve 2 index'lerini belli değerlere atadık ve ekrana 1. index'i yazdırdık.
Any,
Any veri tipi, her türlü veriyi kabul eden veri tipi türüdür. Kısaca, girilecek değerin ne olacağından emin değilsek ya da birden farklı tip değerler alabilmesine izin vermek istiyorsan any veri tipini kullanırız. Bu veri tipi, JavaScript'teki değişken tanımlamasıyla aynı mantığa sahiptir. JavaScript'te (TypeScript'te de bu şekilde veri tanımlamanız mümkün), var x = "abc"; şeklinde bir değişken tanımlarsanız, bu veri, tipini girmeden otomatik olarak string sayılacaktır. Bu nedenle, herhangi bir veri tipini depolayacak bir değişken tanımlamak istiyorsak bunu aşağıdaki örneklerdeki iki şekilde yapmamız da mümkün.
var yas = 20;
var isim: any = "Fatih";
document.write(yas);
document.write(isim);
Not: Geriye kalan ENUM veri tipini, TypeScript'e biraz daha hakim olup öyle inceleyeceğiz.
Son düzenleme: