통합 개발 환경에서 코드를 작성하면 어떻게 바로 타입 검사를 하여 나에게 오류를 보여줄 수 있는가?
TypeScript에는 타입 검사를 위해 TypeScript Language Service(TLS)라고 하는 서버가 내장되어 있습니다. TypeScript 컴파일러는 이 TLS를 사용하여 타입 검사와 관련된 작업을 수행합니다.
TLS는 개발 환경에서 코드 편집기와 상호작용하며 코드의 타입 정보를 제공하고 오류를 식별합니다.
일반적으로 통합 개발 환경(IDE)나 편집기 확장 프로그램 등과 연동하여 사용됩니다.
TLS는 코드 편집기에 코드를 입력할 때마다 실시간으로 타입 검사를 수행합니다. 이를 통해 코드 편집기는 개발자에게 타입 오류를 표시하고, 자동 완성 기능을 제공하며, 타입 정보를 제공하여 코드 작성을 보조합니다. 이러한 타입 검사는 컴파일 단계 이전에 개발자가 코드를 작성하는 동안에도 지속적으로 수행됩니다.
TLS는 tsconfig.json 파일을 읽고, 프로젝트 설정에 따라 타입 검사를 수행합니다.
따라서 tsconfig.json 파일에 지정된 컴파일 옵션과 프로젝트 구성이 TLS에 전달되어 타임 검사 동작이 정의됩니다.
요약하면 TypeScript Language Service(TLS)는 코드 편집기와 상호작용하여 실시간으로 타입 검사를 수행하며 개발 환경에서 코드 작성 시 타입 관련 오류를 식별하고 보조 기능을 제공합니다. 이는 TypeScript의 주요 기능 중 하나로, 개발자들이 안정적이고 타입이 안전한 코드를 작성할 수 있도록 도와줍니다.
참고 => esbuild : 트랜스파일러 및 번들러 입니다.
참고 => vite 빌트 툴은 내부적으로 esbuild의 트랜스파일러를 사용합니다.
사전 번들링은 esbuild 를 사용합니다.
프로덕션 번들링은 Rollup 사용
(처음 vite를 실행할 때, Vite는 로컬에 사이트를 불러오기 전에 프로젝트의 디펜던시를 사전 번들링합니다.)
자세한 빌드 툴 비교는 아래 링크 참고
- 트랜스파일러
tsc
tsc 명령어는 컴파일 과정에서 타입체크를 기본적으로 진행합니다.
tsc 명령어로 트랜스파일링을 진행할때 직접 tsconfig 파일을 지정하지 않으면
프로젝트 디렉토리를 순회하면서 tsconfig.json 파일을 찾고 컴 파일 옵션에 따라 트랜스파일을 진행합니다.
( 직접 지정할 수 있다는 것은 tsconfig 파일이 경우에 따라 여러개 일 수 있다는 뜻 )
( tsc와 함께 옵션을 직접 지정할 수 있는데, 이때 직접 커맨드에 지정한 옵션이 우선시 됨)
(* tsc index.ts 처럼 파일을 직접 지정할 경우, tsconfig.json의 옵션은 무시되고 기본 옵션으로 적용됨)
'declaration' 옵션을 활성화 시키면,
컴파일된 파일들이 다른 타입스크립트 프로젝트에서도 타입추론이 가능하도록 해주는 d.ts 파일을 제공할 수 있는데, 이는 tsc 명령어로 트랜스파일링할 경우에만 가능합니다.
babel
babel로 트랜스파일할 경우 babel은 tsconfig.json의 옵션을 확인하지 않고 대신 babel-prest-typescipt의 기본 옵션을 사용합니다.
(babel로 빌드할 때 tsconfig.json에 컴파일 옵션을 아무리 적어도 의미가 없음)
tsc의 트랜스파일과정과는 다르기때문에, 타입체크를 진행하지도 않고(No Type Check), declaration 옵션으로 d.ts 파일을 생성할 수 없습니다.
단이 점 덕분에, tsc의 트랜스파일링보다는 훨씬 빠르게 작동합니다.
esbuild
esbuild는 다른 컴파일러보다 go 언어, 병렬처리, 타입체크X 등의 이유로 더 빨리 동작하는데, esbuild는 babel과 다르게 tsc 명령어와 관련이 없지만 tsconfig의 옵션을 참고합니다. tsconfig를 기반으로 트랜스파일을 진행하는 것은 아니고, jsxFactory, jsxFragmentFactory, useDefundeForClassFields, importsNotUsedAsValues 의 옵션만 부분적으로 확인하고 적용합니다.
다른 컴파일 옵션은 esbuild의 옵션을 따르기 때문에 declatation 옵션을 사용할 수 없고, esbuild의 경우도 d.ts 파일을 생성할 수 없습니다.
(babel, esbuild 로 컴파일 하며, d.ts 를 제공하고싶은 경우 tsc --emitDeclarationOnly 같은 커맨드를 포함시켜야함)
🎯 emitDeclarationOnly : tsconfig.json, typescript 컴파일러의 옵션 중 하나로, 이 옵션을 사용하면 typescript 소스 코드의 컴파일 시 javascript 코드를 생성하지 않고, 대신 .d.ts(typescript 선언 파일)만 생성합니다.
이 옵션을 사용하면 타입 체크와 선안 파일 생성만 수행되며 실제 코드의 컴파일(트랜스파일러 포함)은 수행 되지 않습니다.
이 옵션은 주로 라이브러리나 프레임워크를 개발할 때 유용하며, 라이브러리의 API를 정의하는 TypeScript 선언 파일을 생성할 때 사용됩니다. 이렇게 생성된 .d.ts 파일은 사용자에게 해당 라이브러리의 타입 정보를 제공하고, 다른 TypeScript 프로젝트에서 해당 라이브러리를 사용할 때 타입 체크를 도와줍니다.
Bundling & Transpiler : https://tech.weperson.com/wedev/frontend/bundling-transpiler/#parcel
빌드 도구(툴) 비교 : https://ui.toast.com/posts/ko_20220127
Bun vs Node : https://ykss.netlify.app/translation/bun_vs_node_js_everything_you_need_to_know/
