TypeScript (기본 세팅)

신윤철·2022년 7월 20일
0

TS

목록 보기
1/2
post-thumbnail

TypeScript란

Javascript의 확장된 개념으로 기존 Javascript에 type을 부여한 코드이다.

타입을 부여함으로써 얻을 수 있는 이점

  1. 사전에 에러를 방지할 수 있다.

    • TypeScript의 핵심 기능으로 식별자에 명확한 타입을 부여함으로써 엉뚱한 데이터 타입이 들어가 예상치 못한 결과가 발생하는 것을 막을 수 있다.

    • 기본 타입 외에 더 세세한 타입 별칭을 붙히거나 여러 TypeScript 만의 기능을 사용하여 더 견고한 코드를 작성할 수 있다.

  2. 코드의 자동 완성을 통한 생산성 증가

    • 명확한 타이핑을 함으로써 해당 데이터 타입에 존재하는 메서드나 속성을 자동완성으로 사용할 수 있게된다.

      • javascript에서는 a = 5, a.toString()을 사용하는 경우 toString은 자동완성이 되지 않는다. (a의 타입이 확실하지 않으므로)

      • 하지만 typescript에서는 a : number = 5로 a에 number라는 타이핑을 하면 Number의 메서드인 toString이 자동완성 목록에 나온다.

출처 : TypeScript 핸드북

TypeScript 프로젝트 환경 설정

TypeScript 프로젝트를 진행하기 위해 우선 설치해야하는 패키지들이 있다.

  1. package.json 파일 생성 - node.js의 여러 라이브러리를 사용할 수 있는 환경이 된다.
// npm을 통한 package.json 파일 생성
npm init - y


// yarn이 설치되지 않았다면 우선 yarn 설치가 필요
npm install -g yarn

// yarn을 통한 package.json 파일 생성
yarn init -y
  1. 패키지 매니저를 통해 TypeScript 설치
// npm 사용 (프로젝트 내에 설치, 글로벌은 -g 옵션 추가)
npm i typescript

// yarn 사용 (프로젝트 내에 설치, 글로벌은 global 옵션 추가)
yarn add typescript

2까지의 과정을 통해 이제 tsc 명령어를 사용할 수 있게 된다.

tsctypescript compiler로 typescript를 javascript로 변환할때 사용하는 명령어다.

tsc app.ts를 실행하면 app.js로 컴파일됨

  1. tsconfig.json 파일 생성
// npx 사용 (npx는 패키지 실행기로 tsc --init을 실행하여 tsconfig.json파일을 생성한다.)
// 글로벌이 아니라 프로젝트 내에서만 typescript를 설치하였기 때문에 npx를 사용해야한다. 
npx tsc --init

// yarn 사용
yarn tsc --init

모든 과정이 성공했다면 무사히 typescript 프로젝트가 생성된 것이다.

tsconfig.json

tsconfig.json에는 typescript에서 javascript로 변환될때 설정이 담겨있다.

기본설정은 javascript를 그대로 typescript로 옮겨도 작동될만큼 유연하게 설정되어있는데, 이러면 의미가 없다.

대표적인 설정들을 몇가지 살펴보고 바꿔보겠다.

  1. strict : typescript의 엄격한 문법을 따를지 설정한다. true로 설정 권장
  2. noImplicitAny : Any 타입을 사용하지 않도록 설정한다. true로 설정 권장
  3. noImplicitThis : This 타입을 사용하지 않도록 설정한다. true로 설정 권장
  4. allowJs : TS코드를 컴파일 할때 JS코드도 포함할지 설정한다.
    기존의 js코드를 리팩토링하는 과정이라면 true 권장
  5. alwaysStrict : use strict 모드를 켤지 설정한다. true로 설정 권장

이외에도 많은 설정이 있는데 그때그때 추가해주면 된다.

profile
기본을 탄탄하게🌳

0개의 댓글