TypeScript'te String ile Çalışmak

String'ler, herhangi bir programlama dilinde en sık kullanılan veri tiplerinden biridir ve TypeScript de bu konuda bir istisna değildir. Kullanıcı girdilerini işlemek, dinamik mesajlar oluşturmak veya API'lerle çalışmak gibi durumlarda string türünü etkili bir şekilde kullanmayı bilmek oldukça önemlidir. Bu yazıda, TypeScript'te string'lerin nasıl çalıştığını, yaygın string işlemlerini ve kodunuzu daha temiz ve sağlam hale getirecek en iyi uygulamaları inceleyeceğiz.

Bu yazıda öğrenecekleriniz

String türünün temel kullanımı

String değerlerle birlik türlerinin (union types) nasıl kullanılacağı

Şablon (template literal) türlerinin ne olduğu ve ne zaman kullanılacağı

Zorlayıcı örnek durumlar

String Türünün Temel Kullanımı

TypeScript'te string türünün temel kullanımı, bir değişkene string türü tanımlayıp karakter dizisi atamakla başlar.

 let message: string = "Working with string in TypeScript!";

Not: Eğer bir değişkeni değer atayarak başlatırsanız, türünü açıkça belirtmenize gerek yoktur. TypeScript, türü otomatik olarak çıkarır.

Not: Bir değişkeni const ile tanımlarsanız, türü doğrudan atanan değerden çıkarılır çünkü const ile tanımlanan değişkenler yeniden atanamaz.

String Değerlerle Union Tür Kullanımı

Union string türü, bir değişkenin önceden belirlenmiş bir string değer kümesinden yalnızca birini almasını sağlar. Bu, daha hassas tür kontrolü ve daha okunabilir kod anlamına gelir.

// union string type for request type
type RequestType = 'POST' | 'GET' | 'PUT'

// Another example with directions
type Direction = "up" | "down" | "left" | "right";

Template Literal Türleri ve Kullanım Alanları

TypeScript'teki template literal türleri, JavaScript'teki şablon string yapısına benzer şekilde, sabit string türlerini birleştirerek yeni string türleri oluşturmanıza olanak tanır.

Bu türler, çalışma zamanında dinamik string'ler oluşturmaya benzer şekilde, tür düzeyinde string desenleri tanımlamak için kullanılır.

Template literal türleriyle özel string formatları tanımlayabiliriz. Bu yapı, JavaScript'teki regex (düzenli ifade) mantığına benzer şekilde çalışır.

type GetWhatever =get${Capitalize<string>}
const getApple: GetWhatever = 'getApple'
const getBanana: GetWhatever = 'getbanana' // not Valid
const getBanana2: GetWhatever = 'getBanana' // Valid

Union Türlerini Birleştirme

String union türlerini tek bir string türü içinde birleştirebiliriz. Örneğin:

type Cordinate = 'X' | 'Y' | 'Z'
type Nums = '0' | '1' | '2'

type Cartesian = `${Cordinate}${Nums}`
// output:
// type Cartesian = 'X0' | 'X1' | 'X2' | 'Y0' | 'Y1' | 'Y2' | 'Z0' | 'Z1' | 'Z2'

Ön Ek ve Son Ek Kullanımı

Template literal türlerinde ön ek (prefix) veya son ek (suffix) kullanarak katı string formatları tanımlayabiliriz. Bu yapı genellikle dosya adları, URL'ler veya özel tanımlayıcılar için kullanılır.

type AllowedFiles = `${string}.jpg` | `${string}.png`;
let file1: AllowedFiles = "file1.jpg";  // valid
let file2: AllowedFiles = "file2.png";  // valid
let file3: AllowedFiles = "doc.pdf";    // invalid

Zorlayıcı Bir Örnek

Şimdiye kadar öğrendiklerimize dayanarak bir örnek oluşturalım:

Bu örnekte bir türümüz var ve bu tür bir istek (request) sunuyor. Şimdi bunu daha iyi hale getireceğiz.

type RequestType = {
  method: 'POST' | 'GET'
  url: string
  body: object
}

Aslında bu örnek görevini yerine getiriyor gibi görünüyor:

const getUserRequest: RequestType = {
  url: 'www.test.com/getUsers',
  method: 'GET',
  body: null
}

Ancak, farklı türde verilerle bu yapı kötüye kullanılabilir:

const getUserRequest: RequestType = {
  url: 'testtesttesttest', // seems valid
  method: 'GET',
  body: null, // not needed for GET request
}

URL'nin daha kısıtlayıcı olması ve body özelliğinin yalnızca POST isteklerinde bulunması gerekir.

Hadi bunu daha güvenli hale getirelim:

URL için şablon türü kullanarak http isteği formatıyla sınırlandıracağız. Body alanını ise yalnızca POST isteklerinde aktif hale getireceğiz.

type RequestType = {
  method: 'POST'
  url:`http://${string}.com`
  body: object
} | {
  method: 'GET'
  url: http://${string}.com
}

Hâlâ daha da iyisini yapabiliriz: URL'yi ortak hale getirip https desteği de ekleyebiliriz.

type RequestType = { 
url:`http://www.${string}.com${string}` | `https://www.${string}.com${string}`}
& ({
    method: 'POST'
    body: object
  } | {
    method: 'GET'
  })

const getUserRequest: RequestType = {
  url: 'http://www.test.com', // seems valid
  method: 'POST',
  body: { organizationId: 2 }
}

Artık hem http hem de https destekleniyor ve body alanı sadece POST istekleri için geçerli.