Herkese yeni bir konudan merhabalar. En son sıfırdan ileriye ReactJs yapmıştık ama o seride react'i öğrenirken jsx formatında yani javascript + html şeklinde kullanarak öğrenmiştik. Jsx formatı yanında bir başka format daha var ve profesyonel hayatta da bu format kullanılıyor. Bu konu sonrası jsx yerine artık yeni bir format kullanarak projelerimizi geliştireceğiz. Bu konuyu anlamak için temel Javascript bilgisi yeterli olacaktır.
Peki konumuz ne diye sorarsanız başlıktan da belli olduğu gibi bugün size tek konuda sıfırdan ileriye Typescript'i anlatacağım, iyi okumalar.
Peki konumuz ne diye sorarsanız başlıktan da belli olduğu gibi bugün size tek konuda sıfırdan ileriye Typescript'i anlatacağım, iyi okumalar.
TypeScript Nedir ?
TypeScript aslında Javascript'e eklenen küçük bir eklenti diyebiliriz. Bu eklenti kısaca Javascript ile kullandığımız değişkenlere bir tip tanımlamaya yardımcı oluyor.
Tip Tanımlamak mı O Nedir ?
Eğer bu soruyu sorduysanız panik olmayın. Size basit bir örnek ile göstereceğim.
-Bir tane yazılım dili seçin (Javascript harici)
-Seçtiğiniz dil ile bir değişken tanımlayıp bunu konsola yazdırın.
-Daha sonra Javascript ile aynı işlemi yapın ve karşılaştırın.
Size örnek göstereceğim.
Örnekler olarak Java ve C# seçtim. Fark ettiğiniz gibi değişken tanımlarken bize tip belirtme zorunluluğu olduğunu gösteriyor. Int ile sayı, String ile yazı gibi farklı tipler mevcut. Eğer tipi int yapıp yazı yazarsanız hata alırsınız, aynı şekil tipi string yapıp tırnaklar içinde sayı girmezseniz yani number girerseniz yine tip tanımlama hatası alırsınız.
Bu durum Javascriptte yok, sadece let const ve var tanımlamaları var. Let ile geçici değerler, const ile sabit değerler tanımlanır. Var artık kullanılmıyor ama hem const hem let için de kullanılabilir.
Anlattığım gibi Javascriptte sadece değişkenin sabit mi yoksa geçici mi olduğunu belirtiyoruz. Onun haricinde başka hiçbir şey yok. Typeof ile baktığınızda değerin tipini görürsünüz ama browerser bunu anlayamaz. Şimdi bir örnek yapalım.
Burada bir number bir String değeri var. Bu değerleri Javascriptte toplamaya kalkınca birleştiriliyor ama tipleri aynı değil. Aynı şekil bir api istek attınız değeriniz number ama string olarak geldi diyelim. Bu String'i ek olarak number yapmanız lazım mesela.
Javascriptte tip tanımlamaları olmadığı için bu tarz sorunlar oluşuyor. Bu sebepten ötürü bize tip tanımlamaya yardımcı olacak bir arkadaş yani Typescript'in öneminin farkına geliyoruz.
-Bir tane yazılım dili seçin (Javascript harici)
-Seçtiğiniz dil ile bir değişken tanımlayıp bunu konsola yazdırın.
-Daha sonra Javascript ile aynı işlemi yapın ve karşılaştırın.
Size örnek göstereceğim.
Örnekler olarak Java ve C# seçtim. Fark ettiğiniz gibi değişken tanımlarken bize tip belirtme zorunluluğu olduğunu gösteriyor. Int ile sayı, String ile yazı gibi farklı tipler mevcut. Eğer tipi int yapıp yazı yazarsanız hata alırsınız, aynı şekil tipi string yapıp tırnaklar içinde sayı girmezseniz yani number girerseniz yine tip tanımlama hatası alırsınız.
Bu durum Javascriptte yok, sadece let const ve var tanımlamaları var. Let ile geçici değerler, const ile sabit değerler tanımlanır. Var artık kullanılmıyor ama hem const hem let için de kullanılabilir.
Anlattığım gibi Javascriptte sadece değişkenin sabit mi yoksa geçici mi olduğunu belirtiyoruz. Onun haricinde başka hiçbir şey yok. Typeof ile baktığınızda değerin tipini görürsünüz ama browerser bunu anlayamaz. Şimdi bir örnek yapalım.
Burada bir number bir String değeri var. Bu değerleri Javascriptte toplamaya kalkınca birleştiriliyor ama tipleri aynı değil. Aynı şekil bir api istek attınız değeriniz number ama string olarak geldi diyelim. Bu String'i ek olarak number yapmanız lazım mesela.
Javascriptte tip tanımlamaları olmadığı için bu tarz sorunlar oluşuyor. Bu sebepten ötürü bize tip tanımlamaya yardımcı olacak bir arkadaş yani Typescript'in öneminin farkına geliyoruz.
TypeScript ile Veri Tipi Belirleme İşlemleri
Aslında Typescript ile veri tanımlama diğer diller gibi aynı gibi diyelim. Birazdan örneklerle daha iyi anlayacaksınız.
TypeScript'in resmi sitesinde playground kısmı var burada pratik yapabiliriz.
Değişkenin adını tanımladıktan sonra iki nokta koyun ve sonra değişken değerini girin. Örneğin :
TypeScript'in resmi sitesinde playground kısmı var burada pratik yapabiliriz.
Değişkenin adını tanımladıktan sonra iki nokta koyun ve sonra değişken değerini girin. Örneğin :
JavaScript:
let isim : string = "test";
let yas : number = 1907;
let dogruluk : boolean = false;
Temel değişkenler için bu şekilde kullanabilirsiniz. Şimdi TypeScript ile bir obje oluşturalım
JavaScript:
interface userData {
name : string,
age : number,
isActive : boolean,
date : Date
}interface kullanarak objenin içindeki eleman tiplerini belirleyebiliyoruz. Obje tipini hedef objeye atamak için ise temel olarak başta gösterdiğimiz iki nokta yeterli olacaktır.
Oluşturduğumuz tipi değişkene atadığımız bir hata karşılıyor bizi. Burada diyor ki sen tip olarak userData içine name, age, isActive ve date tanımladın da şuan kullandığın objede bunlar eksik bunları ekle diyor. Bu durumdan kurtulmak için ise şöyle bir yol izleyebiliriz.
JavaScript:
interface userData {
name : string,
age : number,
isActive : boolean,
date?: Date
}
const user : userData = {
name : "'Masséna",
age : 1907,
isActive : true
}
Opsiyonel olacak değişkene soru işareti atarak bunun zorunlu olmadığını belirterek hata almaktan kaçınabiliriz.
Şimdi düşünelim bir değere birden fazla tip gelebilir bu durumlarda ise her iki tipi de tanımlayabiliriz. Duruma göre isterseniz 10 tane tip tanımlayın pek sorun olmaz.
JavaScript:
interface userData {
name : string,
age : number,
isActive : boolean | null,
date?: Date
}
const user : userData = {
name : "'Masséna",
age : 1907,
isActive : null
}
Burada isActive değerine sen boolean yani true - false ya da null yani boş bir değer olabilirsin sorun yok dedim. Düz tek çizgiyi yapmak için ise altgr + normal çizgi işaretiyle yapabilirsiniz.
Elimizde bir değer var diyelim ve bu değerin ne döneceğini bilmiyoruz. Bu durumlarda ise "any" kullanırız. Yani tip fark etmez string de olur number da. Bazı kişiler her yere any yazıyor bu doğru bir hamle değildir. Sadece değerini bilemediğiniz ve sorun çıkartan değerlere any yazmanız daha doğru olur.
Burada age kısmını stringe çevirdim ve TypeScript hop ne yapıyorsun bu değer number dedi.
Ek olarak any değeri verdim ve hiçbir sorun kalmadı.
Type ve Interface Karşılaştırması
Bir obje tipleri tanımlarken iki yol vardır. Yukarıda örnekte kullandığımız interface ve type idir.
Temel olarak ikisi de neredeyse aynıdır. Aynı işlemleri yapabilirsiniz ama type ile belirtilen özelliklere yeni özellik getirilemez iken interface ile tanımlanan yere yeni özellik eklenebilir.
Temel olarak ikisi de neredeyse aynıdır. Aynı işlemleri yapabilirsiniz ama type ile belirtilen özelliklere yeni özellik getirilemez iken interface ile tanımlanan yere yeni özellik eklenebilir.
JavaScript:
interface userData {
name : string,
age : number | any,
isActive : boolean | null,
date?: Date
}
interface userData {
konuSayisi : number
}
const user : userData = {
name : "'Masséna",
age : "1907",
isActive : null,
konuSayisi :5
}
Burada var olan türe yeni bir özellik ekledik. Hiçbir sorun çıkmadı
JavaScript:
type userData = {
name : string,
age : number | any,
isActive : boolean | null,
date?: Date
}
type userData = {
konuSayisi : number
}
const user : userData = {
name : "'Masséna",
age : "1907",
isActive : null,
konuSayisi :5
}
Burada ise var olan türe yeni bir özellik ekledik. Hem iki kez aynı type kullanıldı diye error verdi hem de konuSayisi tür içinde olmadığı için. Yani kısaca ikinci userData değerini saymadı.
Fonksiyonlarda TypeScript
Fonksiyonlarda kullanım ise normal ve objelere göre birkaç değişiklik gösterir. Bunlara bakalım.
JavaScript:
function yaz(ad : string, yas : number, konuSayisi : number) {
console.log("Selam" + ad + "\n Yaşın : " + yas + "\n Konu Sayınız : "+ konuSayisi);
}
yaz("Masséna", 1907, "1907");Bu şekilde bir işlem yaparsanız hatalı gelecek. Çünkü konuSayisi türü number, string değil.
JavaScript:
function yaz(ad : string, yas : number, konuSayisi : number) {
console.log("Selam " + ad + "\n Yaşın : " + yas + "\n Konu Sayınız : "+ konuSayisi);
}
yaz("Masséna", 1907, 1907);
Bu şekilde ise konsola çıktı gelecektir. \n aslında satır atlama için kullanıldı eğer bilmeyen var ise
Tamam fonksiyon içindeki değerleri böyle tip tanımlayabiliyoruz peki fonksiyonun kendisine tip tanımlayabilir miyiz derseniz evet tanımlayabilirsiniz.
JavaScript:
function toplama(x : number, y : number) : number {
let toplam = "";
return toplam;
}
toplama(5,4)
Burada toplama işleme yapacağız. x değeri number, y değeri number buraları biliyoruz zaten. Toplama fonksiyonun return edeceği değer de number olacaktır. Çünkü öyle tanımladık ama return edilen string ve TypeScript ne yapıyorsun sen dermiş gibi error'u yolluyor. Düzeltelim bunu şimdi.
JavaScript:
function toplama(x : number, y : number) : number {
let toplam = 0;
toplam = x + y;
return toplam;
}
console.log(toplama(5,4))
Burada sonuç olarak başarılı oluyor.
Asenkron işlemlerde ise yani api çağırma - istekte bulunma işlemlerinde ise tanımlanacak değer promise olarak tanımlanmalıdır.
JavaScript:
interface userData {
name : string,
age : number,
konuSayisi : number
}
const userBilgileriniGetir = async (): Promise<userData> =>{
return {
name : "Massena",
age : 1907,
konuSayisi : 19
}
}
İlk olarak tip tanımladık. Daha sonra fonksiyonumuza sen asenkronsun ona göre davran dedik. Asıl can alıcı nokta burası Promise yapısı (Javascriptten bilmeniz gerekli) kullanıyoruz. Yani diyoruz ki fonksiyona sana söz veriyorum ki userData içindeki tipleri alacaksın. Eğer almazsan yani sözümü tutmaz isem error yolla bana diyoruz. Return ile tip içindeki değerleri yollayarak error almadan atlatıyoruz.
TypeScript ile Diziler
Diziler için de TypeScript kullanılabilir. Şimdi buna bakalım
JavaScript:
let meyveler : string[] = ["Elma","Üzüm","Karpuz","Kavun"];
let sayilar : number[] = [1,2,3,4,5,6,7,8,9];
meyveler.forEach((meyve : string)=>{
console.log(meyve)
})
sayilar.forEach((sayi : number)=>{
console.log(sayi)
})
Burada sanki normal değişken tanımlıyormuş gibi tipi belirtip iki köşeli parantez atıyoruz ki dizi olduğu belli olsun. Bu değerleri yazdırırken ise forEach ile yazdırdığım için dizi içindeki elemana değişken tanımlamam lazım bu tanımladığım değere de dizi tipiyle aynı tipi tanımlıyorum.
JavaScript:
let meyveler : Array<string> = ["Elma","Üzüm","Karpuz","Kavun"];Ek olarak dizi tanımlarken bu şekil de tanımlayabilirsiniz sorun yok.
Uyarı olarak ise String ile string farklı şeylerdir. String direkt Javascript içinde bulunan tiptir. string ise TypeScript ile gelen değerdir bu yüzden tip tanımlarken "string" kullanın.
Typescript Kurulumu
Şimdiye kadar TypeScript kendi sitesinden örnek gösterdik. Kurulum yapmak için ise iki yol var biri npm paketi ile kurmak diğer ise vite ile kurmak.
Npm ile kuracaksanız terminale
yazmanız yeterli olacaktır.
Eğer vite ile kuracaksınız
Npm ile kuracaksanız terminale
Kod:
npm install typescript --save-devyazmanız yeterli olacaktır.
Eğer vite ile kuracaksınız
Kod:
npm create vite@latest -y
Proje adı size kalmış
Freamwork React
Varyant Javascript + TypeScript
no
yesşeklinde kurabilirsiniz.
Normalde dosyaları .jsx uzantalı açıyorduk. TypeScript ile birlikte .tsx olarak açacağız, ayrıca eğer dosya sadece tip tanımlama içerek ise .ts kullanabilirsiniz.
Buraya kadar okudu iseniz artık TypeScript'i iyi kötü olarak biliyorsunuz. Gerçekten profesyonel hayatta oldukça kullanılıyor bu yüzden jsx yerine TypeScript kullanmayı özen gösterin. Okuduğunuz için teşekkürler
