5분안에 보는 TypeScript

• 이 문서는 자바스크립트를 기본적으로 알고있다고 가정한다.
• 이 문서는 타입스크립트 한글 공식문서를 참고하여 정리한 내용이다.

  ---

TypeScript 설치하기

• TypeScript를 설치하는 방법에는 크게 2가지가 있다.
  • npm을 이용한 설치
    • npm install -g typescript
  • TypeScript의 Visual Studio 플러그인 설치

    ---

첫 번째 TypeScript 파일 만들기

• 에디터에서 hi.ts 파일을 생성하고, 아래 javascript 코드를 입력하자.

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

let user = "Jane User";

document.body.textContent = hi(user);

코드 컴파일하기

• .ts 확장자를 사용했지만, 이 코드는 아직 일반 JavaScript 코드이다.
• 기존의 JavaScript 앱에서 이 코드를 바로 복사하여 붙여 넣을 수 있다.
• cmd에서 TypeScript 컴파일러를 실행하자.

tsc greeter.ts

• 결과는 동일한 JavaScript 코드를 포함하고 있는 greeter.js 파일이 될 것이다.
• 이제 TypeScript가 제공하는 몇 가지 새로운 기능을 이용할 수 있다.
• 아래와 같이 : string 타입 표기를 'person' 함수의 인수에 추가하자.

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

let user = "Jane User";

document.body.textContent = hi(user);

타입 표기

• TypeScript의 타입 표기는 함수나 변수의 의도된 계약을 기록하는 간단한 방법이다.
• 아래의 경우, hi 함수를 단일 문자열 매개변수와 함께 호출하려고 한다.
• 이제 hi 함수 호출 시 매개변수로 배열을 전달하도록 변경해 볼 수 있습니다.

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

let user = [0, 1, 2];

document.body.textContent = hi(user);

• 다시 컴파일시, 오류가 발생한다.

hi.ts:7:32 - error TS2345: Argument of type 'number[]' is not assignable to parameter of type 'string'.

• 마찬가지로, hi 함수 호출에서 모든 인수를 제거해보자.

function hi() {
    return "Hello, ";
}

let user = [0, 1, 2];

document.body.textContent = hi(user);

• TypeScript는 사용자가 예상치 못한 개수의 매개변수로 이 함수를 호출했다는 것을 알려줄 것이다.

hi.ts:7:32 - error TS2554: Expected 0 arguments, but got 1.

• 두 경우 모두, TypeScript는 코드의 구조와 타입 표기에 기반해서 정적 분석을 제공합니다.
• 오류가 존재하기는 하지만, greeter.js 파일은 생성되었다.
• 코드에 오류가 존재하더라도 TypeScript를 사용할 수 있다.
• 하지만 TypeScript는 코드가 예상대로 작동하지 않을 것이라는 경고를 해준다.

  ---

인터페이스

• 여기서는 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);

클래스

• 이번에는 클래스를 사용해보자.
• 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에서 자주 사용되는 프로토타입-기반의 축약형일 뿐이다.

  ---

TypeScript 웹 앱 실행하기

• 이제 아래의 코드를 greeter.html에 작성해보자.
• 브라우저에서 greeter.html을 열어 간단한 첫 번째 TypeScript 웹 앱을 실행해보자.

  옵션: Visual Studio에서 greeter.js를 열거나, TypeScript playground에 코드를 복사하자.

  • 식별자 위에 마우스를 올려놓으면 해당 타입을 볼 수 있다.
  • 경우에 따라 타입이 자동으로 추론되기도 한다는 점을 유의하자.
  • 마지막 행을 다시 입력하고, DOM 요소 타입에 기반한 완료 목록과 매개변수 도움말을 확인하자.
  • greeter 함수 참조 위에 커서를 올려놓고, F12 키를 눌러 해당 정의로 이동할 수 있다.
  • 또한, 심벌을 마우스 오른쪽 버튼으로 클릭하고 리팩토링을 사용하여 이름을 바꿀 수 있다.

• 제공된 타입 정보는 애플리케이션 규모에서 JavaScript로 작동하는 도구와 함께 작동한다.
• TypeScript와 관련된 더 많은 예시를 보려면, 웹사이트의 Samples 섹션을 참고하자.