타입스크립트 (TypeScript) 란?

JavaScript (ECMA Script)

: 브라우저를 위한 스크립팅 언어로 개발됨

: 다양한 API가 추가되면서 교차 플랫폼 (cross-platform) 개발을 위한 언어로 발전

: 오늘날 많은 개발자들은 JavaScript를 이용해 전체 스택을 프로그래밍

 

- JavaScript의 문제점

: 동일 연산자인 ==을 허용하여 인수를 강제 변환(coeres)로 하는 문제로 예기치 않은 동작을 유발

: 존재하지 않는 프로퍼티의 접근을 허용

 

 

 

 

TypeScript

: 프로그램을 실행시키지 않으면서 코드의 오류를 검출하는 '정적 검사'를 통해 어떤 것이 오류이고, 연산 되는 값에 기인하지 않음을 체크

: 타입스크립트는 프로그램을 실행시키기 전에 값의 종류를 기반으로 프로그램의 오류를 탐색

 

- 구문 (Syntax)

: 프로그램을 만들기 위해 코드를 작성하는 방법을 의미

: 타입스크립트는 JS의 구문이 허용되는 JavaScript의 상위 집합 언어

 

- 타입 (Types)

: 타입스크립트는 다른 종류의 값들을 사용할 수 있는 방법이 추가된, 타입이 있는 상위 집합

 

- 런타임 특성 (Runtime Behavior)

: 타입스크립트는 JavaScript의 런타임 특성을 가진 프로그래밍 언어

 

- 삭제된 타입 (Erased Types)

: 타입스크립트의 컴파일러가 코드 검사를 마치면 타입을 삭제해서 결과적으로 '컴파일된' 코드를 만듬

: 컴파일된 코드에 타입정보가 없으므로, 타입스크립트가 추론한 타입에 따라 프로그램의 특성을 변화시키지 않음

: 추가 런타임 라이브러리를 제공하지 않으므로 JavaScript에서 사용하는 것외의 타입스크립트에 대한 관련 프레임워크를 추가로 공부할 필요가 없음

 

 

 

 

 

 

TypeScript의 예시

- 인터페이스

interface User {
  name: string;
  id: number;
}

// ---cut---
const user: User = {
  name: "Hayes",
  id: 0,
};

 

- 클래스

interface User {
  name: string;
  id: number;
}
class UserAccount {
  name: string;
  id: number;
  constructor(name: string, id: number) {
    this.name = name;
    this.id = id;
  }
}

const user: User = new UserAccount("Murphy", 1);

 

- 유니언

// 특정 타입에 대한 다양한 변수형을 정의 가능

type MyBool = true | false;

function wrapInArray(obj: string | string[]) {
  if (typeof obj === "string") {
    return [obj];
//          ^?
  } else {
    return obj;
  }
}

 

- 제네릭

// @errors: 2345
interface Backpack<Type> {
  add: (obj: Type) => void;
  get: () => Type;
}

// 이 줄은 TypeScript에 `backpack`이라는 상수가 있음을 알리는 지름길이며
// const backpack: Backpack<string>이 어디서 왔는지 걱정할 필요가 없습니다.
declare const backpack: Backpack<string>;

// 위에서 Backpack의 변수 부분으로 선언해서, object는 string입니다.
const object = backpack.get();

// backpack 변수가 string이므로, add 함수에 number를 전달할 수 없습니다.
backpack.add(23);

: 클래스 내부에서 사용할 데이터 타입을 외부에서 지정

 

 

 

 

 

Reference

Documentation - TypeScript for the New Programmer

Documentation - TypeScript for JavaScript Programmers