5.30 TypeScript의 연산자 활용 타입 유니온(Union) 타입과 인터섹션(Intersection) 포팅

유니온 타입

/* 코드를 작성한 뒤 터미널에 순서대로
1. tsc src/index.ts
2. node src/index.js 
라고 치면 결과를 확인해볼 수 있습니다. */

function printAge(person) {
  let age;
  if (typeof person.age === 'number' || typeof person.age === 'string') {
    age = person.age.toString();
  }
  console.log(`${person.name}의 나이는 ${age}살 입니다.`);
}

const kimcoding = {
  name: '김코딩',
  age: 30,
};

const parhacker = {
  name: '박해커',
  age: '서른',
};

printAge(kimcoding);
printAge(parhacker);

---

/* 코드를 작성한 뒤 터미널에 순서대로
1. tsc src/index.ts
2. node src/index.js 
라고 치면 결과를 확인해볼 수 있습니다. */

interface person {
  name: string;
  age: number | string;
}

function printAge(person) {
  let age: number | string;
  if (typeof person.age === 'number' || typeof person.age === 'string') {
    age = person.age.toString();
  }
  console.log(`${person.name}의 나이는 ${age}살 입니다.`);
}

const kimcoding = {
  name: '김코딩',
  age: 30,
};

const parhacker = {
  name: '박해커',
  age: '서른',
};

printAge(kimcoding);
printAge(parhacker);

출력

 

인터섹션 타입

/* 코드를 작성한 뒤 터미널에 순서대로
1. tsc src/index.ts
2. node src/index.js 
라고 치면 결과를 확인해볼 수 있습니다. */

function sendEmail(user) {
  console.log(`안녕하세요, ${user.name}!`);
  if (user.isAdmin) {
    console.log(
      `
      권한이 admin이시군요.
      이메일은 ${user.email} 입니다.
      `
    );
  } else {
    console.log(
      `
      권한이 user이시군요.
      이메일은 ${user.email} 입니다.
      `
    );
  }
}

const kimcoding = {
  name: '김코딩',
  email: 'kimcoding@codestates.com',
  isAdmin: false,
};

const parkhacker = {
  name: '박해커',
  email: 'parkhacker@codestates.com',
  isAdmin: true,
};

sendEmail(kimcoding);
sendEmail(parkhacker);

---

/* 코드를 작성한 뒤 터미널에 순서대로
1. tsc src/index.ts
2. node src/index.js 
라고 치면 결과를 확인해볼 수 있습니다. */

interface EmailUser {
  name: string;
  email: string;
}

interface AdminUser {
  name: string;
  isAdmin: boolean;
}

function sendEmail(user: EmailUser & AdminUser) {
  console.log(`안녕하세요, ${user.name}!`);
  if (user.isAdmin) {
    console.log(
      `
      권한이 admin이시군요.
      이메일은 ${user.email} 입니다.
      `
    );
  } else {
    console.log(
      `
      권한이 user이시군요.
      이메일은 ${user.email} 입니다.
      `
    );
  }
}

const kimcoding = {
  name: '김코딩',
  email: 'kimcoding@codestates.com',
  isAdmin: false,
};

const parkhacker = {
  name: '박해커',
  email: 'parkhacker@codestates.com',
  isAdmin: true,
};

sendEmail(kimcoding);
sendEmail(parkhacker);

출력

 

 

 

 

💁‍♀️ 유니온과 인터섹션 타입에 대한 설명으로 옳지 않은 것을 고르세요.

 

 

A. 유니온 타입을 사용하면 타입을 추론할 수 있기 때문에 타입에 관련된 API를 자동완성으로 쉽게 얻을 수 있습니다.
B. 유니온 타입이나 인터섹션 타입 모두 타입 가드가 필요하지 않습니다.
C. 유니온 타입은 인자를 보낼 때 프로퍼티 중 어떤 것을 보낼 지 선택할 수 있지만, 인터섹션 타입은 인자를 보낼 때 프로퍼티를 전부 보내줘야 합니다.
D. any를 사용해 매개변수를 정의하는 것은 JavaScript를 사용해 작성하는 것과 별 차이가 없기 때문에 유니온 타입을 사용해 작성하는 것이 좋습니다.

 

🔈 해설

정답 B

B : 유니온 타입은 유니온 타입으로 정의한 둘 이상의 타입 내의 공통 프로퍼티에만 접근할 수 있어 타입 가드가 따로 필요합니다. 그러나 인터섹션 타입은 둘 이상의 타입을 결합해 새로운 타입을 만들어 내는 방법이므로 타입 가드가 필요하지 않습니다.

 

---