[한입] 객체의 타입 호환성

TK·2023년 12월 11일
0

[강의] 한입 시리즈

목록 보기
16/59

※ 참고: 기본타입 호환성 ※

특정 타입을 다른 타입으로 취급해도 괜찮은지 판단하는 것
ex)

let num1: number = 10;
let num2: 10 = 10;
num1 = num2;   // ✅가능

객체의 타입 호환성

어떤 객체 타입을 다른 객체 타입으로 취급해도 괜찮은지 판단하는 것

  • 객체의 타입은 조건이 더 적은 타입이 슈퍼타입이 됨
  • 타입스크립트는 프로퍼티를 기준으로 타입을 정의하는 구조적 타입시스템을 따름
  • 프로퍼티를 기준으로 결정됨
// 슈퍼타입
type Animal = {
  name: string;
  color: string;
};

// 서브타입 - 추가 조건(프로퍼티)이 있음
type Dog = {
  name: string;
  color: string;
  breed: string;
};

let animal: Animal = {
  name: "기린",
  color: "yellow",
};

let dog: Dog = {
  name: "돌돌이",
  color: "brown",
  breed: "진도",
};

// 업캐스팅
animal = dog;  // ✅가능

// 다운캐스팅
dog = animal;  // ❌오류

초과 프로퍼티 검사

객체 타입에 정의된 프로퍼티"만" 입력 가능

type Book = {
  name: string;
  price: number;
};

type ProgrammingBook = {
  name: string;
  price: number;
  skill: string;
};

let book: Book;

let programmingBook: ProgrammingBook = {
  name: "한입리액트",
  price: 33000,
  skill: "reactjs",
};

// 업캐스팅
book = programmingBook;  // ✅가능

// 다운캐스팅
programmingBook = book;  // ❌오류

let book2: Book = {
  name: "한입리액트",
  price: 33000,
  skill: "reactjs",  // ❌오류
};
  • let book2... 의 코드는 위의 업캐스팅 book = programmingBook;코드와 같은 동작이라고 볼 수 있는데, book = programmingBook;코드는 오류가 없고 let book2...코드 는 오류 결과가 나타남 → 초과프로퍼티 검사
  • 초기화 하는 값으로 객체 리터럴을 사용하는 경우 발생
  • 정의된 프로퍼티만 작성 가능

※ 참고: 초과프로퍼티 검사 피하기 ※

객체 리터럴을 이용하지 않고, 변수에 저장해 두었다고 인수로 변수를 전달 해야함

  • 예1)
// 아래와 같이 사용 가능
let book3: Book = programmingBook;  // ✅가능
  • 예2)
function func(book: Book) {}
// 아래와 같이 사용 불가
func({
  name: "한입리액트",
  price: 33000,
  skill: "reactjs",    // ❌오류
});
// 아래와 같이 사용 가능
func(programmingBook); // ✅가능
profile
쉬운게 좋은 FE개발자😺

0개의 댓글