#1. 타입스크립트 개론

*이 게시물은 이정환 강사님의 '한 입 크기로 잘라먹는 타입스크립트' 강의 수강 정리한 글입니다.

 

 

타입스크립트란?

• 2012년 앤더스 하일스버그(C# 창시자)가 만든 언어.
• 오픈소스
• JS의 확장판 언어. JS에 '타입을 더 안전하게 사용할 수 있는 기능'을 추가한 것.
  • '변수의 이름:타입' 형태로 변수 타입을 사용자가 지정.
  • 지정된 타입 이외의 다른 값을 넣으려고 하면 에러 발생함.
  • 자바스크립트의 기본적인 문법을 모두 포함.

 

타입 시스템

1. 정적 타입 시스템
   • 코드가 실행되기 전 모든 변수의 타입을 고정적으로 결정하는 타입.
   • 엄격하고 고정적인 시스템.
   • ex) C, Java
2. 동적 타입 시스템
   • 코드를 실행한 뒤 그때그때 유동적으로 변수의 타입을 결정하는 타입.
   • 자유롭고 유연한 시스템 -> 코드에 오류가 있어도 일단 실행 됨.
   • ex) Python, JavaScript

타입스크립트는? 동적 타입과 정적 타입을 혼합한 타입 시스템을 이용한다! (점진적 타입 시스템)

• 코드 실행 전 변수의 타입을 결정하고 타입 오류가 없는지 검사함. (정적 특징)
• 변수 타입을 따로 정의하지 않을 경우 변수에 담긴 초깃값을 기준으로 알아서 타입을 추론함(동적 특징)

 

타입스크립트의 동작 원리

타입스크립트를 컴파일하면 자바스크립트 코드가 나온다! 

• 이 코드를 node.js나 웹브라우저로 실행하면 다른 언어들처럼 기계어로 컴파일 됨.
• 한 번 타입 검사를 통과한 코드이기 때문에 이렇게 나온 js 파일은 타입 오류 발생가능성이 적음(안전)
• JS 로 컴파일되는 과정에서 타입스크립트에서만 사용되는 코드들은 사라짐.

 

개발 환경 셋팅

//node.js 패키지 초기화 및 ts용 node 셋팅

npm init
npm i @types/node


//ts 컴파일러 설치

npm i -g typescript
tsc -v // 버전 확인


//tsx 설치 및 실행
//js로 컴파일하지 않고 ts 바로 확인하기 -> 명령어 한 번으로 ts 코드 실행

npm i -g tsx
tsx -v // 버전 확인
tsx src/index.ts // 파일 노드콘솔로 바로 확인

 

 

컴파일러 옵션 직접 설정하기

//tsconfig.json
{
	"compilerOption" : {
    	"target" : "ESNext"  // 어떤 버전의 js로 컴파일 할 것인가?
        "module": "CommonJS"  // JS코드의 모듈시스템 설정
        "outDir": "dist"  // 컴파일 결과 생성할 js 파일의 위치
        "strict": ture  // ts 컴파일러의 타입검사 엄격함 수준 설정. true가 기본
        "moduleDetection": "force" // 파일을 전역 모듈이 아닌 로컬(독립) 모듈로 자동취급되게 만듦
    },
    
	"include" : ["src"]  
    	// tsc에게 컴파일할 타입스크립트 파일의 범위와 위치를 알려줌.
    	// -> tsc 명령어만 입력하면 src 폴더 아래로 모든 ts 파일이 자동 컴파일 됨
    
}

 

※ JS 모듈시스템이란?

• 플러그인 파일이나 잘개 쪼개져있는 JS 코드 조각들을 재사용하기 위해서 각각의 파일을 등록하고, 등록된 파일을 JS에서 불러와 사용할 수 있게 해주는 프로그램. 즉, 모듈이란 재활용 가능한 코드 단위를 의미.
  • 어디에서 사용되어도 동작의 일관성이 보장됨
  • 하나의 어플리케이션이 N개의 모듈 집합으로 구성됨
• 종류
  • CommonJS(CJS)
    • 동기(synchronous) import를 큰 특징으로 가지는 정적 바인딩 모듈 시스템
    • require를 통해 가져온 값의 복사본을 사용함. 즉, module.exports 를 수행한 곳에서 값의 변경이 있어도 최초 require 이후에는 변경된 값을 사용할 수 없음.
    • 서버쪽에서 사용하기 편함. Node.js가 CJS를 사용하고 있음.
    • 모든 파일이 로컬 디스크에 있어 바로 불러올 수 있는 상황을 전제. 즉, 필요한 모듈이 모두 다운로드 되기 전까지는 아무것도 할 수 없다!
    • require, export 사용.
  • AMD
    • 비동기 상황에서 JS 모듈을 사용하기 위해 만들어진 모듈.
    • CJS와 달리 브라우저에 중점을 둠.
    • 클라이언트 쪽 개발에 적합.
    • define 사용.
  • UMD
    • CJS 와 AMD 의 비호환성을 해결하기 위해 등장한 시스템 
      -> 모듈 시스템에 따라 다른 구현을 정의함.
    • exports와 module이 존재하면 CJS, define 과 define.amd가 존재하면 AMD, 둘 다 아니라면 window 객체에 모듈을 보냄.
  • ESM
    • 언어 자체에 탑재된 모듈 시스템(ES6에 추가)
    • 브라우저 지원을 위해 번들러를 함께 사용함. 
    • 기존 script 파일들을 전역으로 사용해 코드가 오염되는 상황을 해결하기 위해 나타남.
    • ES Module의 동작방식: https://leetrue.hashnode.dev/javascript-module-system#heading-es-module
    • import, export 사용

 

ESM의 특징

• static함. import-export가 컴파일 시점에 결정되기 때문에 파일 경로를 꼭 명시해야 함
• 함수, 변수, 클래스를 import/export 가능함
• export 문은 최상위 항목이여야 함.
• import는 함수가 아닌 키워드이므로 변수에 할당하거나 중첩된 구조로 사용할 수 없음.
• 내보내거나 가져올 때 중괄호로 묶을 수 있음
• script로 모듈을 선언할 때는 <script type="module">을 포함시키면 됨.
• as 키워드를 통해 renaming 할 수 있음