Selamlar bu yazıda TypeScript Nedir ve Neden Kullanırız? hakkında yazı yazacağım. Bir önceki yazıda weppy hakkında bilgiler vermiştim. Açıkcası weppy öğrenirken angular kullanayım dedim ve yeni angular projelerinin TypeScript ile yazıldığını biliyoruz. Bununla ilgili bir yazı yazayım dedim.
TypeScript Nedir ve Neden Kullanırız?
En çok merak edilen sorulardan birisi de bu. TypeScript JavaScript’in üst kümesi olarak yazılan kodu JavaScript’e derleyen bir programlama dilidir. Yeni bir dil değil aslında. Çıkış tarihi üzerinden yıllar geçti. TypeScript statik bir dil olduğu için derleme aşamasında hata denetimi gerçekleştirilir. JavaScript ise böyle bir olanağa sahip değildir. Örneğin bir JavaScript kodunda fonksiyon parametresinin mutlaka integer ya da mutlaka boolean olacağını belirtebileceğiniz temiz bir yol bulunmamaktadır. Örnek şurada.
Ölçeklenebilir uygulamalar söz konusu olduğunda kullanmamız gerekiyor. Örneğin 3 + 5 toplamını veren bir işlemi normal JavaScript ile yapmanız size bir kayıp yaşatmayacaktır. Açıkcası TypeScript ile çalışıyorsanız JavaScript’i bilmeniz gerekiyor.
TypeScript Kurulumu
TypeScript kurulumu için iki yöntem mevcut. Birincisi belki de tahmin edebileceğiniz üzere Visual Studio ile. Varsayılan olarak kurulu geliyor. Diğer yöntem ise NPM ya da YARN üzerinden.
npm i typescript -g yarn global add typescript
İlk TypeScript Kodumuz
Bu arada dilerseniz Playground üzerinden çalışabilirsiniz. İlk kodumuz çok bilindik bir kod olacak:
console.log('Merhaba dünya')
Şaşırmayın. TypeScript aynı zamanda JavaScript kodlarını da çalıştırıyor. Bu TypeScript’in standart hali. Onu farklı kılan ise kullanılabilecek interface gibi yapıların içerisinde bulunması. Burada interfaceler derleme sonrasında kod içerisinde yer almıyor. Sadece doğru bir biçimde kod yazdığınızdan emin olmanıza imkan tanıyor. Örneğin şu koda göz atabiliriz:
interface Test {
fn: (t: string) => string
}
class Hello implements Test {
fn(t: string) {
return t
}
}
let hello = new Hello();
alert(hello.fn('Hello World'))
Şu anda Playground üzerinden çalıştığımız için direkt olarak derleme komutunu vermedim. O da bir sonraki yazıda olacak. İşi biraz daha kolay hale getirip sınıflara bakalım. Basit bir inheritance ornegini verecegim:
class Animals {
Say(): string {
switch (this.constructor["name"]) {
case "Cat":
return "Meow";
case "Dog":
return "Woof";
}
}
}
class Cat extends Animals {
}
class Dog extends Animals {
}
let cat = new Cat();
let dog = new Dog();
console.log(cat.Say())
console.log(dog.Say())
Bu yapı ES5 için çevrilmiş sürümü aşağıdaki gibi. Tabi ben bundan daha iyisini yazardım ne gerek vardı bu kadar karmaşaya.
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var Animals = /** @class */ (function () {
function Animals() {
}
Animals.prototype.Say = function () {
switch (this.constructor["name"]) {
case "Cat":
return "Meow";
case "Dog":
return "Woof";
}
};
return Animals;
}());
var Cat = /** @class */ (function (_super) {
__extends(Cat, _super);
function Cat() {
return _super !== null && _super.apply(this, arguments) || this;
}
return Cat;
}(Animals));
var Dog = /** @class */ (function (_super) {
__extends(Dog, _super);
function Dog() {
return _super !== null && _super.apply(this, arguments) || this;
}
return Dog;
}(Animals));
var cat = new Cat();
var dog = new Dog();
console.log(cat.Say());
console.log(dog.Say());
Bu yazıda TypeScript Nedir ve Neden Kullanırız? gibi konular hakkında ufak da olsa bir bilgi sahibi olduk. Giriş niteliğindeki bu yazının ardından TS ile çalıştığım sürece yeni örnekleri vermeye çalışacağım. Umarım kafanızda az da olsa fikir oluşturmuştur.
Yazı içerisinde hatalı bir nokta olduğunu düşünüyorsanız yorum bırakarak düzeltmemi sağlayabilirsiniz. Okuduğunuz için teşekkür ederim 🙂