[인프런 타입스크립트 입문 - 기초부터 실전까지] - 시작하기

이 글은 타입스크립트 입문 - 기초부터 실전까지의 타입스크립트 시작하기 부분을 보고 정리한 글입니다.

라이브러리 설치와 TSC

index.ts 생성

다음과 같은 코드 작성

const sum = (a: number, b: number): number => {
  return a + b;
};

sum(10, 20);

그러나 이 파일을 바로 브라우저가 인식을하지 못하기 때문에 ts파일을 js파일로 컴파일하는 과정이 필요함

터미널을 열고 node가 설치되어 있는 상태에서 타입스크립트를 글로벌 환경으로 설치해줌

npm i typescript -g

위 명령어로 설치 후, tsc명령어로 ts파일을 컴파일 할 수 있음

tsc index.ts

index.js

var sum = function (a, b) {
    return a + b;
};
sum(10, 20);

타입스크립트 설정파일

tsc와 같은 명령어로 컴파일을 할 시, 부가적인 옵션을 넣기 위해 tsconfig.json 을 사용할 수 있음

{
  "compilerOptions": {
    "allowJs": true, // 이 프로젝트 안의 js를 허용
    "checkJs": true, // ts-check와 같은 역할(js에서 타입체크)
    "noImplicitAny": true // 모든 타입에 대해서 적어도 any라는 타입을 적어야함
  }
}

참고: https://www.typescriptlang.org/tsconfig

타입스크립트 플레이그라운드

TS 플레이그라운드

타입스크립트 코드 작성 시 변환된 코드를 확인할 수 있는 곳 (TS => JS)
tsconfig로 target 옵션을 이용하여 자신이 원하는 JS 버전으로 맞출 수 있음

바벨 사이트

바벨 또한 자신의 코드가 변환된 결과를 확인할 수 있는 사이트가 존재함 (JS 최신문법 => JS 낮은 버전의 문법으로 변환(모든 브라우저에서도 동일하게 코드가 작동되도록))