[TS] Typescript 설정 파일, tsconfig에 대하여

create-react-app 없이 React 설정 중에 만들게 된 tsconfig.json 파일.

이것은 무엇이며, 왜 필요한 걸까?

tsconfig.json 파일에 대한 얘기를 하기 전에 Javascript와 Typescript에 대해서 간단히 짚고 넘어가야 보자.

BACKGROUND..

Javascript는 어떤 타입을 반환하는 지에 대해 명시되지 않는 동적 타입의 인터프리터 언어이다. 런타임에서 오류를 발견할 수 있다.

반면, Typescript는 Javascript의 확장형으로 어떤 타입을 반환하는 지에 대해 명시된 정적 타입의 컴파일 언어이다. 컴파일 단계에서 오류를 발견할 수 있다.

Typescript를 사용하면 타입을 명시하는 만큼 손이 더 많이 가겠지만, 타입을 명시하였기 때문에 Javascript에서 발생하는 타입 오류에 대해서 사전에 줄여준다. 또한 VSCode는 TypeScript 지원이 탁월하다 (둘 다 같은 회사가 제공 및 개발함, 마이크로소프트) : IntelliSense, debugging, Git 등

 

typescript를 사용하는 게 훨씬 좋다는 결론이 나오는데

typescript를 사용하려면 tsconfig.json파일을 만들어주어야 한다.

 

WHAT? tsconfig.json는 무엇일까?

tsconfg.json은 typescript 컴파일러의 설정 파일이다.

typescript가 javascript로 컴파일 되는 과정에서 사용자가 필요한 여러 옵션을 설정할 수 있다.

tsc 명령어로 typescript를 javascript로 변환시킬 수 있다.

아래와 같이 입력하면 app.ts 파일이 app.js로 변환된다.

> tsc app.ts

 

WHY?  tsconfig.json 사용하는 이유 2가지

1.  tsc가 typescript를 컴파일하는 방법을 제어하기 위하여

사실, tsconfig.json 없이도 tsc는 그냥 사용할 수 있다.

다만 tsc 명령어를 사용할 때 매번 옵션을 같이 쳐주기 귀찮으므로, tsconfig.json를 설정해두면 tsc가 컴파일할 때 tsconfig.json를 참고하여 명령어에 주는 옵션을 자동으로 설정해주어 프로젝트에서 일정한 설정을 유지시킬 수 있다.

2.  vscode의 intellisense가 typescript 처리하는 방법을 제어하기 위하여

vscode의 intellisense는 vscode가 사용자가 코드를 빠르고 올바르게 쓸 수 있도록 완성될 코드의 정보를 보여주는 기능이다. (아래 그림 참고)

tsconfig.json를 설정해두면 vscode의 intellisense가 tsconfig.json에 설정된 옵션들을 참고하여, 정보를 보여줄 것이다.

 

> 설정한 tsconfig 소스 보려면 아래 링크 참고

[Web/react] - [React] CRA 없이 React 개발 환경 구축하기(2) - tsconfig, webpack, plugin 설정

[React] CRA 없이 React 개발 환경 구축하기(2) - tsconfig, webpack, plugin 설정

 

> tsconfig 파일 설정 옵션 참고하려면 아래 링크 참고

https://joshua1988.github.io/ts/config/tsconfig.html#%ED%83%80%EC%9E%85%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%84%A4%EC%A0%95-%ED%8C%8C%EC%9D%BC-tsconfig-json

 

 

 

참고 : https://www.typescriptlang.org/ko/docs/handbook/babel-with-typescript.html

참고 : https://iamturns.com/typescript-babel/

참고: https://code.visualstudio.com/docs/languages/typescript

참고: https://poiemaweb.com/typescript-vscode

참고: https://velog.io/@sooran/tsconfig.json-%EC%A0%9C%EB%8C%80%EB%A1%9C-%EC%95%8C%EA%B3%A0-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0