Do it! 타입스크립트 프로그래밍 - 개발 환경 구축과 프로젝트 생성

01 타입스크립트와 개발 환경 만들기

01-1 타입스크립트란 무엇인가?

01-2 타입스크립트 주요 문법 살펴보기

• 타입스크립트는 ESNext 문법을 대부분 지원
• 타입스크립트 고유의 문법
  • 타입 주석(type annotation)과 타입 추론(type inference)
    

    01: let n: number = 1  // 타입 주석
    02: let m = 2          // 타입 추론 : 대입 연산자(=)의 오른쪽 값을 분석해 왼쪽 변수의 타입을 결정

  • 인터페이스
    

    01: interface Person {
    02:   name: string
    03:   age?: number
    04: }
    05:
    06: let person: Person = { name: "Jane" }

  • 튜플(tuple)
    

    01: let numberArray: number[] = [1, 2, 3]                   // 배열
    02: let tuple: [boolean, number, string] = [true, 1, 'OK']  // 튜플

  • 제네릭 타입(generic type)
    

    01: class Container<T> {
    02:   constructor(public value: T) { }
    03: }
    04: let numberContainer: Container<number> = new Container<number>(1)
    05: let stringContainer: Container<string> = new Container<string>('Hello World')

  • 대수 타입(algebraic data type) : 다른 자료형의 값을 가지는 자료형을 의미
    

    01: type NumberOrString = number |string   // 합집합 타입(union 또는 sum type) 예
    02: type AnimalAndPerson = Animal &Person  // 교집합 타입(intersection 또는 product type) 예

01-3 타입스크립트 개발 환경 만들기

 

 

02 타입스크립트 프로젝트 생성과 관리

02-1 타입스크립트 프로젝트 만들기

• tsconfig.json 파일 생성
  • 타입스크립트 컴파일러의 설정 파일
  • tsc --init 명령으로 생성
    

    01: {
    02:   "compilerOptions": {
    03:     "module": "commonjs",
    04:     "esModuleInterop": true,
    05:     "target": "es5",
    06:     "moduleResolution": "node",
    07:     "outDir": "dist",
    08:     "baseUrl": ".",
    09:     "sourceMap": true,
    10:     "downlevelIteration": true,
    11:     "noImplicitAny": false,
    12:     "paths": { "*": ["node_modules/*"] }
    13:   },
    14:   "include": ["src/**/*"]
    15: }

• package.json 수정
  • 개발이 완료되면 타입스크립트 소스코드를 ES5 자바스크립트 코드로 변환해 node로 실행
  • 이를 위해 package.json 파일 내 script 항목에 dev와 build 명령 추가

02-2 모듈 이해하기

• 모듈(module) : index.ts와 같은 소스 파일
• 모듈화(modulization) : 코드 관리와 유지, 보수를 위해 모듈마다 고유한 기능을 구현하는 방식
• export 키워드 : 기능을 제공하는 쪽에서 사용
  • function 키워드 외에도 interface, class, type, let, const 키워드 앞에도 붙일 수 있음
• import 키워드 : 다른 모듈의 기능을 이용하는 쪽에서 사용
  

  import { 심벌 목록 } from '파일의 상대 경로'  // 가장 기본적인 형태
  import * as 심벌 from '파일 상대 경로'

• export default 키워드
  • 한 모듈이 내보내는 기능 중 오직 한 개에만 붙일 수 있음
  • import문으로 불러올 때 중괄호 { } 없이 사용할 수 있음

02-3 tsconfig.json 파일 살펴보기

• module 키
  • 동작 대상 플랫폼이 웹 브라우저인지 노드제이에스인지를 구분해 그에 맞는 모듈 방식으로 컴파일하려는 목적
• moduleResolution 키
  • module 키의 값이 commonjs이면 moduleResolution 키값은 항상 node로 설정
  • module 키의 값이 amd이면 moduleResolution 키값은 classic으로 설정
• target 키
  • 트랜스파일할 대상 자바스크립트의 버전을 설정
  • 대부분 es5를 키값으로 설정 (최신 버전의 노드제이에스를 사용한다면 es6 설정)
• baseUrl과 outDir 키
  • 트랜스파일된 ES5 자바스크립트 파일을 저장하는 디렉터리를 설정
• paths 키
  • 소스 파일의 import문에서 from 부분을 해석할 때 찾아야 하는 디렉터리를 설정
• esModuleInterop 키
  • 웹 브라우저에서 동작한다는 가정으로 만들어진 오픈소스 자바스크립트 라이브러리를 사용하기 위함
• sourceMap 키
  • 키값이 true이면 트래스파일 디렉터리에는 .js.map 파일 생성
  • 변환된 자바스크립트 코드가 타입스크립트 코드의 어디에 해당하는지 알려주며 주로 디버깅할 때 사용
• downlevelIteration 키
  • 생성기(generator) 구문이 정상적으로 동작하려면 키값을 true로 설정
• noImplicitAny 키
  • 타입 미지정 시 오류를 무시하기 위해 false로 설정

출처 : Do it! 타입스크립트 프로그래밍

Do it! 타입스크립트 프로그래밍