TypeScript Type Guard

Giriş

Type Guard çeşitleri şöyle

null Guard

typeof Guard

instanceof Guard

in Guard

Discriminated Union Guards

User-Defined Guards

null Guard - null kontrolü yapar

Örnek

Şöyle yaparız

const element: HTMLElement | null = document.getElementById('target');

element.innerText = 'Hello'; // Compiler error - null in union

if (element !== null) {
    element.innerText = 'Hello'; // null removed from union 
}

null Guard yerine Optional kullanmak çok daha kolay. Şöyle yaparız.

element?.innerText = 'Hello';

typeof Guard

Örnek

Şöyle yaparız

// Note that the type of 'primitive' in each branch is different
switch (typeof primitive) {
  case "number": return primitive.toFixed(2);
  case "string": return primitive.toUpperCase();
  case "boolean": return !primitive;
  default: throw new Error("Unexpected type") 
}

Açıklaması şöyle

Remember that typeof can only tell us if a type is string, number, boolean, symbol, function, bigint, undefined. Everything else will return "object".

instanceof Guard

Örnek

Şöyle yaparız

function setupInput(input: HTMLInputElement | HTMLTextAreaElement) {
    input.value = ''; // Valid since value is common to both types

    if (input instanceof HTMLTextAreaElement) {
        // These properties are only valid for HTMLTextAreaElement
        input.rows = 25;
        input.cols = 80;
        input.wrap = 'hard';
    } else {
        // These properties are only valid for HTMLInputElement
        input.width = 400;
        input.height = 50;
    }
}

in Guard

Örnek

Şöyle yaparız

function setupInput(input: HTMLInputElement | HTMLTextAreaElement) {
    if ('rows' in input) {
        // These properties are only valid for HTMLTextAreaElement
        input.rows = 25;
        input.cols = 80;
        input.wrap = 'hard';
    } else {
        // These properties are only valid for HTMLInputElement
        input.width = 400;
        input.height = 50;
    }
}

Açıklaması şöyle

The in operator allows us to test an object for the existence of a member. In the code below, only HTMLTextAreaElement has a rows property so by testing for its existence the compiler determines the type of the input variable on each branch and narrows the type.

Note, in can only be used if ALL members of the union are object types (not primitives).

in Guard kullanıyorsak return type'a dikkat etmek gerekir. Şöyle yaparız

function isTextArea(input: HTMLInputElement | HTMLTextAreaElement):
input is HTMLTextAreaElement {
  return 'rows' in input;
}

if (isTextArea(input)) {
    // input has type HTMLTextAreaElement
    input.rows = 25; // Valid
}

Eğer şöyle yapsaydık derleme hatası alırdık. Çünkü boolean dönünce "type narrowing" yapılmıyor.

function isTextArea(input: HTMLInputElement | HTMLTextAreaElement): boolean {
    return 'rows' in input;
}

if (isTextArea(input)) {
    // input still has union type
    input.rows = 25; // Compiler error
}

Ayrıca TypeScipt 4.4 ile "type narrowing" şöyle de oluyor. Buna Control Flow Analysis information (CFA) deniliyor.

const isTextArea = 'rows' in input;

if (isTextArea) {
    // Narrowing has taken place
    input.rows = 25;
}

Örnek

Elimizde şöyle bir kod olsun.

interface A {
  text: string;
}
interface B {
  type: string;
}
type C = A|B;

B tipindeki nesneleri süzmek için şöyle yaparız.

function isB(c: C): c is B {
  if ('type' in c) { 
    return typeof c.type === 'string';
  }

  return false;
}

Elimizde bir array olsun.

const arr: Array<C> = [....]

Şöyle yaparız.

const output = arr.find(isB);