TypeScript???

TypeScript???

#1 TypeScript

타입스크립트는 자바스크립트 대체 언어의 하나로써 자바스크립트의 상위 집합이다.

C#의 창시자인 아네르스 아일스베르가 개발을 주도한 타입스크립트는 마이크로소프트에서 2012년 발표한 오픈소스로, 정적 타이핑을 지원하며

ES6의 클래스, 모듈 등과 ES7의 데코레이터 등을 지원한다.

TypeScript는 ES5의 상위 집합이므로 기존의 자바스크립트 문법을 그대로 사용할 수 있다.

또한, ES6의 새로운 기능을 사용하기 위해 바벨과 같은 별도의 트랜스파일러를 사용하지 않아도 ES6의 새로운 기능을 기존의 자바스크립트 엔진에서 실행이 가능하다.

---

#2 장점

[ 정적 타입 ]

TypeScript를 사용하는 가장 큰 이유 중 하나는 정적 타입을 지원한다는 것이다.

function sum(a, b) {
    return a + b;
}

위 코드상으로는 어떤 타입의 인수를 전달해야 하는지, 어떤 타입의 반화값을 리턴해여 하는지 명확하지 않다./

따라서 위 함수는 다음처럼 호출될 수 있다.

// 위 함수는 다음처럼 호출될 수 있음
function sum(a, b) {
    return a + b;
}

sum('x', 'y'); // 'xy'

위 코드는 자바스크립트 문법상 어떠한 문제도 없으므로 자바스크립트 엔진은 아무런 이의제기 없이 코드를 실행할 것이다.

이러한 상황이 발생한 이유는 변수나 반환값의 타입을 사전에 지정하지 않는 자바스크립트의 동적 타이핑에 의한 것이다.

이제 위 함수를 TypeScript의 정적 타입을 사용해 다시 작성해보자.

// TypeScript의 정적 타입을 이용해 다시 작성
function sum(a: number, b: number) {
    return a + b;
}

TypeScript는 정적 타입을 지원하므로 컴파일 단계에서 오류를 포착할 수 있는 장점이 있다.

명시적인 정적 타입 지정은 개발자의 의도를 명확하게 코드로 기술할 수 있다.

이는 코드의 가독성을 높이고 예측할 수 있게 하며 디버깅을 쉽게 한다.

---

#3 개발환경 구축

TypeScript파일은 브라우저에서 동작하지 않으므로 TypeScript 컴파일러를 이용해 자바스크립트 파일로 변환해햐 한다.

이를 컴파일 또는 트랜스파일링이라 한다.

TypeScript 컴파일러를 설치하여 TypeScript 개발환경을 구축해보자.

[ TypeScript 컴파일러 설치 ]

npmd을 사용하여 TypeScript를 전역에 설치한다.

[ TypeScript 컴파일러 사용 ]

TypeScript 컴파일러는 TypeScript 파일을 자바스크립트 파일로 트랜스파일링 한다.

이를 실행해보기 위해 아래와 같은 파일을 작성한다.

타입스크립트의 확장자는 .ts이다.

// person.ts

class Person {
    private name : string;

    constructor(name : string) {
        this.name = name;
    }

    sayHello() {
        return "Hello, " + this.name;
    }
}

const person = new Person('Lee');
console.log(person.sayHello());

트랜스파일링을 실행해 보자. tsc 명령어 뒤에 트랜스파일링 대상 파일명을 지정한다.

이때 확장자 .ts는 생략할 수 있다.

트랜스파일링 결과는 같은 디렉터리에 자바스크립트 파일이 생성된다.

여기서 생성되는 파일의 이름은 person.js다.

class Person {
    constructor(name) {
        this.name = name;
    }
    sayHello() {
        return "Hello, " + this.name;
    }
}
const person = new Person('Lee');
console.log(person.sayHello());

이때 기본적으로 트랜스파일링된 파일의 버전은 ES3인데, 필자는 ES6로 트랜스파일링했다.

방법은 컴파일 옵션에 --target, -t를 사용한다.

아래와 같이 하는 것이다. 그럼 위 트랜스파일링된 코드로 저장될 것이다.

이제 Node.js REPL을 이용해 트랜스파일링된 person.js를 실행해보자.

여러 개의 파일을 한번에 트랜스파일링 할 수도 있다.

상속 관계에 있는 두 개의 TypeScript class를 작성해보자.

// person.ts

export class Person {
    protected name : string;

    constructor(name : string) {
        this.name = name;
    }

    sayHello() {
        return "Hello, " + this.name;
    }
}

// student.ts

import { Person } from './person';

class Student extends Person {
    study() : string {
        return `${this.name} is studying!!`; // studying -> studying!!
    }
}

const student = new Student('Lee');
console.log(student.sayHello());
console.log(student.study());

코드 작성을 마쳤으면 다음 명령으로 두 개의 TypeScript 파일을 한꺼번에 트랜스파일링 한다.

이렇게 해서 타입스크립트에 대해 아주 간단히 알아봤고

실습도 조금해봤습니다.

다음에 이어서 작성하도록 하겠습니다 감사합니다.