● 5월 30일/ Section 4 / Unit5 - [TypeScript] 기초

● 오늘 공부한 것

• Union Type (유니온 타입)

- 유니온 타입은 합집합을 의미하며, 어떤 타입이든 들어올 수 있음을 이야기합니다. 유니온 타입(Union Type)이란 자바스크립트의 OR 연산자(||)와 같이 A이거나 B이다 라는 의미의 타입입니다.

function something(x: number | string){
 return x
}

위의 예제 코드를 보면, x라는 매개변수에 2가지 타입이 모두 올 수 있습니다. 하지만 유니온 타입을 사용하는 경우에 타입가드가 필요합니다. 예를 들어 여러가지의 모양의 객체가 매개변수가 들어온다고 가정해보겠습니다.

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

interface Person2 {
	name: string;
    live: string;
}

function info(person: Person1 | Person2){
	if('live' in person){
    	console.log(`저는 ${person.live}에 살고 있어요.`)
    }
    else console.log(`저는 ${person.name}입니다.`)
}

이처럼 any를 사용하는 경우 마치 자바스크립트로 작성하는 것처럼 동작을 하고 유니온 타입을 사용하면 타입스크립트의 이점을 살리면서 코딩할 수 있다고 합니다.

 

• Intersection Type (인터섹션 타입)

인터섹션 타입은 반대로 모두 만족하는 하나의 타입을 의미합니다. 

interface Person {
  name: string;
  age: number;
}
interface Developer {
  name: string;
  skill: number;
}
type Capt = Person & Developer;

위 코드는 Person 인터페이스의 타입 정의와 Developer 인터페이스의 타입 정의를 & 연산자를 이용하여 합친 후 Capt 이라는 타입에 할당한 코드입니다. 결과적으로 Capt의 타입은 아래와 같이 정의됩니다.

{
	name: string;
    age: number;
    skill: number;
}

이처럼 & 연산자를 이용해 여러 개의 타입 정의를 하나로 합치는 방식을 인터섹션 타입 정의 방식이라고 합니다.

유니온 타입 같은 경우에는 타입가드가 필요했다면, 인터섹션타입은 타입가드가 필요하지 않습니다.

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

하지만 반대로 유니온 타입이었다면 정상작동하지 않았을 것입니다.

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 타입 오류
}

 

참고했던 자료

연산자를 이용한 타입 정의 | 타입스크립트 핸드북

 

● 공부 이외의 한 것 

• 알고리즘 문제풀기
• 솔로 프로젝트 typescript 로 리팩토링