NextJS, Create React App(CRA)를 사용하지 않고 초기 프로젝트에 TypeScript를 설치하고 설정하는 방법에 대해 알아보겠습니다.
프로젝트 시작
프로젝트 디렉터리를 생성합니다.
1 | $ mkdir typescripttest |
다음 명령어를 실행하여 package.json
을 초기화합니다.
1 | $ npm init -y |
TypeScript 설치
다음 명령어를 실행하여 TypeScript 설치합니다.
1 | $ npm i -D typescript |
tsconfig.json 설정
TypeScript 설정은 tsconfig.json 파일에서 합니다. 디렉터리에 tsconfig.json 파일이 있으면 해당 디렉터리가 TypeScript 프로젝트의 루트임을 나타냅니다. tsconfig.json 파일은 프로젝트를 컴파일하는 데 필요한 루트 파일과 컴파일러 옵션을 지정합니다.
tsconfig.json
파일을 생성합니다. 다음과 같이 기본적인 설정을 작성합니다.
1 | // tsconfig.json |
다음 명령어로도 기본적인 tsconfig.json
파일 생성이 가능합니다.
1 | $ npm i -g typescript |
Target (기본값: ES3)
최신 브라우저는 모든 ES6 기능을 지원하므로 ES6는 좋은 선택입니다. 코드가 이전 환경에 배포된 경우 더 낮은 target을 설정하거나 최신 환경에서 코드 실행이 보장되는 경우 더 높은 target을 설정하도록 선택할 수 있습니다.
1 | // tsconfig.json |
Lib(라이브러리)
타입스크립트에게 어떤 API를 사용하고 어떤 환경에서 코드를 실행하는 지를 지정할 수 있습니다. (target 런타임 환경이 무엇인지를 지정합니다.)
프로그램이 브라우저에서 실행되면 lib에 “DOM” 유형 정의를 할 수 있습니다.
- DOM: window, document 등
1 | // ex) |
strict
모든 엄격한 타입 검사 옵션을 활성화합니다. strict
플래그는 프로그램 정확성을 더 강력하게 보장하는 광범위한 타입 검사 동작을 가능하게 합니다.
tsconfig.json 에서 "strict": true
를 통해 strict mode로 해주면, Declaration Files 가 없는 경우에 대해서도 에러를 띄워줍니다.
1 | { |