판별 가능한 유니온형

개시하다

이번에 판별할 수 있는 유니온형은 인산자를 대체하는 형 보호 방법이라고 본다.
즉 인 연산자의 문제점을 판별할 수 있는 유니온형이다.
방어에 관해서는 제가 예전에 쓴 적이 있으니 참고하세요!

in 연산자

지난번방어도 복습하고 아래 코드에서 보세요.

​interface Person {
  name: string;
  age: number;
}
interface Book {
  name: string;
  price: number;
}

function doStuff(arg: Person | Book) {
  console.log(arg.name);
  console.log(arg.age);// エラー(プロパティ 'age' は型 'Book' に存在しません。）

}

인터페이스 이름을 DoStuff 함수에 단일 형식으로 전달하는 인터페이스의 객체 유형을 정의합니다.반환값 종형 추론도void형으로 두 개의 로그를 표시할 예정입니다.
그럼요.age에 대한 오류가 발생할 수 있습니다.잘못된 내용에서 알 수 있듯이 어그가 퍼슨이든 북이든 유형을 줄이지 않아 오류가 발생할 수 있다.
따라서 in 연산자의 유형 보호를 사용하면 이 오류는 제거됩니다.

​interface Person {
  name: string;
  age: number;
}
interface Book {
  name: string;
  price: number;
}

function doStuff(arg: Person | Book) {
  if ("age" in arg) {
    console.log(arg.age);
  } else {
    console.log(arg.price);
  }
  console.log(arg.name);
}}

인 연산자에 무슨 문제가 있어요.

필자는 in 연산자의 가장 큰 단점은if문에서 속성 이름을 넘긴 후에Typescript가 틀리지 않고 vscode가 자동으로 보완하는 지원도 없다고 생각한다.
전선으로 어떻게 된 일인지 확인해 봐.

​interface Person {
  name: string;
  age: number;
}
interface Book {
  name: string;
  price: number;
}

function doStuff(arg: Person | Book) {
  if ("aggge" in arg) {//'age'の間違え(エラーなし)
    console.log(arg.age); //agggeとプロパティは存在しないためここではエラーを出してくれる。
  } else {
    console.log(arg.price);
  }
  console.log(arg.name);
}

age 부분을 age와 연결합니다.aggge라는 속성이 있다고 판단했는지 이age와 타자를 칠 때 틀리지 않습니다.
이렇게 간단한 코드라면 바로 오류를 발견할 수 있지만 더 복잡한 코드를 쓸 때 vscode가 오류를 냈으면 합니다.웃다 웃다

사용자 정의 보호

오프닝이 길어졌습니다. in 연산자를 대체하는 방법은 사용자 정의형 보호입니다.

​interface Person {
  type: "person";
  name: string;
  age: number;
}
interface Book {
  type: "book";
  name: string;
  price: number;
}

function doStuff(arg: Person | Book) {
  if (arg.type === "person") {
    console.log(arg.age);
  } else {
    console.log(arg.price);
  }
  console.log(arg.name);
}

사용자 정의형 보호 요점은 각 인터페이스가 공통된 속성 이름을 가지도록 하는 것이다.
또한 vscode에서는 자동 보완 지원으로if문에 있는 싱글 쿼터 (") 또는 더블 쿼터 (") 를 입력할 때 속성 이름 type의 값 (person 또는 book) 을 추측하여 표시하기 때문에 오류가 많지 않습니다.