TypeScript

타입 스크립트 개발 환경 구축하기

자두두두 2023. 7. 26. 23:49

1. nvm으로 Node.js 설치 : 버전을 바꿔가며 쓰고 싶을 때.

나는 버전을 바꿔가며 쓸 정도의 고수는 아니기에 .. 이미 node.js가 깔려있어서 일단 패스 !

2. typescript 글로벌하게 설치하기

nvm install typescript -g

3. typescript가 제대로 설치 되었는지 확인

tsc

컴파일러 : 프로그래밍 언어로 작성한 코드를 다른 프로그래밍 언어로 변환

 

tsc : 타입스크립트 컴파일러

특정 프로그래밍 언어가 정적 언어로서의 정체성을 유지할 수 있게 하는 도구 ! 

  • 타입 검사를 해줌 : 소스코드의 정적 타입 검사
  • 에러메시지 해석할 때 도움
  • 코드 변환 : ts -> js 코드 변환
  • 최적화 : 전반적인 어플리케이션 실행시간이 더 빨라짐

* js는 동적언어(인터프리터 언어) 따라서 엔진이 코드를 한 줄씩 실행하면서 동적으로 해석한다. ( 기계어로 변환될 필요가 없다.)

 

-tsconfig.json

: ts 프로젝트의 설정 파일. tsc에서 생성한다.

 

📍

compilerOptions-strict : true //엄격한 타입 검사 옵션 활성화
compilerOptions-sourceMap : true //개발환경에서 true로 설정

이런 오류가 떴는데 내가 손대기는 무서워서 강의를 봤더니 튜터님도 같더라. 실행에는 문제 없는듯! 

번외로,

compilerOptions - module : 모듈을 가져오고 내보내는 방식 결정

compilerOptions-outDir : 컴파일 된 JS 파일이 저장될 출력 디렉토리 지정

 

.d.ts

  • JS 라이브러리도 TS 코드에서 사용할 수 있게 한다.
  • @types 라이브러리를 통해 외부 라이브러리에 대한 타입 정보 제공
  • ts타입 정의 파일
  • 외부 라이브러리의 함수 타입 정보
  • 외부 라이브러리의 클래스 타입 정보
  • 외부 라이브러리의 객체 타입 정보
  • 외부 라이브러리의 타입추론

js라이브러리를 ts에서 쓰려면 해당 라이브러리에 대한 .d.ts 파일만 제공해주면 된다.

➡️ts에서도 js를 한 줄도 수정하지 않고 쓸 수 있다.