0Pricing
TypeScript Academy · 강의

instanceof 및 in을 사용한 형식 좁히기

클래스 인스턴스와 객체 형태의 범위를 좁힙니다.

instanceof 및 in을 사용한 형식 좁히기은(는) CoddyKit의 무료 TypeScript Academy 강의입니다. 이것은 4개 중 2번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 TypeScript Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. TypeScript Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

시작하기

`instanceof`는 클래스 인스턴스를 좁히고 `in`은 속성의 존재 여부를 기준으로 객체 타입을 좁힙니다. 두 연산자는 복잡한 유니언을 다룰 때 필수적입니다.

instanceof 좁히기

`instanceof`를 사용하여 값이 클래스의 인스턴스인지 확인하십시오. TypeScript는 타입을 해당 클래스로 좁힙니다.
function handle(err: Error | string) {
  if (err instanceof Error) {
    console.log(err.message); // err: Error
  } else {
    console.log(err); // err: string
  }
}

사용자 정의 클래스와 instanceof

instanceof는 직접 만든 클래스에서도 작동합니다.
class Dog { bark() { return 'Woof'; } }
class Cat { meow() { return 'Meow'; } }
function speak(pet: Dog | Cat) {
  if (pet instanceof Dog) pet.bark();
  else pet.meow();
}

instanceof는 인터페이스에서 작동하지 않음

인터페이스는 실행 시점에 제거됩니다. 인터페이스에는 instanceof를 사용할 수 없으며 클래스에만 사용할 수 있습니다.

in 연산자

`in`을 사용하여 객체에 속성이 존재하는지 확인하십시오. TypeScript는 유니언을 해당 속성을 가진 멤버로 좁힙니다.
type Fish = { swim(): void };
type Bird = { fly(): void };
function move(animal: Fish | Bird) {
  if ('swim' in animal) animal.swim();
  else animal.fly();
}

선택적 속성을 사용한 in 좁히기

`in`은 선택적 속성도 기준으로 좁힙니다. 속성이 존재할 수 있는(CAN) 유니언 멤버로 좁힙니다.
type A = { x?: number };
type B = { y: number };
function process(v: A | B) {
  if ('x' in v) {
    // v: A (has optional x)
  }
}

instanceof와 in 결합하기

복잡한 타입 판별을 위해 두 좁히기 기법을 결합할 수 있습니다.
function describe(v: Error | { message: string }) {
  if (v instanceof Error) console.log('Error:', v.stack);
  else if ('message' in v) console.log('Object:', v.message);
}

판별된 유니언에 in 사용하기

유니언 멤버에 판별자가 없을 때 `in` 검사는 같은 좁히기 역할을 할 수 있습니다.
type Square = { side: number };
type Circle = { radius: number };
function area(s: Square | Circle): number {
  return 'side' in s ? s.side ** 2 : Math.PI * s.radius ** 2;
}

catch 블록에서 instanceof 사용하기

catch 블록에서 instanceof를 사용하여 오류 타입을 구분하십시오.
try {
  await fetchData();
} catch (err) {
  if (err instanceof NetworkError) { /* retry */ }
  else if (err instanceof AuthError) { /* redirect */ }
  else throw err;
}

Object.prototype 검사와 in 비교

`key in obj`와 `Object.prototype.hasOwnProperty.call(obj, key)`는 모두 속성의 존재 여부를 검사하지만, `in`은 상속된 속성도 일치시킵니다.

좁히기 우선순위

여러 좁히기 검사가 적용되면 TypeScript는 좁혀진 타입의 교집합을 취하여 가능한 가장 구체적인 타입을 제공합니다.

빠른 확인

TypeScript에서 인터페이스 타입을 좁히는 데 `instanceof`를 사용할 수 없는 이유는 무엇입니까?

복습

`instanceof`는 실행 시점에 클래스 인스턴스를 좁힙니다. `in`은 속성의 존재 여부를 기준으로 객체 유니언을 좁힙니다. 클래스 계층과 구조적 객체 유니언을 다룰 때 두 연산자를 모두 사용하십시오.

자주 묻는 질문

“instanceof 및 in을 사용한 형식 좁히기” 강의는 무료인가요?

네 — “instanceof 및 in을 사용한 형식 좁히기” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 TypeScript Academy 강의 전체를 잠금 해제할 수 있습니다. TypeScript Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“instanceof 및 in을 사용한 형식 좁히기”에서 뭘 배우나요?

클래스 인스턴스와 객체 형태의 범위를 좁힙니다. 브라우저에서 직접 실행하는 실습 코드로 TypeScript Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

TypeScript Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 TypeScript Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 2번째 강의입니다.

“instanceof 및 in을 사용한 형식 좁히기” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 TypeScript Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 TypeScript Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

  1. typeof 및 참 같은 값에 따른 형식 좁히기
  2. instanceof 및 in을 사용한 형식 좁히기
  3. 사용자 정의 형식 가드 함수
  4. never를 사용한 모든 경우 처리 검사
← TypeScript Academy(으)로 돌아가기