TypeScript

• About TypeScript

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

목차

첫 번째 장점 - 코드의 가이드 및 자동완성

• 코드

객체 속성에 접근할 때 오탈자 없이 쉽게 접근할 수 있게 도와준다.

예시

address.innerText = user[0].address; // [Object Object...]

아래와 같은 user 객체를 받는다고 가정해보자. user 객체를 참조할경우 내부에는 도 다른 객체가 있기에 object가 표시된다. 이때 만약 객체 내부의 속성값을 참조하려고 할 때 오타를 작성할 경우 에러가 발생한다. 하지만 TypeScrip를 사용하면 코드 가이드 및 자동 완성 기능을 제공한다. 이 기능을 사용함으로써 개발 생산성을 향상시킬 수 있다

• 전체코드

@returns {Promise<User>}

현재 이해한 바에 따르면 첫번째 Promise로 반환된 값은 User에 담기게된다.

 * @typedef {object} User
 * @property {string} name
 * @property {string} email
 * @property {Address} address

User라는 식별자를 통해서 typedef를 통해서 object의 값을 받아오고 안에있는 속성값들에 데이터 타입을 정한다. 이로써 자동완성 기능이 완성된다. 만약 2개를 선언한다면 어떻게될까? 불러온 2개의 Promise에 대한 자동완성 기능이 생성된다. 한 모듈에서 2개의 Promise를 패칭하는것은 헷갈림을 유발한다.

두 번째 장점 - 에러의 사전 방지

// 자바스크립트

function sum(a, b) {
  return a + b;
}

console.log(sum(10, "20")); // "1020"

// 타입스크립트
function sum(a: number, b: number): number {
  return a + b;
}

sum(10, 20);

// 전달 받을 매개변수의 Type을 정할 수 있다
// 해당 함수가 출력해낼 값의 Type값도 정할 수 있다.

function add(a: number, b: number): number {
  return a + b;
}

add(10, "20");