Skip to content

Latest commit

 

History

History
66 lines (53 loc) · 2.37 KB

1.md

File metadata and controls

66 lines (53 loc) · 2.37 KB

1. 타입스크립트를 쓰면 좋은 이유

  • 오탈자나 타입 오류가 있을 때, 코드를 작성하는 시점에서는 알 수 없고 브라우저 화면상으로 확인해야만 오류를 발견할 수 있다.

  • 자바스크립트에 타입이 있으면 다음의 장점이 있다.

    1. 에러의 사전 방지
    2. 코드 가이드 및 자동 완성(개발 생산성 향상)

1.1 jsdoc

/**
 *
 * @typedef {object} User
 * @property {string} name
 * @property {string} email
 * @property {string} adress
 *
 */
  • jsdoc으로 타입을 미리 definition하면, 이 값들을 사용하려고 할 때 vscode 상에서 ★이 붙은 자동완성 키워드가 뜬다.
  • 따라서 해당 타입에 대한 API를 미리보기로 확인하고, tab으로 빠르고 정확하게 작성할 수 있다.
  • 또한, 오탈자가 발생하면 빨간줄로 미리 알려주기 때문에 브라우저로 실행해서 결과를 확인하기 전에 실수를 방지할 수 있다.

1.2 자바스크립트를 타입스크립트처럼 코딩하기

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

function sum(a, b) {
  return a + b;
}
  • 이렇게 jsdoc으로 파라미터의 타입을 정의해두면 해당 파라미터를 사용할 때 타입에 대한 프리뷰가 제공되고, 해당 함수의 반환타입까지 제공한다.
  • 심지어 a 파라미터에 대한 설명(첫 번째 숫자)까지 덧붙이면 그 설명까지 프리뷰로 제공된다.
  • 그러나 타입스크립트와 달리, 자바스크립트에서는 정의한 타입에 어긋나게 사용했을 때 빨간줄을 그어서 알림을 주는 기능이 없다.
  • 이러한 기능을 사용하고 싶을 때는 //@ts-check를 사용하면 된다.
    // @ts-check
    sum(10, "20");

1.3 타입스크립트 프로젝트 시작하기

  • ts 파일을 생성하고 사용할 때 이 파일을 브라우저가 인식할 수 있도록 컴파일을 해야 한다.
  • npm i typescript -g 설치
  • tsc 변환할파일.ts
  • tsconfig.json 파일을 생성하여 컴파일 기본 설정을 넣어주자.
{
  "compilerOptions": {
    "allowJs": true,
    "checkJs": true,
    "noImplicitAny": true
  }
}
  • js 파일을 허용하고, //@ts-check가 자동으로 생성되도록 하고, 타입을 any라도 꼭 명시해야한다는 설정