Javascript의 확장된 개념으로 기존 Javascript에 type을 부여한 코드이다.
타입을 부여함으로써 얻을 수 있는 이점
사전에 에러를 방지할 수 있다.
TypeScript의 핵심 기능으로 식별자에 명확한 타입을 부여함으로써 엉뚱한 데이터 타입이 들어가 예상치 못한 결과가 발생하는 것을 막을 수 있다.
기본 타입 외에 더 세세한 타입 별칭을 붙히거나 여러 TypeScript 만의 기능을 사용하여 더 견고한 코드를 작성할 수 있다.
코드의 자동 완성을 통한 생산성 증가
명확한 타이핑을 함으로써 해당 데이터 타입에 존재하는 메서드나 속성을 자동완성으로 사용할 수 있게된다.
javascript에서는 a = 5
, a.toString()
을 사용하는 경우 toString
은 자동완성이 되지 않는다. (a의 타입이 확실하지 않으므로)
하지만 typescript에서는 a : number = 5
로 a에 number라는 타이핑을 하면 Number
의 메서드인 toString
이 자동완성 목록에 나온다.
TypeScript 프로젝트를 진행하기 위해 우선 설치해야하는 패키지들이 있다.
// npm을 통한 package.json 파일 생성
npm init - y
// yarn이 설치되지 않았다면 우선 yarn 설치가 필요
npm install -g yarn
// yarn을 통한 package.json 파일 생성
yarn init -y
// npm 사용 (프로젝트 내에 설치, 글로벌은 -g 옵션 추가)
npm i typescript
// yarn 사용 (프로젝트 내에 설치, 글로벌은 global 옵션 추가)
yarn add typescript
2까지의 과정을 통해 이제
tsc
명령어를 사용할 수 있게 된다.
tsc
란typescript compiler
로 typescript를 javascript로 변환할때 사용하는 명령어다.
tsc app.ts
를 실행하면app.js
로 컴파일됨
// npx 사용 (npx는 패키지 실행기로 tsc --init을 실행하여 tsconfig.json파일을 생성한다.)
// 글로벌이 아니라 프로젝트 내에서만 typescript를 설치하였기 때문에 npx를 사용해야한다.
npx tsc --init
// yarn 사용
yarn tsc --init
모든 과정이 성공했다면 무사히 typescript 프로젝트가 생성된 것이다.
tsconfig.json에는 typescript에서 javascript로 변환될때 설정이 담겨있다.
기본설정은 javascript를 그대로 typescript로 옮겨도 작동될만큼 유연하게 설정되어있는데, 이러면 의미가 없다.
대표적인 설정들을 몇가지 살펴보고 바꿔보겠다.
- strict : typescript의 엄격한 문법을 따를지 설정한다.
true로 설정 권장
- noImplicitAny : Any 타입을 사용하지 않도록 설정한다.
true로 설정 권장
- noImplicitThis : This 타입을 사용하지 않도록 설정한다.
true로 설정 권장
- allowJs : TS코드를 컴파일 할때 JS코드도 포함할지 설정한다.
기존의 js코드를 리팩토링하는 과정이라면 true 권장
- alwaysStrict : use strict 모드를 켤지 설정한다.
true로 설정 권장
이외에도 많은 설정이 있는데 그때그때 추가해주면 된다.