TypeScript

• About TypeScript

1. 왜 타입스크랩트를 써야하나.
2. TypeScipt 기초
3. 함수 타입을 정의하자
4. interface를 활용하자
5. 타입 별칭이란?
6. 연산자를 이용한 타입 정의 - 유니온 타입
7. enum
8. class
9. generic
10. promise Types
11. todolist 만들어보기
12. 디버깅

목차

UnionType

• badCase

function logMessage(value: string) {
   console.log(value);
 }

logMessage("hello");
logMessage(100);  // 에러 발생

function logMessage(value: string | number) {
  console.log(value);
}

logMessage("hello");
logMessage(100);

• 하나의 인수에 여러가지 타입을 받을 수 있게 하는것

UnionType을 사용하면 무엇이 좋은가?

string일 경우

number일 경우

• 자바스크립트 같은 경우에는 동적 타이핑 언어이기 떄문에 코드가 읽히는 시점에 값의 타입을 정해줄 수 없다. 하지만 타입스크립트 같은 경우에는 정적 타이핑 언어이기 때문에 타입을 미리 명시할 수 있다.

조금 헷갈리지만 재미있는 점은 if문을 두었을 때 해당 연산에 일치하는 type의 값을 기준으로 매개변수를 판별한다는것이다.

<aside> 💡 해당 타입에 맞는 API를 바로 활용할 수 있다고 표현한다

</aside>

타입 가드

function logMessage(value: string | number) {
  if (typeof value === "number") {
    value.valueOf();
  }
  if (typeof value === "string") {
    value.toString();
  }
}

→ 특정 타입으로 타입의 범위를 좁혀나가는(필터링 하는) 과정

에러핸들링 가능

function logMessage(value: string | number) {
  if (typeof value === "number") {
    value.valueOf();
  }
  if (typeof value === "string") {
    value.toString();
  }
  throw new TypeError("value must be string or number");
}

유니온 타입의 특징

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

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

function askSomeone(someone: Develop | Person) {
  // name만 접근 가능
  // someone을 통해서 name, skill, age 모두에 접근이 가능할거라는 생각이 듦 하지만 그렇게 동작하지 않음
  // Develop도 되고 Person도 동일하게 갖고있는 속성이여야한다.
}