Typescript 2. Operator

Winney·2021년 2월 28일
0

Typescript

목록 보기
2/2

5. type이 두 가지 이상일 때는 어떻게 type 지정을 할까?

유니온 타입(Union Type)

: 복수의 타입을 쓸 수 있게 한다. JS의 OR 연산자의 역할과 같다. (||)

let address: string | number;
function writeTitle(title : string | number) {
  console.log(title);
};

writeTitle('Winney Log');
writeTitle(100);

6. 유니온 타입 대신 any를 쓸 수도 있지 않을까?

: 유니온 타입을 사용하면 타입 가드가 되어서 해당 타입을 추론해주고 이해 맞는 API를 자동완성 해주기 때문에 에러발생을 줄일 수 있다!!

function writeTitle(title: string | number) {
  // if문을 통해 타입 가드
  if(typeof title === 'string') {
    title.toUpperCase() // 문자열 API 자동완성
  }
  if(typeof title === 'number') {
    title.toString() // 숫자 API 자동완성
  }
  throw new TypeError('Title must be string or number');
}

7. 유니온 타입이 | 라면 &도 있나?

인터섹션 타입(Intersection Type)

: 여러 타입을 모두 만족하는 하나의 타입. & 사용.

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

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

function askSomeone(someone: Person & Developer) {
  console.log(someone.name); 
  console.log(someone.age);
  console.log(someone.skill);
};

const whoAmI = {
  name: 'winney',
  age: 10,
  skill: 'typescript'
};

askSomeone(whoAmI); // 정상
askSomeone({name:'winney', age:10, skill:'typescript'}); // 정상

8. 유니온 타입과 인터섹션 타입을 쓸 때 꼭 알아야 하는 건 뭐가 있을까?

: 각각의 타입을 typescript가 어떻게 추론하는지 알아야한다!!

유니온 타입과 인터섹션 타입의 차이

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

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

function askSomeone1(someone: Person | Developer) {
  console.log(someone.name); 
  console.log(someone.age);  // 에러
  console.log(someone.skill); // 에러
};

function askSomeone2(someone: Person & Developer) {
  console.log(someone.name); 
  console.log(someone.age);
  console.log(someone.skill);
};

❗ 에러가 난다는 것 === typescript가 API 자동완성을 안 해준다는 것
=> typescript가 타입 추론을 못 한다.

askSomeone1askSomeone2의 차이에서 알 수 있는 것

  • 유니온 타입은 공통된 property에 대해서만 type 보장을 한다.
    => PersonDeveloper의 공통 property는 name이기 때문에 ageskill은 에러
  • 인터섹션 타입은 모든 property를 보장한다.

9. 유니온 타입에서 공통된 속성 외에 사용하고 싶은 속성은 어떻게 적용할까?

: 타입 가드 사용!!

// 타입 가드
function isDeveloper(someone: Person | Developer): someone is Developer{
  return (someone as Developer).skill !== undefined;
}

function askSomeone(someone: Person | Developer) {
  console.log(someone.name);
  if(isDeveloper(someone)) {
    console.log(someone.skill); // 타입이 Deeveloper이면 skill 사용가능
  } else {
    console.log(someone.age) // 타입이 Person이면 age 사용가능
  }
};

askSomeone({name:'winney', age: 10});
askSomeone({name:'winney', skill:'typescript'})

타입 가드를 사용해서 askSomeone 실행 시 에러없이 사용가능하다.
askSomeone실행 시 각 타입에 맞는 값들을 넣으면 알아서 타입에 맞게 실행된다.

더해서

askSomeone({name:'winney', age:10, skill:'typescript'});

당연하지만 의 예시를 실행 할 시 nameskill만 console에 출력된다.

profile
프론트엔드 엔지니어

0개의 댓글