bravo my life!

[TIL ]TypeScript 프로젝트 생성하기. feat.VSCODE 본문

Study/TypeScript

[TIL ]TypeScript 프로젝트 생성하기. feat.VSCODE

losajjang 2022. 6. 17. 08:48
728x90

1. 프로젝트 디렉토리 생성.

2. VSCODE에서 생성한 디렉토리 열 것.

3. 터미널을 켠다.

4. npm init -y를 입력하고 package.json 파일을 생성한다.

5. 생성한 package.json을 다음과 같이 편집한다.

6. npm i -D typescrip를 입력하고 typescript를 설치한다. -D를 입력했기 때문에 devDependency에 설치된다.

7. 루트폴더에 tsconfig.json이라는 파일을 생성하고 다음과 같은 내용을 입력한다.

8. package.json으로 돌아와서 아래의 내용을 추가한다.

9. 루트폴더에 src폴더를 만들고 src 폴더안에 index.ts파일을 만든다. index.ts 내용은 간단하게 테스트용으로 다음과 같이 작성한다.

10. 터미널에 npm run build을 입력하면 루트폴더에 build폴더가 생기고 build폴더안에 컴파일된 index.js파일이 생성된다.

변환된 js파일은 호환성을 위해 낮은 버전의 js파일로 컴파일된다.

 

11. 만약 컴파일되는 js의 버전을 바꾸고 싶다면, 다음과 같이 tsconfig.json을 편집한다.

ES6가 아닌 다른 버전도 가능하므로 필요한 버전에 맞게 설정한다.

 

12. tsconfig.json에서 lib를 추가한다면 작성한 코드가 실행될 환경을 설정할 수가 있다.

ES6는 말그대로 ES6환경에서 작동한다는 것이고, DOM은 브라우저에서 실행된다는 의미이다.

 

13. tsconfig.json의 compilerOption부분에 "strict": true를 추가하면 타입스크립트가 더욱 엄격한 검사를 하게 된다.

주고 자바스크립트 관련 라이브러리나 다른데서 만든 자바스크립트 파일을 가져왔을 때 사용한다. 자바스크립트