5분 만에 보는 TypeScript 도구

5분 만에 보는 TypeScript 도구 (TypeScript Tooling in 5 minutes)

TypeScript로 간단한 웹 애플리케이션을 만들어 보면서 시작해 볼게요. 여기서는 TypeScript를 설치하고, 첫 파일을 컴파일하고, 타입 주석과 인터페이스, 클래스가 코드에서 어떤 일을 하는지 한 흐름으로 살펴볼 거예요.

출처: TypeScript 핸드북

TypeScript 설치하기

프로젝트에 TypeScript를 추가하는 방법은 크게 두 가지가 있어요:

npm (Node.js 패키지 매니저) 사용
TypeScript의 Visual Studio 플러그인 설치

Visual Studio 2017과 Visual Studio 2015 Update 3은 TypeScript 언어 지원을 기본 포함하지만, TypeScript 컴파일러 tsc는 포함하지 않아요. Visual Studio로 TypeScript를 설치하지 않았다면 여전히 다운로드할 수 있어요.

npm 사용자의 경우:

> npm install -g typescript

첫 TypeScript 파일 만들기

편집기에서 greeter.ts에 다음 JavaScript 코드를 입력하세요:

// @noImplicitAny: false
function greeter(person) {
  return "Hello, " + person;
}

let user = "Jane User";

document.body.textContent = greeter(user);

코드 컴파일하기

우리는 .ts 확장자를 썼지만, 이 코드는 그냥 JavaScript예요. 기존 JavaScript 앱에서 이 코드를 그대로 복사/붙여넣기 해온 것이라고 생각하면 돼요.

커맨드 라인에서 TypeScript 컴파일러를 실행해요:

tsc greeter.ts

결과물로 여러분이 입력한 것과 같은 JavaScript를 담은 greeter.js 파일이 생겨요. 이제 우리 JavaScript 앱에서 TypeScript를 사용해 가동 중인 셈이에요!

이제 TypeScript가 제공하는 새 도구 중 일부를 활용할 수 있어요. 아래처럼 person 함수 매개변수에 : string 타입 주석을 추가해 보세요:

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

let user = "Jane User";

document.body.textContent = greeter(user);

타입 주석 (Type annotations)

TypeScript의 타입 주석은 함수나 변수의 의도된 계약을 기록하는 가벼운 방법이에요. 이 경우, 우리는 greeter 함수가 단일 string 매개변수로 호출되길 의도하고 있어요. greeter 호출을 배열을 넘기도록 바꿔 보죠:

// @errors: 2345
function greeter(person: string) {
  return "Hello, " + person;
}

let user = [0, 1, 2];

document.body.textContent = greeter(user);

다시 컴파일하면 이제 에러를 보게 돼요:

error TS2345: Argument of type 'number[]' is not assignable to parameter of type 'string'.

비슷하게, greeter 호출의 인자를 모두 제거해 보세요. TypeScript는 이 함수를 예상 밖의 개수의 인자로 호출했다는 걸 알려줄 거예요. 두 경우 모두 TypeScript는 코드의 구조와 여러분이 제공한 타입 주석을 바탕으로 정적 분석을 제공할 수 있어요.

에러가 있었음에도 greeter.js 파일이 여전히 생성된다는 점에 주목하세요. 코드에 에러가 있어도 TypeScript를 사용할 수 있어요. 하지만 이 경우 TypeScript는 코드가 예상대로 실행되지 않을 가능성이 높다고 경고하고 있는 거예요.

인터페이스 (Interfaces)

샘플을 조금 더 발전시켜 볼게요. 여기서는 firstName과 lastName 필드를 가진 객체를 서술하는 인터페이스를 사용해요. TypeScript에서 두 타입은 내부 구조가 호환되면 호환돼요. 이 덕분에 명시적인 implements 절 없이, 인터페이스가 요구하는 모양만 가지면 인터페이스를 구현할 수 있어요.

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

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

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

document.body.textContent = greeter(user);

클래스 (Classes)

마지막으로, 클래스로 예시를 한 번 더 확장할게요. TypeScript는 클래스 기반 객체지향 프로그래밍 지원 같은 JavaScript의 새 기능들을 지원해요.

여기서는 생성자와 몇 개의 public 필드를 가진 Student 클래스를 만들 거예요. 클래스와 인터페이스가 서로 잘 어울려서, 프로그래머가 적절한 수준의 추상화를 선택할 수 있게 해준다는 점에 주목하세요.

또한 주목할 점은, 생성자의 매개변수에 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;
}

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

document.body.textContent = greeter(user);

tsc greeter.ts를 다시 실행하면 생성된 JavaScript가 앞선 코드와 같다는 걸 볼 수 있어요. TypeScript의 클래스는 JavaScript에서 자주 쓰이는 것과 같은 프로토타입 기반 OO의 축약 표현일 뿐이에요.

TypeScript 웹 앱 실행하기

이제 greeter.html에 다음을 입력하세요:

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

브라우저에서 greeter.html을 열면 첫 번째 간단한 TypeScript 웹 애플리케이션이 실행돼요!

선택사항: Visual Studio에서 greeter.ts를 열거나, 코드를 TypeScript playground에 복사해 보세요. 식별자 위에 마우스를 올리면 그 타입을 볼 수 있어요. 어떤 경우에는 이런 타입이 여러분을 위해 자동으로 추론된다는 점에 주목하세요. 마지막 줄을 다시 입력하면서 DOM 요소의 타입을 바탕으로 한 완성 목록과 매개변수 도움말을 확인해 보세요. greeter 함수에 대한 참조에 커서를 두고 F12를 누르면 그 정의로 이동해요. 또한 심볼을 오른쪽 클릭하고 리팩토링으로 이름을 바꿀 수 있다는 것도 알게 될 거예요.

제공되는 타입 정보는 도구와 함께 작동해서 JavaScript를 애플리케이션 규모로 다루는 데 도움을 줘요. TypeScript에서 가능한 일의 더 많은 예시는 웹사이트의 Samples 섹션을 참고하세요.

Visual Studio picture

5분 만에 보는 TypeScript 도구