타압스크립트 공부, 아직 적응 중이라 머리가 받아드리지 않음으로, 복습과 실습이 필요한 시점에
가장 기초적인 TS 셋팅에 대해 기록한다!
참고로 난 MacOS!

TS 셋팅

일단 Node.js 설치가 되어있는 전제하에 다음 개발환경 구축에 대해 남긴다!

타입스크립트 설치

터미널에 npm i typescript -g 명령어를 실행

• 명령어 실행이 끝나면 터미널에 tsc 명령어를 실행해 -> 명령어가 제대로 실행이 되면 TypeScript가 제대로 설치가 된 것!
  

tsc (타입스크립트 컴파일러)

• 주요 명령어
  • tsc —-init
    • tsconfig.json이 생성되는 명령어
  • tsc index.ts
    • index.ts를 컴파일 한다!
  • tsc src/*.ts
    • src 디렉토리 안에 있는 모든 TypeScript 파일을 컴파일
  • tsc index.js --declaration --emitDeclarationOnly
    • @types 패키지를 위한.d.ts 파일 생성을 하는 명령
    • TypeScript로 작성된 모듈이 아니라 JavaScript로 작성된 모듈에 타입 선언을 제공할 때 유용하게 쓰임!

tsconfig.json

tsc --init 명령을 실행하면 생성되는 파일 -> tsconfig.json

• TypeScript 프로젝트의 설정 파일이라고 생각하면 됨!
• 주로 프로젝트의 컴파일 옵션 및 입력 파일들을 정의하는데 사용!

tsconfig.json 주요 옵션

compilerOptions - target 옵션

• TypeScript 프로젝트 내 코드들이 어떤 JavaScript 버전으로 변환을 할 지 정하는 옵션
  es5 로 설정하면 CommonJS 버전으로 컴파일되고
  es2016(=es7) 로 설정하면 ES2016 버전으로 컴파일이 됨!
• TypeScript가 어느 환경에서 실행이 되어야하는지를 고려해야 됨!
  • 만약, 내가 만든 프로젝트가 생각보다 레거시한 환경에서 동작해야 된다면? → es5
  • 그렇지 않다면 → es2016

compilerOptions - module 옵션

• TypeScript 파일을 컴파일한 후 생성되는 JavaScript 모듈의 형식을 지정
• 모듈을 가져오고 내보내는 방식을 결정하는 옵션
• target 옵션과는 서로 독립적인 관계니 프로젝트의 요구사항에 따라 옵션을 설정

compilerOptions - outDir 옵션

• 컴파일된 JavaScript 파일이 저장될 출력 디렉터리를 지정
• 예를 들어, "outDir": "dist"로 설정하면 컴파일된 파일들이 dist 폴더에 저장

compilerOptions - strict

• 엄격한 타입 검사 옵션을 모두 활성화하는 옵션
• TypeScript 컴파일러가 보다 엄격한 타입 검사를 수행해 코드의 실수를 미리 찾아낼 수 있음
• 해당 옵션을 true로 설정하면 아래의 옵션들이 자동으로 true로 설정
  : strictNullChecks
  -> 잠재적으로 null(undefined)이 될 수 있는 값들에 대해서 엄격하게 확인하는 옵션!
  : strictFunctionTypes
  : strictBindCallApply
  : strictPropertyInitialization
  : noImplicitAny
  -> 함수의 인자 또는 변수의 타입이 명시적으로 선언되지 않은 경우에 컴파일러가 자동으로 any타입을 부여하지 않도록 함, 이 옵션을 활성화하면 개발자가 누락된 타입 선언을 확인하고 명시적으로 타입을 선언할 수 있다!
  : noImplicitThis
  ; alwaysStrict

compilerOptions - sourceMap 옵션

• 컴파일된 JavaScript 파일에 대한 소스 맵을 생성하는 옵션
• 소스 맵을 사용하면 실행 중에 에러가 발생했을 때 원래 TypeScript 소스 코드의 위치를 확인할 수 있다.
• 코드 디버깅에 매우 큰 도움이 되기 때문에 개발 환경에서는 꼭 true로 설정하시는 것을 권장하지만 프로덕션 환경에서는 용량이나 성능상의 이유로 sourceMap을 사용하지 않는 것이 나을 수 있다.

include , exclude 옵션

• tsc가 컴파일을 할 때 포함하거나 제외할 파일이나 디렉터리를 지정하는 옵션
• • “include": ["src/*/"]
    • src 디렉토리 밑의 친구들을 컴파일 하겠다는 의미!
• • "exclude": ["node_modules", "dist"]
    • node_modules, dist 디렉토리 밑의 친구들은 컴파일 대상에서 제외하겠다는 의미!

d.ts 파일

• .d.ts 파일은 JavaScript 라이브러리도 TypeScript 코드에서 사용할 수 있게 한다!
• 이미 작성된 다양한 JavaScript 라이브러리와 호환성을 유지할 수 있어야 했다!
• TypeScript는 @types 라이브러리를 통해 외부 라이브러리에 대한 타입 정보를 제공한다!

그래서 d.ts는 뭐야?

.d.ts 파일은 TypeScript 타입 정의 파일이다. 즉, JavaScript 라이브러리에 대한 타입 정보를 제공한다!

• .d.ts 파일로 TypeScript 컴파일러는 다음을 알 수 있다
• • 외부 라이브러리의 함수 타입 정보
  • 외부 라이브러리 클래스 타입 정보
  • 외부 라이브러리 객체 타입 정보
• 뿐만 아니라, .d.ts 파일로 외부 라이브러리의 타입 추론도 할 수 있다.
  -> 타입 추론이란 타입이 명시가 되지 않았을 때 컴파일러가 알아서 해당 타입에 대해 추론을 하는 것

  JavaScript 라이브러리를 TypeScript에서 쓰려면 해당 라이브러리에 대한 .d.ts 파일만 제공을 해주면 된다!
  TypeScript 프로젝트에서도 JavaScript 라이브러리를 한 줄도 수정하지 않고 그대로 쓸 수 있음!