TypeScript nedir?

giriiş

TypeScript, çeşitli geliştirme ortamlarında kullanılan genel amaçlı bir programlama dilidir. Piyasaya sürülmesinden bu yana geçen yıllar boyunca, geliştiricilerden ve şirketlerden büyük destek görmüştür; bu durum, GitHub'ın 2022'de TypeScript'i en çok kullanılan dördüncü programlama dili olarak sıralamasından da anlaşılmaktadır. O zamandan beri TypeScript'in önemi giderek artmıştır.

Ayrıca, popülaritesi iş fırsatlarının bolluğuna da yansıyor; LinkedIn'de 20.000'den fazla TypeScript ile ilgili iş pozisyonu ilan ediliyor ve Trivago ve Stripe gibi sektörün büyük oyuncuları teknoloji yığınlarını TypeScript'e taşımayı tercih ediyor.

Bu yazıda, TypeScript'i baştan sona inceleyerek geliştirici topluluğunda kullanımının artmasına neden olan avantajlarını anlamaya çalışacağız.

TypeScript ve JavaScript

TypeScript tamamen yeni bir şey değil. JavaScript'in kendi sınırlamalarını ele alan bir üst kümesidir. Bir üst küme olarak TypeScript, statik yazım ekleyerek JavaScript'i genişletir.

Bu statik tipleme iki yaygın yolla bildirilebilir:

1. Tip açıklamaları

Bu, değişkenleri ve türlerini ilk tanımlandıkları anda belirtmeyi içerir. Şöyle:

let name: string = "Hygraph

type StringType = {
name: string;
};
let name: StringType = { name: "Hygraph" };

Şimdi TypeScript'in sunduğu bazı özelliklere bir göz atalım.

TypeScript'in En İyi Özellikleri

Statik yazım

Statik tipleme, değişkenlerin derleme zamanında veri türleriyle (örneğin tam sayı, dize, boolean) açıkça tanımlandığı ve sistemin programı çalıştırmadan önce tür denetimi yaptığı durumu ifade eder.

Aşağıdaki davranış JavaScript'te izin verilirken, aynı davranışın TypeScript'te yapılması TypeScript tür uygulamasından dolayı bir hataya neden olacaktır.

let name: string = "hygraph";
name = 2000

İsteğe bağlı yazım

TypeScript, değişken bildirimine açıkça izin verirken, tür bildirmeden JavaScript benzeri kod yazmayı da destekler. TypeScript, türü anında çıkarır. Örneğin,

let name = "Hygraph";

// Generic function to return the length of an array
function getArrayLength<T>(array: T[]): number {
return array.length;
}
// Using the generic function with different types of arrays
const stringArray: string[] = ["apple", "banana", "orange"];
const numberArray: number[] = [1, 2, 3, 4, 5];
console.log(getArrayLength(stringArray)); // Output: 3
console.log(getArrayLength(numberArray)); // Output: 5

Gelişmiş tip sistemi

TypeScript tür sistemi, temel statik tiplemenin ötesine geçer. Ayrıca, karmaşık türleri tanımlama, türleri değiştirme, değişkenler arasında ilişkiler kurma, tür kısıtlamalarını uygulama ve hatasız uygulama geliştirmeyi sağlayan diğer yetenekler için özellikler sunar.

En yaygın kullanılan gelişmiş türlerden bazılarını ele alalım.

1. Birlik Türleri

TypeScript'te Birlik, birden fazla veri türünü tutan bir değişken veya işlev bağımsız değişkeni bildirmeyi ifade eder. Bu, bir değerin çalışma zamanında farklı veri türlerine sahip olması durumunda faydalı olabilir.

Birleşim türleri, veri türlerini ayıran | simgesiyle gösterilir. Örneğin:

let age = number | string;
age = 10;
age = "ten";

Yukarıda görüldüğü gibi, yaş değişkeninin iki veri türüne sahip olabileceğini belirtebiliriz. Bu, tür güvenliğinden ödün vermeden esneklik sağlar.

2. Kavşak türleri

Çaprazlamalar, mevcut birkaç türün yeni bir türde birleştirilmesiyle yeni bir tür oluşturulmasına olanak tanır. Bu yeni tür, birleştirilmiş türlerin özelliklerine ve işlevlerine sahiptir.

Kesişimler, birleştirilecek türler arasında & sembolü kullanılarak oluşturulur. Örneğin:

interface User {
id: number;
username: string;
email: string;
}
interface Admin {
isAdmin: boolean;
}
// A new type using intersection type
type UserAndAdmin = User & Admin;

Burada, Kullanıcı ve Yönetici türü hem UI'dan hem de Yönetici'den gelen özellikleri birleştirerek her ikisinden de tüm özellikleri gerektiren bir tür üretir.

3. Koşullu tipler

TypeScript'teki koşullu türler, türün özelliklerine, değerlerine veya diğer bağlamına göre değişen dinamik türlerin tanımlanmasına olanak tanıyan, bir duruma bağlı türler oluşturur.

Basit bir örneği ele alalım:

// A conditional type to determine if a type is an array
type IsArray<T> = T extends any[] ? true : false;
// Test the conditional type with different types
type Result1 = IsArray<number>; // false
type Result2 = IsArray<string[]>; // true
type Result3 = IsArray<boolean | []>; // true

Koşullu türler, açılı parantezler (<>) içinde üçlü operatör (? 🙂) kullanılarak tanımlanır ve "genel tür parametresi" olarak bilinir; bu konuya makalenin ilerleyen kısımlarında daha detaylı değineceğiz. Ayrıca, bir türün belirli bir koşulu karşılayıp karşılamadığını kontrol eden ve bu koşulun sonucuna göre başka bir tür üreten extends anahtar sözcüğünü de kullanırlar.

4. Eşleme Türleri

TypeScript'teki eşlenmiş türler, mevcut türlerin özelliklerini dönüştürerek yeni türler oluşturmanıza olanak tanır. Bunu, bir kaynak türün özellikleri üzerinde yineleme yaparak ve her özelliğe bir dönüştürme uygulayarak yeni bir tür oluşturarak yaparlar. Örneğin:

// type representing a user
type User = {
id: number;
username: string;
email: string;
};
// Mapped type to make all properties optional
type OptionalUser = { [P in keyof User]?: User[P] };
// New type using the mapped type
const optionalUser: OptionalUser = { id: 1 };
// Property 'email' is now optional
optionalUser.username = "john_doe";
// Property 'id' is still required
// optionalUser.email = "[email protected]"; // Error: Property 'email' is missing

Eşlenen türler, { [P in keyof Type]: NewType } sözdizimini kullanarak tanımlanır; burada Type kaynak türüdür, P özellik anahtarıdır ve NewType dönüştürülen türdür. P özellik anahtarları üzerinde yineleme yapar ve dönüşümü tanımlar.

5. Takma adı yazın

Tür takma adları, ilkel türler, birleşim türleri, kesişim türleri ve hatta nesne değişmezleri ve işlev türleri gibi daha karmaşık türler de dahil olmak üzere mevcut TypeScript türleri için özel adlar (takma adlar) oluşturmanıza olanak tanır. Bir tür takma adı, aşağıda gösterildiği gibi, tür anahtar sözcüğü ve ardından yeni ad kullanılarak tanımlanır:

// type alias for a union type
type Result = "success" | "error";
// type alias for an object literal
type Point = { x: number; y: number };
// type alias for a function type
type Greeting = (name: string) => string;
// Using the type aliases
const status: Result = "success";
const origin: Point = { x: 0, y: 0 };
const greet: Greeting = (name) => Hello, ${name}!;

Yukarıdaki kod, TypeScript'te farklı tipler için tip takma adlarının farklı kullanımlarını ve bunların bildirimden sonra kullanımını gösterir.

Nesne Yönelimli Programlamada (OOP) TypeScript

OOP, sürdürülebilir ve yeniden kullanılabilir kod oluşturmak için etkileşimde bulunan "nesneler" kavramına dayanan bir paradigmadır.

1. TypeScript sınıfları

Sınıflar, nesneler oluşturmak için kullanılan desenler veya tasarımlardır, yani verileri (özellikleri) ve yöntemleri (fonksiyonları) tanımlarlar.

TypeScript'te bir sınıfın nasıl uygulanacağına dair bir örnek:

class Organization {
private name: string;
private yearFounded: number;
constructor(name: string, yearFounded: number) {
this.name = name;
this.yearFounded = yearFounded;
}
public getDetails(): string {
return `${this.name} was founded in ${this.yearFounded}.`;
}
}
let organization = new Organization("Hygraph", 2015);
console.log(organization.name); // Error: Property 'name' is private and only accessible within class 'Organization'.
console.log(organization.getDetails()); // Output: Hygraph was founded in 2015

Yukarıdaki kodda, yalnızca "Organization" sınıfı içinden erişilebilen ve değiştirilebilen, "yearFounded" adlı özel özelliklere sahip bir Organisation sınıfı oluşturduk. Özelliklerin ve metotların nasıl yazıldığına dikkat edin.

2. TypeScript arayüzü

Arayüzler, uygulama ayrıntılarını sağlamadan, nesnelerin sahip olması gereken özellikleri ve yöntemleri listeleyerek nesnelerin şeklini tanımlar:

// Interface representing form data
interface FormData {
firstName: string;
lastName: string;
email: string;
age: number;
}
// Usage
let formData: FormData = {
firstName: "John",
lastName: "Doe",
email: "[email protected]",
age: 30
};

Yukarıdaki örnekte, form verilerinin yapısını temsil eden bir FormData arayüzü tanımladık.

Daha sonra arayüz tanımına ilişkin özellikleri içeren bir formData nesnesi oluşturduk.

TypeScript sayıları

TypeScript'te enum ile temsil edilen numaralandırma türleri, her bir sabitin ilişkili bir sayısal veya dize değerine sahip olduğu, süslü parantez {} içine alınmış adlandırılmış sabitlerin bir koleksiyonudur.

Tipik bir TypeScript liste koleksiyonu şu şekilde görünebilir:

// enum for days of the week
enum DayOfWeek {
Sunday,
Monday,
Tuesday,
Wednesday,
Thursday,
Friday,
Saturday
}
enum HTTPStatusCodes { 
OK = 200, 
BadRequest = 400, 
NotFound = 404,
}

Yukarıdaki kod bloğu, olup biteni hemen açıklıyor ve TypeScript enum'larını kullanmaya anlam katmanın anlamsal faydasını gösteriyor.

TypeScript ve ES6

TypeScript, ECMAScript 6'nın (ES6) (ECMAScript 2015 olarak da bilinir) birçok özelliğini destekler. Bu özelliklerden bazıları şunlardır:

1) Ok Fonksiyonları: Geleneksel fonksiyon ifadelerinin aksine, ok fonksiyonları fonksiyonları tanımlamak için basit bir sözdizimi sağlar. Tek satırlık ifadeler ve otomatik zincirleme için örtük dönüş sağlarlar ve geri arama veya olay işleyici fonksiyonları için faydalı olabilirler.

// Arrow function
const add = (x, y) => x + y;
// Traditional function expression
const add = function(x, y) {
return x + y;
};

2) Şablon alfabesi: Bu, çok satırlı ifadeleri ve dizeleri doğrudan parantez (“) içinde koda yerleştirmenize olanak tanır. Bu, değişkenleri ve ifadeleri interpole etmek de dahil olmak üzere dinamik dizeler oluşturmayı kolaylaştırır.

const name: string = "John";
const greeting: string = `Hello, ${name}!`;

ES6'nın bu makalede ele alınabilecekten daha fazla özelliği bulunmaktadır. Daha fazla bilgi için Ecma International'a bakın.

TypeScript'in JavaScript'e göre avantajları

TypeScript'in yayınlanmasından bu yana on yıldan fazla bir süre geçti ve JavaScript'e kıyasla avantajları konusunda tartışmalar devam ediyor.

Bu bölümde bu faydalardan bazılarını inceleyeceğiz.

• Güvenlik Türü: TypeScript'in statik tip sistemi, tip açıklamalarını değişkenlere, fonksiyonlara ve nesnelere uygular; bu da erken hata tespitine yardımcı olur ve arayüzler, sınıflar ve modüller aracılığıyla sürdürülebilirliği artırır.
• Daha iyi geliştirici deneyimi: Geliştiriciler artık derleyicinin olası tür uyumsuzluklarını kod çalışma zamanına ulaşmadan önce tespit edeceğini bilerek daha güvenle kod yazabilirler. Bu, özellikle bir JavaScript kod tabanını TypeScript'e geçirirken faydalı olabilir.

TypeScript ne zaman kullanılır?

Yukarıda tartışılan avantajlardan, TypeScript'in tüm projeler için uygun olmayabileceği sonucuna varabilirsiniz. Bu doğru olabilir, ancak bu kararı neden size bırakasınız ki? Daha iyi bir karar vermenize yardımcı olalım.

TypeScript'i kullanmak ne zaman uygundur?

• Büyük ölçekli uygulamalar: TypeScript, büyük JavaScript kod tabanlarının ölçeklenebilirlik sorunlarını gidermek için geliştirilmiştir. Proje büyüdükçe, statik yazım hataların erken tespit edilmesine yardımcı olarak kod sürdürülebilirliğini ve ekip üyeleri arasındaki iş birliğini iyileştirir.
• Ekip çalışması: Birden fazla geliştiricinin bir kod tabanına katkıda bulunduğu bir ekip ortamında, TypeScript kodlama kurallarını uygulayarak ve kendi kendini belgeleyen kod aracılığıyla daha iyi iletişim kurarak iş birliğini kolaylaştırabilir.
• Uzun vadeli projeler: Bakım, yazılım geliştirme yaşam döngüsünün son aşamasıdır ve on yıl veya bir yıl kadar kısa sürebilir. TypeScript, kod sürdürülebilirliğinin, ölçeklenebilirliğinin ve geleceğe hazır olmasının önemli olduğu uzun vadeli projeler için uygundur.

TypeScript'i ne zaman kullanmamalısınız?

Ne yazık ki, TypeScript sunduğu avantajlara rağmen tüm kullanım senaryolarına uygun olmayabilir. Örneğin:

• Basit projeler: Minimum karmaşıklığa sahip küçük projeler için, statik yazmanın ve gelişmiş araçların faydaları, TypeScript ile ilişkili yapılandırma ve öğrenme eğrisinden daha ağır basmayabilir.
• Eski kod tabanları: Mevcut büyük JavaScript kod tabanlarını TypeScript'e dönüştürmek göz korkutucu olabilir. Bu gibi durumlarda, özellikle proje ömrünün sonuna yaklaşıyorsa veya minimum bakım görüyorsa, TypeScript'e geçiş için gereken çaba, elde edilen faydaları karşılamayabilir.