타입스크립트 코리아 : 2017.05 기초 세미나 인프런 강의 정리

Typescript = Langauge

특징

• 타입스크립트는 '프로그래밍 언어'이다.
• 타입스크립트는 'Compiled Langauge' 이다.
  - 전통적은 Compiled Langauge 와는 다른 점이 많다.
  • Transpile 이라는 용어를 사용하기도 한다.
• 자바스크립트 = Interpreted Langauge

Compiled

• 컴파일이 필요
• 컴파일러가 필요
• 컴파일하는 시점 = 컴파일 타임
• 컴파일된 결과물을 실행
• 컴파일된 결과물을 실행하는 시점
  컴파일 과정에서 Type을 사용해서 Type 체크를 하게한다.

정적 타입 언어 VS 동적 타입 언어

동적 타입 언어를 커버하기 위해 테스트 코드를 작성해서 테스트 커버리지를 올리는것인데,
정적 타입 체크를 통해 테스트 커버리지를 어느정도 챙겨준다.

Traditional Compiled Langauge

• 컴파일 언어라고 한다.
• 프로그래머가 작성한 Source Code -> 기계어로 변환 과정 (Compile)
• 기계어로 변환된 결과물 = Object Code(목적 코드)
• Compile 하는 프로그램 = Compiler
• Compile 하는 동안을 = Compile Time
• 컴파일된 코드는 프로세서에 따라 다르다.
• 소스 코드에서는 OS에 따라 라이브러리가 다르다.
• 컴파일된 코드는 작은 크기에 최적화
• 일반적으로 실행시 기계어로 바꾸는 방식(인터프리터 언어)보다 빠르다.
  - 이유: 실행시 기계어로 바꿔주는 연산이 필요없음. 미리 컴파일해놓고 Object Code로 실행되기떄문,
  

Visual Studio Code

• Compiler
  - VS Code 에 컴파일러가 내장되어 있다.
  • 내장돤 컴파일러 버전은 VS Code와 함께 업데이트된다.
    - 컴파일러 버전과 VS Code의 버전은 상관 관계가 있다.
    - 내장된 컴파일러와 직접 설치한 컴파일러를 선택할 수 있따.

tsconfig

Typescript Compile Option을 설정할 수 있다.
ex) importHelpers는 Typescript -> Javascript로 컴파일 하는 과정에서 사용되는 helper함수들을 모듈로 분리해서 최상단 또는 최하단에 한번만 import할지에 대한 설정이 가능하다. -> 이를 통해 Typescript에서 사용하는 helper함수로 인한 용량 소비를 줄일 수 있다.

files > exlucde > include

@types

• TS 2.0부터 사용 가능해진 내장 type definition 시스템
• 아무 설정 안하면?
  - node_modules/@types 라는 모든 경로를 찾아서 사용
• typeRoots 를 사용하면?
  - 배열 안에 들어있는 경로들 아래서만 가져온다.
• types 를 사용하면?
  - 배열 안의 모듈 혹은 ./node_modules/@types/ 안의 모듈 이름에서 찾아온다.
  • [] 빈 배열을 넣는다는건 이 시스템을 이용하지 않겠다는 것.
• typeRoots 와 types를 같이 사용하지 않는다.
• type definition이 현재 사용중인 언어와 버전 호환이 안맞을 경우 커스텀 하게 타입 정의 가능.

compileOptions: target, lib

• target
  - ts file을 js file로 compile할 때 어떤 버전의 js 스펙을 적용할 지 ex) es3, es5
  • default: es3
• lib
  - 기본 type definition 라이브러리를 어떤 것을 사용할 지
  • lib 지정안할 경우,
    • target = es3, default로 lib.d.ts
      • target = es5, default로 dom,es5,scripthost
      • target = es6, default로 dom,es6,dom.iterable,scripthost
  • lib를 지정하면 그 lib 배열로만 라이브러리를 사용한다.
    • 빈 [] => 'no definition found 샬라샬라'

compileOptions: outDir, outFile

• outFile -> 하나의 file로 type을 만들 경우
• outDir -> 디렉토리 그대로 type 만들 경우

compileOptiosn: module

• 컴파일 된 모듈의 결과물을 어떤 모듈 시스템으로 할지 결정 module ex) commonJS, systemJS 등등
• target = es6 -> es6가 디폴트 / 아닐 경우 commonJS가 디폴트
• moduleResoliution -> ts 소스에서 모듈을 사용하는 방식 지정. Classic 아니면 Node 이다.
• paths 와 baseUrl은 가져올때 사용하는 것, 상대경로 방식이 아닌 baseUrl로 꼭지점과 paths 안의 키/밸류로 모듈을 가져가는 방식.
• rootDirs: 배열 안에서 상대 경로를 찾는 방식. -> 모듈 가져올 떄 모듈 path에 대한 root지정.

Type assertions

• 형변환과는 다르다. -> 실제 데이터 구조를 바꾸지 않음.
• 컴파일러에게 'Type이 이것이다' 라고 알려주는 것을 의미한다.
• 문법적으로는 2가지 방법이 있다.
  - 변수 as 강제할타입
  • <강제할타입>변수

타입 별칭 (별명)

• Primitve, Union Type, Tuple
• Interface와 비슷하다.
• 기타 직접 작성해야하는 타입을 다른 이름으로 지정할 수 있따.
• 만들어진 타입의 refer 로 사용하는 것이지 타입을 새로 만드는것이 아니다.
• **Interface 와의 차이점
  - Type Alias는 실제 Type이 새로 정의된 것이 아닌 해당 Type에 대한 refer인 반면, Interface는 새로 정의한 Type이다.
  - Type Alias는 Type Alias끼리 상속 불가능.