Ayırt Edici Olarak TypeScript Şablonu Dize Türleri

TS'de "Daralma" nedir?

TypeScript 4.5 ve sonraki sürümlerde değişmez türlerin geliştirilmesine bir göz atmadan önce, bu bağlamda "Daraltma"nın gerçekte ne anlama geldiğini hızlıca özetlemek istiyorum. Temel olarak, varlığın özelliklerini kontrol ederek TypeScript'te bir türü daraltabilirsiniz. Varlıkta yalnızca belirli bir tür için kullanılabilen bir özellik varsa, Typescript bunu anlar ve bu nedenle doğru türleri sağlayabilir.

Aşağıdaki kod örneği, bununla ne demek istediğimi gösterir.

type Addition = {
    sum: number;
}

type Subtraction = {
    result: number;
}

function calculate(action: Addition | Subtraction) {
    if ('sum' in action) {
      // Simple example of using properties
      // of an entity to narrow down its
      // actual type.
      //
      // 'action' is at this point of type
      // 'Addition'. Nice!
      const addition = action;
    }
}

Şablon Dize Türleri için Daraltma

TypeScript sürüm 4.5'ten başlayarak, bu model aynı zamanda backtick'li özel dizeler olarak da bilinen şablon değişmez türleri için de uygulanabilir. Kalıp eşleştirme, dilde gerçekten güçlü hale geliyor.

Elbette, daraltmanın kullanılabilir hale gelmesi için karşılaştırmadaki tüm türlerin aynı özellik anahtarını paylaşması gerekir. Aksi takdirde, yukarıdaki gibi genel daraltmayı basit bir şekilde kullanabilirsiniz.

Aşağıdaki kod örneği, Şablon Dizelerinin Daraltma'yı nasıl kullanabileceğini gösterir:

type Addition = {
    variant: `${string}-addition`;
    sum: number;
}

type Subtraction = {
    variant: `${string}-subtraction`;
    result: number;
}

function process(action: Addition | Subtraction) {
    if (action.variant === "simple-addition") {
        // Stupid simple example, but you get the idea:
        // We used 'simple-addition', and the pattern 
        // matching by TS understood that '...-addition'
        // can be discriminated to 'Addition'.
        const addition = action;
    }
}

//
// Example that DOES NOT work.
//
// This demo illustrates that the
// discriminante has to be a string,
// else the pattern matching worn't work.

type Addition = {
    variant: `${string}-arithemtic`;
    sum: number;
}

type Subtraction = {
    variant: `${number}-arithemtic`;
    result: number;
}

function process(action: Addition | Subtraction) {
    if (action.variant === "123-arithemtic") {
        // Still 'Addion | Subtraction',
        // as we can only compare against
        // a string '123-arithmetic', which
        // is of course the same for both.
        const addition = action;
    }
}

Artık TypeScript'te şablon değişmezlerini daraltmayı biliyorsunuz! Bu, çok sık kullanmayacağınız bir özellik olabilir, ancak uygun olduğunda, kod karmaşıklığını büyük ölçüde azaltabileceğini ve kod tabanınızı özellik olmadan olduğundan biraz daha temiz tutabileceğini düşünüyorum.