[TS] 타입스크립트의 시작

본 포스트는 인프런의 타입스크립트 입문-기초부터 실전까지 강의(링크)를 듣고 정리한 내용입니다.

type의 정의

JS Doc으로 속성 정의

// user data
var user = {};

/**
 * @typeof {object} Address
 * @property {string} street
 * @property {string} city
 */

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

/**
 * @returns {Promise<User>}
 */

• 위처럼 user에 대해서 type과 property를 정의한다면, user. 뒤에 자동완성으로 속성의 type 확인 가능
• fetchUser 함수의 반환값이 Promise<User>

TS를 통한 type 지정

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

sum(10, "20"); // 1020

• 문자열과 숫자를 더하면 암묵적 형변환에 의해 문자열로 모두 처리해 연결

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

• 위처럼 인자와 반환값에 type을 명시하며 함수 선언
• 반환값의 type을 명시하지 않는다면 타입스크립트의 추론에 의해 type까지 유추

TS에서는 해당 type이 제공하는 api나 메서드 등을 바로 활용 가능

• TS에서 변수의 type이 명시되면 api나 메서드를 바로 사용 가능
• VSC의 Intellisense(자동완성) 사용 가능

JS Doc으로 인자의 type 정의

JS로 TS를 따라잡아보자

// @ts-check

/**
 * @param {number} a 첫번째 숫자
 * @param {number} b 두번째 숫자
 */

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

• 인자의 type과 용도를 지정
• 반환값의 type 유추 제공

• // @ts-check: 잘못된 type의 인자를 넣은 경우 오류 발생

본격적인 TS의 시작

TS 프로젝트 시작하는 법

• TS는 JS로 바꿔주어야 한다.
• 이를 compile이라고 한다.

Step 1. npm TS 설치

• project 폴더 경로로 terminal 실행
• 아래 명령어로 TS 설치

$ npm i typescript -g

Step 2. tsc 명령어로 compile

$ tsc [filename.ts]

• compile하고자 하는 파일명 앞에 tsc(ts change) 명령어를 붙인다.
• filename.js 파일이 ts 파일 위치에 생성

TS 설정 파일

TS compile에 대해 더욱 정교한 옵션을 설정해보자

• 프로젝트 폴더 내에 tsconfig.json 이라는 이름의 json 파일을 생성한다.
• 아래 내용을 넣는다.

{
  "compilerOptions": {
    "allowJs": true, // 이 프로젝트 JS를 허락한다는 의미
    "checkJs": true, // @ts-check와 같은 역할
    "noImplicitAny": true // 모든 타입에 대해서 못해도 Any의 type 지정
  }
}

• TS에서 타입 명시가 없으면 암묵적으로 any 타입 지정
• noImplicitAny는 암묵적 타입 지정 없이 모두 type 지정이 필요
• tsconfig reference 참고