타입스크립트 타입 가드 예제

타입스크립트( Typescript )의 타입 가드( Type Guard )는 특정 값의 타입을 검사하여, 조건문 내부의 값을 구체적이고 명확한 타입으로 안전하게 좁혀 사용하는 방법이다.

타입스크립트의 변수는 문자열, 숫자, 객체 등 여러 타입을 포함하는 유니언 타입으로 선언될 수 있다.

타입스크립트에서 여러가지 타입을 사용시, 타입 가드를 사용하면 현재 값이 어떤 타입인지 확인하고, 해당 타입에서 제공되는 속성이나 기능에 접근할 수 있다.

function printValue(value: string | number) {
  console.log(value.toUpperCase());
}

⊙

function formatValue(value: string | number) {
  if (typeof value === "string") {
    return value.toUpperCase();
  }

  return value.toFixed(2);
}

⊙

if (typeof value === "string") {
  // value: string
} else {
  // value: number
}

⊙

function printLength(value: string | number) {
  if (typeof value === "string") {
    console.log(value.length);
    return;
  }

  console.log(value);
}

⊙

function printLength(value: string | number) {
  if (typeof value === "string") {
    console.log(value.length);
    return;
  }

  console.log(value);
}

⊙

function double(value: string | number): string | number {
  if (typeof value === "number") {
    return value * 2;
  }

  return value.repeat(2);
}

console.log(double(10));    // 20
console.log(double("Hi"));  // HiHi

⊙

console.log(typeof []);    // "object"
console.log(typeof null);  // "object"

⊙

function checkValue(value: unknown) {
  if (value === null) {
    console.log("null입니다.");
  } else if (Array.isArray(value)) {
    console.log("배열입니다.");
  } else if (typeof value === "object") {
    console.log("일반 객체일 수 있습니다.");
  }
}

⊙

function printName(name: string | null | undefined) {
  if (name) {
    console.log(name.toUpperCase());
    return;
  }

  console.log("이름이 없습니다.");
}

⊙

function printMessage(message: string | null) {
  if (message !== null) {
    console.log(message);
  }
}

⊙

printMessage(""); // 빈 문자열 출력 가능

⊙

type Admin = {
  name: string;
  permissions: string[];
};

type Member = {
  name: string;
  points: number;
};

function printUserInfo(user: Admin | Member) {
  if ("permissions" in user) {
    console.log(user.permissions.join(", "));
    return;
  }

  console.log(user.points);
}

⊙

type Dog = {
  bark: () => void;
};

type Cat = {
  meow: () => void;
};

function makeSound(animal: Dog | Cat) {
  if ("bark" in animal) {
    animal.bark();
  } else {
    animal.meow();
  }
}

⊙

type Human = {
  name: string;
  swim?: () => void;
};

type Fish = {
  swim: () => void;
};

function move(value: Human | Fish) {
  if ("swim" in value) {
    // Human 또는 Fish일 수 있음
  }
}

⊙

class Dog {
  bark() {
    console.log("멍멍");
  }
}

class Cat {
  meow() {
    console.log("야옹");
  }
}

function makeAnimalSound(animal: Dog | Cat) {
  if (animal instanceof Dog) {
    animal.bark();
  } else {
    animal.meow();
  }
}

⊙

function formatDate(value: Date | string): string {
  if (value instanceof Date) {
    return value.toISOString();
  }

  return value;
}

⊙

function printItems(value: string | string[]) {
  if (Array.isArray(value)) {
    value.forEach((item) => {
      console.log(item);
    });

    return;
  }

  console.log(value);
}

⊙

function getFirstValue(value: unknown) {
  if (Array.isArray(value)) {
    return value[0];
  }

  return undefined;
}

⊙

function isStringArray(value: unknown): value is string[] {
  return (
    Array.isArray(value) &&
    value.every((item) => typeof item === "string")
  );
}

⊙

const data: unknown = ["TypeScript", "JavaScript"];

if (isStringArray(data)) {
  data.map((item) => item.toUpperCase());
}

⊙

매개변수명 is 타입

⊙

type Fish = {
  swim: () => void;
};

type Bird = {
  fly: () => void;
};

function isFish(animal: Fish | Bird): animal is Fish {
  return "swim" in animal;
}

function move(animal: Fish | Bird) {
  if (isFish(animal)) {
    animal.swim();
  } else {
    animal.fly();
  }
}

⊙

type User = {
  id: number;
  name: string;
  active: boolean;
};

function isUser(value: unknown): value is User {
  if (typeof value !== "object" || value === null) {
    return false;
  }

  const user = value as Record<string, unknown>;

  return (
    typeof user.id === "number" &&
    typeof user.name === "string" &&
    typeof user.active === "boolean"
  );
}

⊙

const responseData: unknown = {
  id: 1,
  name: "Kim",
  active: true,
};

if (isUser(responseData)) {
  console.log(responseData.name.toUpperCase());
} else {
  console.error("올바르지 않은 사용자 데이터입니다.");
}

⊙

function isUser(value: unknown): value is User {
  return true;
}

⊙

type LoadingState = {
  status: "loading";
};

type SuccessState = {
  status: "success";
  data: string[];
};

type ErrorState = {
  status: "error";
  message: string;
};

type RequestState = LoadingState | SuccessState | ErrorState;

⊙

function renderState(state: RequestState) {
  switch (state.status) {
    case "loading":
      return "불러오는 중입니다.";

    case "success":
      return `${state.data.length}개의 데이터를 불러왔습니다.`;

    case "error":
      return `오류: ${state.message}`;
  }
}

⊙

case "success":
  // state는 SuccessState
  console.log(state.data);

case "error":
  // state는 ErrorState
  console.log(state.message);