[데일리 퀴즈] 0522 데일리 퀴즈

1.  type, interface 차이점

type-alias는 모든 타입을 선언할 때 사용될 수 있고, interface는 객체에 대한 타입을 선언할 때 사용될 수 있다. 둘 다 객체에 대한 타입을 선언하는 데 사용될 수 있는데, 확장 측면에서 사용 용도가 달라진다.

 

확장이 불가능한 타입을 선언하려면 type-alias를 사용하면 되고, 확장이 가능한 타입을 선언하려면 선언 병합이 가능한 interface를 사용하면 된다.

 

---

2.  아래 두 타입의 부모,자식 관계와 마지막 문장에 있는 두 객체 타입간의 호환성을 설명해주세요

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;        -??

 

타입 호환성이란 두 가지 타입 간에 값이 할당 가능한지 여부를 나타내는 개념이다.

 

즉, 어떤 타입의 값이 다른 타입으로 변환되거나 할당될 수 있는지를 판단하는 규칙인데, 이를 통해 코드 작성 시 불필요한 오류를 방지하고 타입 안정성을 유지할 수 있다.

 

1) 부모, 자식 관계

ProgrammingBook 타입은 Book 타입의 모든 속성을 포함하고, 추가로 skill 속성을 가진다. 따라서 ProgrammingBook은 Book의 서브타입(자식)이다.

 

2) 타입 호환성

- book = programmingBook;

• ProgrammingBook은 Book의 서브타입이므로, ProgrammingBook 타입의 객체는 Book 타입의 변수에 할당될 수 있다.
• 이는 ProgrammingBook이 Book이 요구하는 모든 속성을 포함하고 있기 때문이다.

- programmingBook = book;

• Book은 ProgrammingBook의 슈퍼타입이기 때문에, Book 타입의 객체는 ProgrammingBook 타입의 변수에 할당될 수 없다.
• 이는 ProgrammingBook 타입이 skill 속성을 필요로 하지만, Book 타입의 객체는 이 속성을 가지고 있지 않기 때문에 호환되지 않는다.

 

---

3. union타입과 Intersection Type에 대해 설명해주세요.

유니온 타입(Union Type)이란 자바스크립트의 OR 연산자(||)와 같이 'A' 이거나 'B'이다 라는 의미의 타입이다.

function list(item: number|string){
...
}

 

(item: number | string)처럼 item의 타입을 number와 string 두가지 타입 중 하나로 쓸 수 있게 해준다.

아래의 예시처럼 유니온타입을 쓸 때 주로 타입가드를 써주며 타입을 지정해준다.

function list(item: number|string){
if(typeof item === 'number){
...
}
if(typeof item === 'string){
...
}
}

 

유니온 타입을 쓸 때는 주의할 점이 있다.

바로 유니온타입을 쓸 때 주로 "A | B"처럼 유니온타입을 쓰면 둘 중 하나라는 뜻 때문에 타입이 둘다 포함된다고 오해하는 것 이다. 하지만 실제로는 그렇지 않다.

interface Person {
  name: string;
  age: number;
}

interface Developer {
  name: string;
  skill: string;
}

function introduce(someone: Person | Developer) {
  someone.name; // O 정상 동작
  someone.age; // X 타입 오류
  someone.skill; // X 타입 오류
}

 

위의 예시를 보면 타입스크립트 관점에서는 introduce() 함수를 호출하는 시점에 Person 타입이 올지 Developer 타입이 올지 알 수가 없기 때문에 어느 타입이 들어오든 간에 오류가 안 나는 방향으로 타입을 추론하게 된다. 즉 두 타입의 공통적으로 들어있는 타입만 접근이 가능하게 된다.

 

즉 합집합이라 생각하면 편하다.

 

 

 

 

인터섹션 타입 (Intersection Type)은 여러 타입을 모두 만족하는 타입을 정의한다. 이는 값이 두 개 이상의 타입을 모두 만족해야 함을 의미한다.

 

반대로 인터섹션 타입은 아래의 예시에서 정상동작 한다.

function introduce(someone: Person | Developer) {
  someone.name; // O 정상 동작
  someone.age; // O 정상 동작
  someone.skill; // O 정상 동작
}

즉 타입이 type introduce = Person & Developer;

 

즉 교집합이라고 생각하면 편하다.

 

요약하자면 아래와 같다.

keyof (A&B) = (keyof A) | (keyof B) //구조적 타입
keyof (A|B) = (keyof A) & (keyof B) //유니온타입