TypeScript 소개와 개발환경 구축

TypeScript 소개와 개발환경 구축

TypeScript는 마이크로소프트에서 개발하여 2012년에 발표한 JavaScript Superset 프로그래밍 언어입니다. 확장자는 .ts를 사용하며 컴파일(또는 트랜스파일)의 결과물로 .js 파일을 출력합니다. 런타임시 컴파일되어 출력된 .js파일을 실행하는 형식을 갖추고 있습니다.

1. TypeScript 소개

초창기 JavaScript는 웹페이지의 보조적인 기능을 수행하기 위해 한정적인 용도로 사용되었고 HTML과 CSS를 렌더링하는 수준이었습니다. 이후 HTML5의 등장으로 플러그인(flash, activex, silverlight 등) 의존 방식은 JavaScript 대체 되었고 AJAX의 활성화로 SPA(Single Page Application) 개발 방식이 트렌드가 되었습니다. 이로 인하여 서버사이드에서 담당하던 업무들이 클라이언트로 이동하게 되었고 그 만큼 JavaScript의 중요성도 높아지게 되었습니다.

JavaScript는 아래와 같이 C, Java와는 다른 특징을 가지고 있습니다.

• 프로토타입(Prototype) 기반의 객체 지향 언어(Object Oriented Language)
  
• Scope와 this의 사용
  
• 동적 타입(Dynamic Typed) 또는 느슨한 타입(Loosely typed)의 언어

이러한 특징은 객체지향 프로그래밍에 익숙한 개발자들을 혼란스럽게 하여 코드의 복잡도를 높이고 디버그가 증가하는 문제의 원인이 되었습니다. 이러한 문제를 극복하고자 JavaScript의 대체 언어가 등장하였는데 그 중 하나가 바로 TypeScript입니다.

TypeScript는 JavaScript의 상위확장(Superset) 언어로써 정적 타이핑 지원, ES(ECMAScript)6의 클래스와 모듈의 지원 및 ES7의 데코레이터 등을 지원합니다. JavaScript의 상위 집합이므로 기존의 JavaScript 문법을 그대로 사용가능하며, NodeJS의 npm 패키지들의 사용이 가능합니다. 또한 타입을 명확하게 명시하여 개발자가 의도한 변수나 함수의 목적을 분명하게 전달할 수 있고 이를 통하여 코드 자동 완성이나 잘못된 변수/함수 사용에 대한 에러 알림과 같은 풍부한 피드백을 받을 수 있습니다.

또한 ECMAScript의 업데이트에 따라 TypeScript도 새로운 기능을 맞춰서 추가할 예정이고 Angular가 TypeScript를 주력 언어로 채용함으로써 관심과 중요도가 계속 커져가고 있습니다.

2. TypeScript 특징

TypeScript가 기존의 JavaScript와 비교하여 갖는 특징은 다음과 같습니다.

• 정적 타입
  정적 타입을 지원하여 컴파일 단계에서 오류를 확인 가능.
  명시적인 정적 타입 지정은 개발자의 의도를 명확하게 전달.
  코드 가독성을 높이고 디버깅을 쉽게 할 수 있도록 해줌.
• 도구의 지원
  IDE(Integrated Development Environment)를 포함한 다양한 도구의 지원을 받음.
  코드 어시스트, 타입 체크, 리팩토링 등의 지원을 받음.
• 강력한 객체지향 프로그래밍 지원
  인터페이스, 제네릭 등과 같은 객체지향 프로그래밍을 지원
  크고 복잡한 프로젝트의 코드 기반을 쉽게 구성할 수 있도록 함.
• ES6 / ESNext 지원
  TypeScript가 ECMAScript 표준에는 포함되어 있지 않지만, 표준화가 유력한 스펙을 선제적으로 도입하고 있음.
  TypeScript를 이용하여 새로운 스펙의 유용한 기능을 안정적으로 도입하기에 유리함.
• Angular
  Angular의 주력 개발 언어로써 관련 정보를 얻을 때 이점이 있음.

3. TypeScript 개발환경 구축

TypeScript로 작성된 .ts 파일은 브라우저에서 동작하지 않으므로 컴파일러를 이용해 JavaScript 파일로 변환해주어야 합니다. 이를 컴파일 또는 트랜스파일이라고 합니다. 개발 환경을 구축하고 예제를 통해 트랜스파일러 사용 방법에 대해 알아보겠습니다.

※ 트랜스파일(Transpile)

TypeScript 컴파일러는 일반적으로 소스 코드를 바이트 코드로 변환하는 컴파일이 아닌 JavaScript 파일로 변환하므로 트랜스파일(Transpile) 하는 과정이라고 보는 것이 더 적절합니다. 

먼저 npm 을 이용하여 TypeScript를 전역 설치해주고 버전을 확인해줍니다.

npm install -g typescript

tsc -v

다음으로 아래와 같이 상속 관계에 있는 2개의 파일을 작성해줍니다.

// 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.`;
  }
}
 
const student = new Student('Lee');
 
console.log(student.sayHello());
console.log(student.study());

이후 작성한 파일을 트랜스파일해주면 .js 파일이 생성된 것을 확인할 수 있습니다. 확인 후 NodeJS REPL을 이용하여 실행해줍니다.

tsc person student

(또는 tsc *.ts 와 같이 와일드 카드를 사용하여 한꺼번에 트랜스파일링하는 것도 가능)

node student

--watch 또는 -w 옵션을 사용하면 대상 파일의 내용이 변경되었을 때 이를 감지하여 자동으로 트랜스파일을 해줍니다.

먼저 student.ts 파일을 --watch 옵션과 함께 트랜스파일링 해줍니다.

tsc student --watch

다음과 같이 student.ts 파일의 내용을 수정해줍니다.

// student.ts
import { Person } from './person';
 
class Student extends Person {
  study(): string {
    // is studying. -> is not studying!
    return `${this.name} is not studying!`;
  }
}
 
const student = new Student('Lee');
 
console.log(student.sayHello());
console.log(student.study());

파일 내용에 대한 변경이 감지되어 자동으로 트랜스파일이 진행되는 것을 확인할 수 있습니다.

이상으로 TypeScript에 대한 소개와 개발환경 구축 및 실행 방법에 대해 알아봤습니다.

※ 참고 문헌

• 이웅모 지음, 『Angular Essentials』, 루비페이퍼(2018), p112 ~ p121. 4.1 TypeScript 개요, 4.2 TypeScript의 장점, 4.3 TypeScript 개발환경 구축

• poiemaweb.com, TypeScript의 소개와 개발 환경 구축, https://poiemaweb.com/typescript-introduction