[TIL] TypeScript 파고들기(1):tsconfig.json

TypeScirpt의 탄생 배경

JavaScript는 동적 타입 언어로 개발자가 실수를 저지른 것을 프로그램을 실행할 때 알려준다.

JavaScript의 취약점은 크게 3가지가 있다.

 1. 실행 시간에 결정되는 변수 타입

• JavaScript는 변수의 타입이 실행 시간에 결정되기 때문에
  개발자의 실수로 인한 오류가 발생하기 쉽고 찾기도 까다로움.
• 변수에 잘못된 타입의 값이 할당되어 발생한 오류를 찾기 위해서는 실행 시켜서 변수의 값과 타입을 모두 확인해야한다.
• 즉, 에러를 실행하지 않고는 찾기 힘들다

2. 약한 타입 체크

• JavaScript는 let, const와 같이 변수/상수를 구분하는 정도의 키워드만 지원이 되고 타입을 지정하면서 선언하지 않는다.
• 즉, 들어가는 값에 따라서 타입이 정해지고 어느 값이든 들어갈 수 있기 때문에 이는 JavaScript의 장점이자 단점이다.

 3. 정의 되지 않는 객체 값 참조 시 에러 미발생

• 잘못된 코드 예시

  const obj = { latitude: 11.5, longitude: 47.1 };
  const result = obj.latitude * obj.longitute; // 보통은 이런 실수는 컴파일러가 잡아줘야 되는데
  console.log(result) // NaN이라는 값이 나온다.

• JavaScript는 없는 값을 참조해도 undefined라는 값으로 대체되어 오류가 발생하지 않는다.
• 즉, 어디서 문제가 발생했는지 파악하기 쉽지 않다.

이 부분들을 보완한게 TypeScript이다.

---

TypeScript의 장점

1. 생산성과 안전성이 높아지고 가독성이 올라 개발 및 유지 보수 과정에서 시간을 절약 할 수 있다.

2. 정적 타입 시스템, 객체 지향 프로그래밍, 디자인 패턴 등 다양한 고급 프로그래밍 개념들을 학습할 수 있다.

3. JavaScript에 비해 언어에서 보장되는 안정성을 바탕으로 테스트 코드는 줄일 수 있다.(테스트 코드보다 비지니스 로직 작성에 집중 가능)

---

컴파일러 , tsc

 컴파일러의 역할

• 타입 검사
  • TypeScript 컴파일러는 소스 코드의 정적 타입 검사를 진행.
  • 이를 통해 개발자는 코드에서 타입 관련 오류를 미리 발견하고 수정할 수 있음
• 코드 변환
  • 타입스크립트 컴파일러인 tsc는 TypeScript → JavaScript 코드 변환
  • C언어 컴파일러는 C언어 → 기계어 코드 변환
  • 컴파일러를 이해하면 변환된 코드가 어떻게 실행되는지 예측 가능

컴파일러의 장점

• 에러메세지 해석
  • 컴파일러는 소스 코드에서 문제가 발견되면 에러 메시지를 출력
  • 컴파일러를 이해하면 에러 메시지를 보다 정확하게 해석하고 문제를 신속하게 해결가능
• 최적화
  • 코드가 최적화되면서 전반적인 어플리케이션 실행 시간이 더 빨라짐

---

tsconfig.json

tsconfig.json란

• tsc --init 명령을 실행하면 생성되는 파일
• tsconfig.json은 TypeScript 프로젝트의 설정 파일
• 주로 프로젝트의 컴파일 옵션 및 입력 파일들을 정의하는데 사용

옵션 메뉴얼

• https://www.typescriptlang.org/ko/tsconfig

• 아래는 사용하는 주요 옵션들

  • compilerOptions - target : TypeScript 프로젝트 內 코드들이 어떤 JavaScript 버전으로 변환을 할 지 정하는 옵션

  • compilerOptions - module : TypeScript 파일을 컴파일한 후 생성되는 JavaScript 모듈의 형식을 지정

  • compilerOptions - outDir : 컴파일된 JavaScript 파일이 저장될 출력 디렉터리를 지정

    • 예를 들어, "outDir": "dist"로 설정하면 컴파일된 파일들이 dist 폴더에 저장

  • compilerOptions - strict : 엄격한 타입 검사 옵션을 모두 활성화하는 옵션으로 TypeScript 컴파일러가 코드의 실수를 미리 찾음

    • 해당 옵션을 true로 설정하면 아래의 옵션들이 자동으로 true로 설정됨
    • strictNullChecks
      • 잠재적으로 null(undefined)이 될 수 있는 값들에 대해서 엄격하게 확인하는 옵션
    • strictFunctionTypes
    • strictBindCallApply
    • strictPropertyInitialization
    • noImplicitAny
      • 함수의 인자 또는 변수의 타입이 명시적으로 선언되지 않은 경우에 컴파일러가 자동으로 any타입을 부여하지 않도록 방지
      • 이 옵션을 활성화하면 개발자가 누락된 타입 선언을 확인하고 명시적으로 타입을 선언
    • noImplicitThis
    • alwaysStrict

    compilerOptions - strict은 true 설정하는 것이 좋음.

  • compilerOptions - sourceMap : - 컴파일된 JavaScript 파일에 대한 소스 맵을 생성하는 옵션

    • 소스 맵을 사용하면 실행 중에 에러가 발생했을 때 원래 TypeScript 소스 코드의 위치를 확인 가능
    • 프로덕션 환경에서는 용량이나 성능상의 이유로 sourceMap을 사용하지 않는 것이 나을 수도 있음

  • include , exclude : tsc가 컴파일을 할 때 포함하거나 제외할 파일이나 디렉터리를 지정하는 옵션

    • “include": ["src/*/"]
      • src 디렉토리 밑의 친구들을 컴파일 하겠다는 의미
    • "exclude": ["node_modules", "dist"]
      • node_modules, dist 디렉토리 밑의 파일들은 컴파일 대상에서 제외하겠다는 의미