6/24 TIL (TypeScript 기초)

📖 진행한 공부 📖

• TypeScript를 시작하기 전 알아야 할 것들
• TypeScript의 장점 및 기초

JavaScript의 약점

• 1. 실행 시간에 결정되는 변수 타입
  • JavaScript는 변수의 타입이 실행 시간에 결정
  • 이에 따라 개발자의 실수로 인한 오류 발생이 쉽고 찾기 까다로움
  • 변수 값, 타입을 모두 확인해야 하는 번거로움

• 2. 약한 타입 체크
  • JavaScript는 변수 / 상수를 구분하는 정도의 키워드만 지원
  • let a = 1; a = "Hello"; 가 얼마든지 가능한 것이고 약간의 실수로 예상하지 않은 동작이 발생할 수 있음

• 3. 물렁한 객체
  잘못된 코드 예시

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

객체는 캐릭터가 확실해야 함
붕어빵을 찍는 틀에서 소보루빵이 나오면 안 되는 것 처럼

TypeScript

Microsoft에서 개발한 오픈 소스 프로그래밍 언어

왜 등장했는지?

• JavaScript의 단점을 상쇄하기 위해 등장

장점

• 정의되지 않은 프로퍼티를 연산해 NaN이 되는 상황 방지
• 붕어빵 틀에서 붕어빵만 나오게끔
• 객체 지향 프로그래밍(OOP)를 할 때 JavaScript에 비해 가지는 큰 메리트

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  growOlder() {
    this.age += 1;
  }
}

const spartan = new Person('Spartan', 30);
spartan.age = 25; // 외부에서 age 속성을 마음대로 조작할 수 있어요! 뜻밖에 회춘?
spartan.growOlder();
console.log(spartan.age); // 결국 1살을 더 먹었지만 르탄이는 26세  

• 객체 지향 프로그래밍 언어 (C++, Java, C#, ...)에서는 다양한 접근 제어자를 통해서 클래스를 구성하는 프로퍼티의 캡슐화를 보장 / 함수의 호출 범위를 조정

• d.ts 라는 확장자를 가진 선언 파일을 통해 외부 모듈 타입 정보를 제공

• 향상되는 생산성

• 높아지는 안전성

• 줄어드는 테스트 코드

설치
yarn create react-app "폴더명" --template typescript

혹은

1. curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh

2. nvm install [설치할 노드 버전]

3. npm -v

4. npm i typescript -g

5. tsc

컴파일러, 그리고 tsc

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

컴파일러의 근본적인 역할

• 타입 검사를 해줌

  • TypeScript 소스 코드의 정적 타입 검사를 수행
  • 코드에서 타입 관련 오류를 미리 발견하고 수정 가능

• 코드 변환

  • tsc는 TypeScript -> JavaScript 코드를 변환
  • C언어 컴파일러는 C언어 -> 기계어 코드 변환
  • 컴파일러를 이해하면 변환된 코드가 어떻게 실행되는지
    예측이 가능하며, 디버깅 과정에서 큰 도움이 됨

컴파일러의 매력

• 에러 메세지 해석할 때 도움을 받을 수 있음

  • 컴파일러는 소스 코드에서 문제가 발견되면 에러 메세지 출력을 하기에 이를 해석하고 문제를 신속하게 해결 가능

• 컴파일러의 끝은 최적화

  • 코드가 최적화되면 전반적인 어플리케이션 실행 시간이 더 빨라짐, 컴파일러는 이런 걸 자동으로 도와주는 유익한 친구

tsc에 대해서
JavaScript는 기계어로 변환될 필요 X
동적 언어 (= 인터프리터 언어)이기 때문

• 정적 언어 (컴파일 언어) -> 기계어로 변환 되어야 함

• 동적 언어 (인터프리터 언어) -> 엔진이 코드를 한 줄씩 실행하면서 동적으로 해석

tsc 주요 명령어

• tsc --init : tsconfig.json이 생성되는 명령어

• tsc index.ts : index.ts를 컴파일

• tsc src/*.ts : src 디렉토리 안에 있는 모든 ts 파일을 컴파일

• tsc index.js --declaration --emitDeclarationOnly : @types 패키지를 위한 .d.ts 파일 생성

tsconfig.json 해부하기

• compilerOptions - strict옵션은 true로 설정해주시는 것을 권장

• compilerOptions - sourceMap옵션은 개발 환경에서 true로 설정해주시는 것을 권장

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

compilerOptions - targer 옵션

• 해당 TypeScript 프로젝트 내 코드들이 어떤 JavaScript 버전으로 변환할 지 정하는 옵션
  es5 로 설정하면 CommonJS 버전으로 컴파일
  es2016(=es7) 로 설정하면 ES2016 버전으로 컴파일
  • 최신 브라우저는 보통 ES2016을 지원
    레거시한 환경에서 동작 -> es5
    그렇지 않다면 es2016

compilerOptions - module 옵션

• TypeScript 파일을 컴파일한 후 생성되는 JavaScript 모듈의 형식을 지정
• 모듈을 가져오고 내보내는 방식을 결정하는 옵션
• target 옵션과는 서로 독립적인 관계

compilerOptions - outDir 옵션

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

compilerOptions - sourceMap 옵션

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

include, exclude 옵션

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