타입스크립트 문서 훑어보기

들어가며

새로 시작한 프로젝트에서 프론트엔드는 타입스크립트로의 개발이 확정되었다. 타입스크립트를 한번도 사용해보지 않았던지라, 레퍼런스를 빠르게 훑고 넘어가는 시간을 가지기로 했다. 그나마 자바스크립트를 약간 경험해봐서 둘의 차이를 위주로 알아가는것이 좋아보였다.

타입스크립트 레퍼런스를 참고했다.

Documentation - TypeScript for the New Programmer

Why typescript?

자바스크립트가 스크립팅언어로써 웹 브라우저 상에서 엄청난 존재감을 드러내고 있다는 것은 이제 더이상 놀랄 일이 아니다. 자바스크립트는 브라우저의 영역을 벗어나 서버를 구축하는데도 사용할 정도로 매우 유명한 언어가 되었기 때문이다. 심지어 자바스크립트만으로 풀스택 프로그래밍도 가능하다.

이런 자바스크립트도 치명적인 문제가 있는데, 런타임에서 에러가 발생한다는 것이다. 런타임 에러로 인해, [1, 2, 3]의 과정 중에서 2의 오류를 발견하기가 쉽지 않다. 이런 단점을 보완하기 위해 타입스크립트는 컴파일을 해서 프로그램 실행 이전 에러를 출력할 수 있도록 만들어주었다.

어떻게 자바스크립트의 기능을 수행하면서 컴파일 단계에서 에러를 잡아낼 수 있을까 ? 바로 언어 이름에서부터 알 수 있듯이 타입을 명시해주기 때문이다. 타입 명시로 컴파일 단계에서 미리 선언될 수 없는 변수들을 차단시킬 수 있다.

여러가지 이유로 나와 같은 실수 많이 하는 사람들은 타입스크립트 사용을 통해 조금 더 쾌적한 코딩 생활을 할 수 있지 않을까 싶다.

구문(Syntax)

타입스크립트는 자바스크립트의 구문이 허용된다. 자바스크립트의 코드를 오류로 보지 않기 때문에, 어떤 타입인지 모르지만 잘 동작하는 자바스크립트 코드를 타입스크립트로 실행해도 잘 동작한다.

타입(Type)

타입스크립트에서는 타입을 추가해서 구문의 옳고 그름을 판단해준다.

다음과 같은 코드가 있다.

console.log(4 / []);

이 코드는 자바스크립트 상에서 구문상의 문제가 없으므로 실행이 되고 NaN을 출력한다. 그러나 타입스크립트에서는 숫자를 배열로 나누는 동작이 유효하지 않다고 판단하여 오류를 발생시킨다.

런타임 특성(Runtime Behavior)

타입스크립트는 자바스크립트의 런타임 특성을 가진 프로그래밍 언어이다. 타입스크립트는 자바스크립트 코드의 런타임 특성을 절대 변화시키지 않는다. 즉, 타입스크립트가 코드에 타입 오류가 있음을 검출해도, 자바스크립트 코드를 타입스크립트도 이동시키는 것과 같은 방식으로 실행시킬 것을 보장한다.

컴파일

타입스크립트는 컴파일러가 존재한다. 컴파일러가 타입스크립트의 코드 검사를 마치면, 타입을 삭제해서 결과적으로는 타입이 삭제된 자바스크립트 코드가 될 수 있다. 타입스크립트 컴파일을 통해 타입이 삭제되었다는 것은, 타입스크립트가 추론한 타입에 따라 프로그램의 특성을 변화시키지 않는다는 의미이다.

결과적으로 타입스크립트를 배우기 위해서는 자바스크립트의 학습은 필수적이다. 구문과 런타임 특성을 공유하는 언어로써, 자바스크립트에서 배운 모든 것들은 동시에 타입스크립트를 배울 때 도움이 된다고 한다.

기본 문법

타입 추론

타입스크립트는 자바스크립트의 언어를 알고 있으며 대부분의 경우 타입을 생성해줄 것이다.

let helloWorld = "Hello World";

자바스크립트의 동작 방식을 이해함으로써 타입스크립트는 위의 코드를 받아들이면서 타입을 가지는 타입 시스템을 구축할 수 있다. 이 의미는 코드에서 타입을 명시하기 위해 추가적으로 문자를 사용할 필요가 없는 타입 시스템을 제공한다는 것이다. 따라서 위의 예제에서 helloWorld가 string임을 알게 하는 방식이다.

타입 정의

타입스크립트는 타입 정의를 통해 자바스크립트의 다양한 디자인 패턴을 더 명확하게 사용할 수 있다.

const user = {
    name: "Hayes",
    id : 0,
};

위의 코드는 string형의 name과 number형의 id를 가진 객체를 생성한다. 이 객체의 형태를 명시적으로 나타내기 위해서는 인터페이스로 선언해준다. 그 후, 타입스크립트의 : TypeName 구문을 통해 자바스크립트 객체가 새로운 인터페이스의 형태를 따르고 있음을 선언할 수 있다.

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

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

또한, 타입스크립트의 타입 중 any라는 타입은 무슨 타입이든 허용한다는 의미로 타입 검사를 하지 않겠다로 사용할 수 있다.

타입 구성

객체들을 조합해 더 크고 복잡한 객체를 만드는 방법과 유사하게 여러가지 타입을 이용해 새 타입을 작성하기 위한 방법으로 유니언(Union)과 제네릭(Generic)이 있다.

유니언(Unions)

유니언은 타입이 여러 타입 중 하나일 수 있음을 선언하는 방법이다. 예를 들어, boolean 타입을 true 혹은 false로 설명할 수 있다.

type MyBool = true | false;

유니언 타입을 통해 다양한 타입을 처리할 수 있는데, c++의 템플릿 개념처럼 array 또는 string을 받는 함수를 하나로 표현할 수 있다.

function getLength(obj: string | string[]) {
    return obj.length;
}

제네릭(Generics)

type StringArray = Array<string>;
type NumberArray = Array<number>;
type ObjectWithNameArray = Array<{ name: string }>;

제네릭은 다음과 같이 선언할 수 있다. 제네릭이 있는 배열은 배열 안의 값을 설명할 수 있다.

타입스크립트 생성

타입스크립트의 확장자는 .ts이다. 레퍼런스에서는 타입스크립트 실행을 위해 npm 혹은 vscode 확장 플러그인을 사용할 것을 추천하고 있다. 나는 이전에 node.js를 설치했기 때문에 npm을 통해 타입스크립트를 설치했다.

npm install -g typescript

그 후, greeter.ts를 생성해 코드를 작성해주었다.

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

let user = "Jane User";

document.body.textContent = greeter(user);

위 코드를 작성 한 뒤 tsc greeter.ts를 입력해 타입스크립트 코드를 컴파일해주면 js파일로 변환되어 greeter.js가 나오게 된다.

현재 상태에서 greeter.ts와 greeter.js의 차이는 없을것이다. 타입을 사용하지 않은 자바스크립트의 구문 그대로를 사용했기 때문이다. 이 상태에서 인터페이스와 클래스를 추가해 타입을 추가해주고 컴파일을 해보자.

// typescript
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);


// javascript
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;
}());
function greeter(person) {
    return "Hello, " + person.firstName + " " + person.lastName;
}
var user = new Student("Jane", "M.", "User");
document.body.textContent = greeter(user);

위의 타입스크립트 코드를 컴파일해주었더니 자바스크립트의 구문으로 변횐되어 js파일이 생겼다. 지금 단계에서는 두 코드의 차이가 느껴질 것이다.

타입스크립트 웹 앱 실행

만들어진 greeter.js를 띄워줄 html 파일을 작성해준다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Typescript Greeter</title>
  </head>
  <body>
    <script src="greeter.js"></script>
  </body>
</html>

그 후, greeter.html을 실행해보면 다음과 같은 화면이 나올 것이다.

정상적으로 js파일의 내용이 브라우저에 뜬 것을 확인할 수 있다.