TypeScript Etiketli Şablon Dizeleri

Temel bilgiler: Şablon Dizeleri

Şablon değişmezleri olarak da adlandırılan etiketli şablon dizgilerinden bahsetmeden önce, genel olarak şablon dizgilerine hızlı bir giriş yapmak istiyorum. Bunun ne hakkında olduğunu zaten biliyorsanız, bir sonraki bölüme geçmekten çekinmeyin.

Şablon dizeleri, Javascript ifadelerini içerebilen ve aynı zamanda birden çok satıra yayılan özel bir dize sembolü türüdür. Yaygın dizelerde olduğu gibi çift tırnak yerine ters işaretli karakterleri kullanırlar.

Karakterlerin birden çok satıra yayılmasıyla ilgili olarak, ortak bir dize, yeni bir satır oluşturmak için "n" karakteriyle birlikte bir ters eğik çizgi içermelidir. Şablon dizeleriyle, tabiri caizse, basitçe yeni bir satır içi "satır" oluşturabilirsiniz.

// A common string as reference.
const string = "I'm just a string";

// A template string. For Typescript,
// this value is a plain 'string'-type.
const templateString = `I'm just a string as well`;

Bir dize içindeki ifadelerin kullanılabilirliği de hızlı bir şekilde açıklanabilir. Yalnızca dize sembollerine izin vermek yerine, şablon dizeleri keyfi ifadeleri kabul eder. Aşağıdaki örnek bununla ne demek istediğimi gösteriyor.

function greet(name: string) {
  // Here you see an expression
  // *embedded* inside a string.
  return `Hello, ${name}!`;
}

// "Hello, Tom!"
const greeting = greet("Tom");

// One more example, using
// Typescript's 'rest'-operator
// which allowes any number of values
// and provides them as an array,
// in our case of type 'string'.
function greetAll(...names: string[]) {
  return `Hi everybody: ${names.join(", ")}!`;
}

// "Hi everybody: Tom, Luke!"
const greetingForAll = greetAll("Tom", "Luke");

Etiketli şablon dizeleri

Bu özellik kümesi tek başına zaten güzel olurdu, ancak şablon dizeleri de işlev olarak kullanılabilir. "Etiketlemek" için şablon dizesinin önüne bir anahtar kelime koymanız yeterlidir, dolayısıyla "etiketli şablon dizeleri" adı verilir. Bir sonraki örnek için zaman.

// All previous examples used 'untagged'
// string literals, which means they're 
// practially just a string.
//
// But let's see how we can convert them
// to an acutal function:
function merge(template: TemplateStringsArray, ...params: string[]){
  
  // This needs some explanation:
  //
  // 'template', our first param, contains
  // all strings *inbetween the paramters*,
  // you'll see in a minute what I mean by that.
  //
  // 'params' then is an array of strings
  // that were provided as paramteres to the
  // template string.
  
  // Let's ignore the result for now.
  return "";
}

const what = "test";

// Here's the tagged template string in action.
// The tag is the function name, and like a 
// function the tagged template string can be called.
//
// Let's destruct how this will look like
// in the function defined above.
//
// 'template' = ["Just a", ""];
// 'params'   = ["test"]
const result = merge`Just a ${what}`;

// As you can see, the function splits the string
// into the string-only parts and the expressions.

Gördüğünüz gibi, sözdizimi onunla ilk çalışırken oldukça ilginç ve hatta belki biraz yabancı görünüyor. Muhtemelen etiketli şablon dizelerini uygulamanızı gerektirecek pek çok kullanım durumu yoktur, ancak yine de onunla oynayabiliriz. Aşağıdaki ve son örnekte, bazı vaka çalışmalarını bir araya getirdim. Göreceğiniz gibi, etiketli şablon dizeleri doğal olarak jeneriklerle kullanılabilir ve belirli gereksinimlerin uygulanması için bazı ilginç seçenekler sunar.

// 
// Generic
//
// Tagged template literals can be generic, too.
function generic<T>(template: TemplateStringsArray, ...params: T[]){
    return template.join(",") + params.join(",")
}

// "A value: ,test"
console.log(generic<string>`A value: ${"test"}`);

//
// Generic (with super powers)
//
// You can specify each type and 
// also limit the number of params!
function coalesce<A, B, C>(template: TemplateStringsArray, ...params: [A, B, C]){
    return template.join(",") + params.join(",")
}

// ", - , - ,value,0,true" 
const res = coalesce<string, number, boolean>`${"value"} - ${0} - ${true}`;

//
// Different return type
//
// Also, tagged literal types don't 
// only have to return strings.
const preview = (template: TemplateStringsArray, ...params: number[]) 
  => (template2: TemplateStringsArray, ...params2: string[])
  => {
    return "what?";
}

// Note the two pairs of backticks
// after each other, we're just calling
// the returned tagged template string
// form our first one!
console.log(preview`${0}``${"a"}`);

Umarım Javascript'in yanı sıra Typescript'in özelliklerinden birine yapılan bu oldukça hızlı geziyi beğenmişsinizdir. Şablon dizeleri büyük olasılıkla kod tabanınızda yaygın bir şeydir, etiketli şablon dizeleri muhtemelen değildir, bu nedenle bu tür niş özellikler hakkında daha fazla bilgi edinmek ilginçtir.