타입스크립트 (TypeScript) 기초강좌
2016.05.15 12:34
타입스크립트 (TypeScript) 기초강좌
소개
TypeScript는 자바스크립트를 개발자가 원하는 방향으로 사용할 수 있게 도와줍니다. 타입스크립트는 자바스크립트 슈퍼셋 언어입니다. 어떠한 브라우저, 호스트, OS, 오픈소스에서도 사용이 가능합니다. 몇가지 특징에 대해 알아보도록 하겠습니다. 1) Node.js 패키지를 통하여 타입스크립트 컴파일러를 설치할 수 있습니다. 2) 비쥬얼 스튜디오 2013을 비롯하여, 웹스톰, 아톰, 서브라임 텍스트, 이클립스등에서 에디터가 가능합니다. 3) 깃허브에서 개발되고 있는 오픈소스입니다.
시작하기
타입스크립트를 설치하기 위해서는 두 가지 방법이 있습니다. NPM(Node.js package manager)를 사용. 또는, 비쥬얼 스튜디오 2012 플러그인을 사용하면 됩니다. 이번 포스팅에서는 NPM을 이용한 설치방법을 알아보도록 하겠습니다. 터미널을 실행한 후 아래와 같이 명령어를 입력해 주시면 됩니다.
|
npm install -g typescript |
그럼 이제, 확장자 명이 .ts인 타입스크립트를 .js로 컴파일러 하도록 하겠습니다. 우선 greeter.ts 파일을 생성한 후 아래와같이 자바스크립트 코드를 작성하도록 하겠습니다. 파일을 저장한 후, 터미널 커멘드 라인에 > tsc greeter.ts 를 실행하면 greeter.js라는 결과물이 나옵니다.
|
function greeter(person) { return "Hello, " + person; }
var user = "Jane User";
document.body.innerHTML = greeter(user); |
TypeScript 사용하기
지금부터는, 기존에 작성했던 자바스크립트 코드를 타입스크립트를 이용해서 바꿔보도록 하겠습니다.
1) greeter이라는 함수에 있는 person 인자와 함께 ":string"을 추가한다. 타입스크립트에서 타입 주석(type annotations)은 함수나 변수의 역할을 알려줍니다.
2) interface를 사용해서 firstname과 lastname이 있는 객체를 묘사합니다. 타입스크립트에서, 두 가지 타입은 양립할 수 있습니다.
3) 이제는 class를 사용하도록 하겠습니다. 타입스크립트는 "클래스 기반 객체 지향"인 ES6를 지원하고 있습니다. Student라는 클래스를 생성자 함수와 함께 생성합니다. 인지값에 public 사용은 자동적으로 프로퍼티를 만들어 줍니다.
4) 아래와 같이 작성후 tsc greeter.ts 를 다시 실행하면 자바스크립트 파일로 변환됩니다.
5) index.html 파일을 생성한 후 아래 마크업 내용을 복사후 실행합니다.
(greeter.ts 파일)
|
class Student { fullname : string; constructor(public firstname, public middleinitial, public lastname) { this.fullname = firstname + " " + middleinitial + " " + lastname; } }
interface Person { firstname: string; lastname: string; }
function greeter(person : Person) { return "Hello, " + person.firstname + " " + person.lastname; }
var user = new Student("Jane", "M.", "User");
document.body.innerHTML = greeter(user); |
(greeters.js 파일)
|
var Student = (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.innerHTML = greeter(user); |
(index.html 파일)
|
<!DOCTYPE html> <html> <head><title>TypeScript Greeter</title></head> <body> <script src="greeter.js"></script> </body> </html> |
드디어, 타입스크립트를 사용한 첫번째 어플리케이션이 완성되었습니다! 다음 포스팅에서는 타입스크립트에 사용되는 용어와 개념들을 정리하도록 하겠습니다.
[출처] http://m.blog.naver.com/love_junim/220643652716
광고 클릭에서 발생하는 수익금은 모두 웹사이트 서버의 유지 및 관리, 그리고 기술 콘텐츠 향상을 위해 쓰여집니다.
