Typescript / 5min in Typescript

자바스크립트 개발자 또는 경험자를 위한 typescriptlang.org 의 Tutorials 를 정리했다.

• 5분에 끝내는 TypeScript
• Gulp
• Migrating from Javascript
• React & Webpack

5분에 끝내는 TypeScript

자바스크립트 개발자 또는 경험자가 알아야할 내용을 정리한 TypeScript in 5min을 정리했다.

설치

TypeScript는 Node.js를 사용하며, npm으로 typescript 지원 도구를 설치한다.

npm install -g typescript

개발자용 nightly build도 설치 할 수 있다.

npm install -g typescript@next

tsc 컴파일러

TypeScript 소스를 tsc 컴파일러로 컴파일하고, 결과는 Javascript로 생성된다.

$ tsc -V
Version 2.5.2

최신버전 갱신은 Typscript blog 를 참조한다.

첫번째 TypeScript 파일

보통 Typescript 소스 확장자는 .ts 로 저장하고 tsc 컴파일러로 컴파일한다. .ts 파일을 컴파일 하면 .js 자바스크립트 소스파일이 생성된다.

예를 들어 아래 자바스크립트로 구성된 코드를 greeter.ts 파일에 입력한다.

function greeter(person) {
  return "Hello, " + person;
}

var user = "Jone James";

document.body.innerHTML = greeter(user);

그리고 컴파일 하면 자바스크립트 소스 greeter.js 가 생성된다.

$ tsc greeter.ts

greeter.ts 소스와 컴파일 결과 greeter.js 소스는 일치한다.

Type annotations

TypeScript에서 형(Types) 표기는 함수 혹은 변수에 의미를 부여하기 위한 방법으로, 아래 코드의 greeter 함수에 전달하는 인자가 string 형 이라고 의도하기 위해서, 변수 다음 :으로 오른쪽에 형을 지정(annotation)해 선언한다 - 즉, 문자열로 전달할 거야 하는 의도를 선언한다고 이해하면 된다.

function greeter(person: string) {
  return "Hello, " + person;
}

var user = ["My", 1, 2, 3];
greeter(user);

이제 tsc 로 컴파일을 실행하면 아래 같이 형 지정 에러를 표시한다. 비슷하게 greeter() 함수의 매개변수를 모두 지우고 컴파일해도 비슷한 결과를 보여준다.

$ tsc greeter.ts
greeter_2.ts(7,9): error TS2345: Argument of type '(string | number)[]' is not assignable to parameter of type 'string'.

Typescript의 형 지정은 코드와 주어진 형 지정자를 기반으로 정적 분석을 제공한다.

이렇게 컴파일 에러는 발생하지만 .js 자바스크립트는 생성되는 것을 확인 할 수 있다. 코드에 에러가 있어도 TypeScript을 사용할 수 있다, 다만 원래 의도데로 실행되지는 않는다는 것을 경고해 준다.

Interfaces

추상화를 위해 interface 를 사용해서 속성을 가진 개체를 선언 할 수 있다.

아래 Person 인터페이스는 firstName, lastName 속성으로 선언하고 있다. TypeScript에서는 내부 구조가 호환하면 두 객체는 호횐 된다고 한다. 이것은 명시적으로 implements 절을 사용하지 않고도 인터페이스가 요구하는 형태를 가지면 인터페이스에 동일하게 구현이 가능하다고 한다. 이제 greeter 함수를 인터페이스 Person 형으로 다음 같이 선언할 수 있다.

interface Person {
  firstName: string;
  lastName: string;
}

function greeter(person: Person) {
  return "Hello, " + person.firstName + " " + person.lastName;
}

var user = { firstName: "Jane", lastName: "User" };

document.body.innerHTML = greeter(user);

이 소스를 tsc 로 컴파일 해도 형이 일치한다고 판단해서 경고가 없고 결과 자바스크립트를 HTML로 코딩해서 결과를 확인해 보자,

<!DOCTYPE html>
<html>
  <head>
    <title>TypeScript Greeter</title>
  </head>
  <body>
    <script src="greeter_3interface.js"></script>
  </body>
</html>

Classes

자바스크립에는 없는 클래스 기반의 객체지향 프로그래밍을 지원한다. class 키워드로 선언하고 속성과 메서드를 가진다. 또한 생성자 constructor() 에 public 접근제한자를 지정해서 추상화 단계를 결정하게 하고, 생성자의 public 지정자는 해당 이름으로 자동으로 속성을 생성하게 해준다. 이것은 클래스가 인터페이스와 잘 결합되게 해준다.

class Student {
  fullName: string;
  constructor(
    public firstName: string,
    public middleInitial: string,
    public lastName: string
  ) {
    this.fullName = firstName + " " + middleInitial + " " + lastName;
  }
}

interface Person {
  firstName: string;
  lastName: string;
}

function greeter(person: Person) {
  return "Hello, " + person.firstName + " " + person.lastName;
}

var user = new Student("Jane", "M.", "User");

document.body.innerHTML = greeter(user);

Person 인터페이스를 요구받는 greeter()에 Student class의 생성자에 호혼한다. 그래서 tsc로 컴파일해도 아무 문제 없다.

다만, 클래스의 생성자 매개변수가 인자 수, 형 같이 다르면 다음 같이 에러를 발생한다.

greeter_4classes.ts(18,12): error TS2554: Expected 3 arguments, but got 2.

컴파일한 자바스크립은 HTML에서 실행할 수 있다.

<!DOCTYPE html>
<html>
  <head>
    <title>TypeScript Greeter</title>
  </head>
  <body>
    <script src="greeter.js"></script>
  </body>
</html>

실제 실행하면 Person 객체는 세번째 매개변수가 없기 때문에 undefined 로 나타난다.

Hello, Jane undefined

TypeScript에서 클래스 기반의 코드를 컴파일해서 자바스크립트 생성된 결과를 보면, 클래스는 자바스크립트의 프로토타입 기반의 객체지향 방법의 축약형이다.

var Student = /** @class */ (function () {
  function Student(firstName, middleInitial, lastName) {
    this.firstName = firstName;
    this.middleInitial = middleInitial;
    this.lastName = lastName;
    this.fullName = firstName + " " + middleInitial + " " + lastName;
  }
  return Student;
})();

참조

Typescript in 5 min