TypeScript

1. TypeScript란?

TypeScript의 등장 배경

• 클라이언트 측 언어였던 JavaScript가 Node.js의 개발로 인해 서버측 기술로도 활용되며, 코드가 점점 복잡해지게 됨.
• 코드를 유지 관리 및 재사용하기 어려워짐

• TypeScript = JavaScript + Type

특징

• Compile 필요함.
• 런타임에 에러가 발생하는 JS와 딜리 컴파일 언어이기 때문에 코딩하면서 에러를 발견할 수 있다.
• 즉, 개발 환경에서 에러 잡는 걸 도와줌.
• 성능 향상과는 관계가 없고, 더 안정적인 앱을 개발할 수 있게 해줌.

---

2. Type

Type 이란?

• value나 property 또는 함수를 추론할 수 있는 방법
• JS의 기본 제공 유형을 상속함 (원시 타입, 객체 타입)

• 원시 타입
  • String
  • Number
  • Boolean
  • Null
  • Undefined
  • Symbol
• 객체 타입
  • Function
  • Array
  • Object
  • Class

추가 제공 Type

• Tuple
• Enum
• Any
• Void
• Never
• Union

1. Any

• 잘 알지 못하는 타입을 표현해야 할 경우
• 최대한 사용하지 않는 것이 좋음.

2. Union

• 둘 이상의 데이터 유형 사용 가능

let code: (string | number);
code = '123'; // OK
code = 123; // OK

3. Enum

• Enumerated Type (열거형)
• 값들의 집합을 명명하고 사용하도록 함
• 기본적으로 값은 0부터 시작
• 값을 할당한 경우, 그 값으로부터 +1이 됨.

enum PrintMedia {
  Newspaper = 1,
  Newsletter = 50,
  Magazine // 51
}

let mediaType = PrintMedia.Magazine   // 51

• enum은 그 자체로 객체이기도 함.
• enum은 선언 이후 수정할 수 없고, 속성값으로는 문자열이나 숫자만 지정 가능함.

4. Void

• 함수에서 아무 값도 Return하지 않을 때 사용

5. Never

• 절대 발생하지 않을 값을 나타냄
• 어떠한 일이 절대 일어나지 않을 것이라고 확신
• 보통 함수의 리턴 값으로 사용함

---

3. Type Annotation, Type Inference

Type Annotation

• 개발자가 타입을 타입스크립트에게 직접 말해주는 것

Type Inference

• 타입스크립트가 알아서 타입을 추론하도록 하는 것
• 추론하지 못해서 직접 해줘야 하는 경우가 있음.

1. Any 타입을 리턴하는 경우

const json: string = '{"x":4, "y":6}'
const cordinates = JSON.parse(json);
console.log(coordinates);

2. 변수 선언을 먼저 하고 나중에 초기화하는 경우

• 변수 선언과 동시에 초기화 시 -> 추론 가능
• 변수 선언만 하고 나중에 초기화 시 -> 추론 불가

3. 변수에 대입될 값이 일정치 못한 경우

• 여러 타입이 지정되어야 할 경우, '|'로 여러 타입을 지정해줘야 함
• 즉, string이 될 수도 있고 number가 될 수도 있는 변수의 경우

---

4. TypeScript 개발 환경

ts 파일을 html 파일 내에서 사용 불가하므로, 컴파일해서 Js 파일로 변환 후에 사용해줘야 함.

$ npm i -g typescript

$ tsc main.ts

컴파일 시 기본적으로 es3 문법을 이용해서 컴파일됨.
설정을 통해 es6를 사용해서 컴파일할 수 있음.

---

5. TsConfig 파일 설정

• 저장 위치 설정
• js 버전 설정 등

1. RootDir, OutDir 설정

{
  "compilerOptions": {
    "rootDir": "./src",
    "outDir": "./build/js"
  }
}

• rootDir : ts 파일의 위치
• outDir : 컴파일 후 js 파일 저장될 위치

2. es3 -> es6로 변경 (target)

{
  "compilerOptions": {
    "target": "ES2015"
  }
}

3. rootDir 바깥에서 ts 파일 생성 시 무시하도록

• ./src/**/*.ts 에서만 찾도록

{
  "compilerOptions": {
    "rootDir": "./src",
    "outDir": "./build/js"
  },
  "include": {
    "./src/**/*.ts", // 이 경로에서만 ts 파일을 찾게 됨
  }
}

4. noEmitOnError

{
  "compilerOptions": {
    "noEmitOnError": true
  }
}

-> 에러 발생 시 컴파일하지 않음

5. Module, ModuleResolution, esModuleInterop 설정

{
  "compilerOptions": {
    "module": "ESNext",
    "moduleResolution": "Node",
    "esModuleInterop": true,
  }
}

참고 - module과 target

• target: 해당 TS파일을 어떤 JS 버전으로 변환할지?
  • ES2015 (기본값)
  • ES6 ~ ESNext
• module: js파일 간 import시 어떤 문법 사용?
  • commonjs: require
  • ESNext: import

6. 라이브러리

{
  "compilerOptions": {
    "lib": ["ESNext", "DOM"], 
  }
}

7. strict Mode

{
  "compilerOptions": {
    "strict": true, 
  }
}

• 전체 코드

{
  "compilerOptions": {
    "target": "ES2015",
    "rootDir": "./src",
    "outDir": "./build/js",
    "noEmitOnError": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "esModuleInterop": true,
    "lib": ["ESNext", "DOM"],
    "strict": true
  },
  "include": ["./src/**/*.ts"]
}

---