TypeScript 소개

1. 타입스크립트 배경

1-1. 자바스크립트의 문제

• 자바스크립트에는 boolean, 숫자, 문자열, 배열 등 다양한 타입이 존재함
• 자바스크립트는 매우 유연함
• 에러를 잘 반환하지 않음, 심지어 잘못된 코드에서도 에러를 반환하지 않는 경우가 있음

- 다른 타입 간의 이상한 연산을 하는 경우

// 배열 + boolean
[1, 2, 3, 4] + false;

// 출력
// '1,2,3,4false'

• 배열 타입을 잃음
• 문자열로 만들어버림
• 이러한 이상현상을 자바스크립트에서는 허용함

- 함수를 이상하게 호출하는 경우

function divide(a, b) {
  return a / b;
}

// 이상하게 함수 호출
divide("abcd");

// 출력
// NaN

• 인자의 개수도 맞지 않고, 숫자가 아닌 문자열을 인자로 보냄
• 자바스크립트가 코드의 실행을 막지 않음

- 런타임 에러 발생

const user = { name: "조정곤" };

// 객체에 정의되지 않은 메서드 호출
user.hello();

// 출력
// 에러출력

• hello()라는 함수가 없다고 경고하는 기능이 없음
• 애초에 컴파일 시, 오류를 발견하고 실행되지 않게 해야함
• 이 경우, 실행해야 비로소 오류가 있다는 사실을 발견할 가능성이 높음

2. 타입스크립트

“TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.”

출처 : https://www.typescriptlang.org/

• 마이크로소프트에서 만든 오픈소스
• 클래스, 인터페이스와 같은 객체 지향 관련된 구성요소, 키워드들을 사용하여 자바스크립트를 만들어내는 또 다른 형태의 자바스크립트임
• 큰 규모의 자바스크립트 애플리케이션을 만들고자 한다면, 기존 자바스크립트의 복잡한 패턴을 사용하는 것이 아닌 C#, JAVA와 같은 객체 지향 프로그래밍 언어(OOP)의 환경에 맞게 인터페이스와 클래스 같은 키워드를 사용해서 자바스크립트 코드 구현하기
• 타입스크립트로 만들어져서 실제 컴파일된 소스 자체는 자바스크립트임
• 타입스크립트는 자바스크립트에서 구현하지 못하는 여러 장점이 있음(자바스크립트의 확대집합)
  • ex) Interfaces, Modules, Namespace, Generics…
  • ECMA script6를 타입스크립트에서 그대로 사용(= ECMA script6의 프리뷰 버전)
• VS Code와 같은 IDE도구의 힘을 빌려 모든 자바스크립트의 라이브러리 대부분을 제공받을 수 있음

2-1. 타입스크립트의 3가지 큰 특징

1. 정적 형식 제공(Static Type)

   • 타입을 지정해야 함(강제성)
   • 형식 추론
   • 반면, 자바스크립트는 모든 타입(Any Type)

2. 묶어서 관리

   • 클래스, 네임스페이스, 열거형
   • 공용 구조체 형식 -> Union Type
   • 기존 자바스크립트에 없던 키워드, 개념을 사용해서 구조화하여 프로그래밍
   • 유지보수에 유리함

3. 훌륭한 도구

   • 코드 리팩터링
   • VS Code, Visual Studio, IntelliJ …

2-2. 타입스크립트를 사용해야하는 이유

1. 미래 버전의 JS
2. 형식 안정성(Type Safety)
3. 많은 SPA 프레임워크에서 타입스크립트를 도입하고 있음(Angular는 기본)