모르다

방어

백 번 듣는 것보다 한 번 보는 것이 낫다. 간단한 예부터 소개하자.

type Suuji = string | number;
// いその〜,10を足そうぜ！
const juutasu = (x: Suuji) => x + 10;
console.log(juutasu("5")); // 510

여기에 무서운 코드가 하나 있는데 Suuji가 string의 유형에 속하는지 number에 속하는지 모르겠다.이런 유형Suuji을 매개 변수로 수신한 후 10을 더하는 함수가 있으면x + 10의 처리x가string면 문자열의 결합이 된다.
그래서 형 방어다.
종류를 축소함으로써 이 종류에만 있는 처리와 속성 호출을 안전하게 쓸 수 있습니다.

typeof형 방어 사용

const juutasu2 = (x: Suuji) => {
  if (typeof x === "number") {
    return x + 10;
  }
  if (typeof x === "string") {
    return parseInt(x) + 10;
  }
};
console.log(juutasu2("5")); // 15

조건분지를 이용하여 이 범위 내의 유형을 한정한다.

if (typeof x === "number") {
  return x * 10;
}

상기 범위x가 number에 한할 때 10을 추가할 수 있다.

if (typeof x === "string") {
  return parseInt(x) * 10;
}

이 범위 내x는string상황이기 때문에parseInt()로number변환해서10을 더한다.
이렇게 이용형 보호는 유지형 안전을 유지할 수 있다.

비교적 흔한 예

다음은 실용적인 예를 살펴보자.

type Kensi = {
  name: string;
  hp: number;
  swordSkill: string;
};
type Wizard = {
  name: string;
  hp: number;
  magicSkill: string;
};
type Yusya = Kensi | Wizard;

const attack = (player: Yusya) => {
  console.log(`${player.name}は${player.swordSkill}を使った`);
  // WizardにswordSkillというものは存在しないのでエラー
};

여러 가지 상황이 있는데 공격의 함수를 하나로 묶으려면 스켈은 임무에 따라 다르기 때문에 오류가 발생한다.

해결 방법유형 보호를 위해 type 속성 추가

이것은 정의형일 때 당신에게 만들어주는 type이라는 속성(이름은 무엇이든지 가능), 그것으로 어느 속성인지 판별할 수 있습니다.

type Kensi = {
  type: "kensi"; // 追加
  name: string;
  hp: number;
  swordSkill: string;
};
type Wizard = {
  type: "wizard"; // 追加
  name: string;
  hp: number;
  magicSkill: string;
};

다음과 같이 유형 보호를 할 수 있습니다.

const attack = (player: Yusya) => {
  if (player.type === "kensi") {
    console.log(`${player.name}は${player.swordSkill}を使った`);
  }
  if (player.type === "wizard") {
    console.log(`${player.name}は${player.magicSkill}を使った`);
  }
};

해결 방법in narrowing 사용

in의 문법을 사용하여 이 속성이 존재하는지 여부를 판단한다.

const attack = (player: Yusya) => {
  if ("swordSkill" in player) {
    console.log(`${player.name}は${player.swordSkill}を使った`);
  }
  if ("magicSkill" in player) {
    console.log(`${player.name}は${player.magicSkill}を使った`);
  }
};

swordSkill와 같은 속성이 존재한다면Kensi의 유형은 유형 보호가 이루어집니다.

해결 방법자체 판정 유형의 함수

/* 型を判定する関数 */
const isKensi = (player: Yusya): player is Kensi => {
  return "swordSkill" in player; // Kensiにする条件を自作できる
  // return player.type === "kensi" // だから,これでもOK
};

is는 문법으로 되돌아오는 값의 유형을 정의하여narrowing에 사용할 함수를 만들 수 있습니다.이때player is Kensi의 유형은boolean이며, 조건이 충족되면 맞춤형true으로 답장할 수 있다.
이걸로 경호원 해.

const attack4 = (player: Yusya) => {
  if (isKensi(player)) {
    console.log(`${player.name}は${player.swordSkill}を使った`);
  } else {
    console.log(`${player.name}は${player.magicSkill}を使った`);
  }
};

실제 VScode 등으로 코드를 쓰고 마우스를 타고 모델이 제한된 것을 확인하면 된다.

덤

형 방어가 효과가 없다고 생각하면 await가 없어요.

const attack5 = async (player: Promise<Yusya>) => {
  // const response = player // await忘れるといろいろうまくいかない
  const response = await player;
  if (isKensi(response)) {
    console.log(response.swordSkill);
  } else {
    console.log(response.magicSkill);
  }
};

집게가 조금 있지만 깜빡await 몰드 보호를 못해 고민이 많았기 때문에 무료로 공유합니다.
참고 자료
https://typescript-jp.gitbook.io/deep-dive/type-system/typeguard