타입스크립트를 시작하기 위한 예제를 따라 해 보겠습니다.
참고 : typescript - Quick start
0. 준비하기
타입스크립트(typescript)가 설치돼 있지 않다면 설치해 줍니다.
( 참고 - typescript - Get TypeScript, [TypeScript] 타입스크립트(TypeScript)를 비주얼 스튜디오(Visual Studio) 2015에 설치하기 )
타입스크립트를 설치하고 나면 프로젝트에 'TypeScript'라는 항목이 추가된 것을 볼 수 있습니다.
여기서 'TypeScript를 사용한 HTML 응용 프로그램'을 선택하고 프로젝트를 생성해 줍니다.
바로 실행해보면 실시간으로 시간이 갱신되는 타입스크립트 앱을 볼 수 있습니다.
1. 타입스크립트 파일 만들기
프로젝트에 'greeter.ts'라는 이름으로 타입스크립트 파일을 추가합니다.
추가된 파일에 아래 코드를 넣습니다.
|
1
2
3
4
5
6
7 |
function greeter(person) {
return "Hello, " + person;
}
var user = "Jane User";
document.body.innerHTML = greeter(user); |
cs |
문서를 저장하고 잠 시기다리면 타입스크립트가 컴파일되면서 'greeter.js'파일이 생성됩니다.
(자동으로 되지 않으면 수동으로 빌드를 돌리시면 됩니다.)
이 파일을 프로젝트에 포함이 안돼있어서 바로는 보이지 않고 '솔루션 탐색기'에 '모든 파일 표시' 옵션을 활성화하여야 보입니다.
2. 타입스크립트 작성해 보기
위의 샘플 코드는 타입스크립트 파일에 자바스크립트(javascript)로 작성된 코드입니다.
그러므로 빌드결과도 똑같게 나옵니다.
이것은 타입스크립트 안에서 자바스크립트를 그대로 사용할 수 있다는 의미도 됩니다.
이제 변수에 형(type, 타입)을 지정해 봅시다.
|
1
2
3
4
5
6
7 |
function greeter(person: string) {
return "Hello, " + person;
}
var user = "Jane User";
document.body.innerHTML = greeter(user); |
cs |
타입스크립트에서는 변수에 타입을 지정할 수 있습니다.
이렇게 되면 자바스크립트에서 흔히 겪는 변수형이 잘못돼서 생기는 오류를 컴파일 단계에서 잡을 수 있습니다.
이렇게 수정하고 빌드를 하면 생성된 자바스크립트 파일의 내용이 똑같은 것을 알 수 있습니다.
하지만 이대로는 실행하면 에러 납니다 ㅎㅎㅎㅎ
html 코드를 아래와 같이 바꿔 줍니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>TypeScript HTML App</title>
<link rel="stylesheet" href="app.css" type="text/css" />
</head>
<body>
<h1>TypeScript HTML App</h1>
<div id="content"></div>
<script src="greeter.js"></script>
</body>
</html>
|
cs |
스크립트가 DOM로드되기 전에 시작되면 html 요소를 찾지 못해 에러가 납니다.
위 코드처럼 스크립트를 바디 끝에 둠으로써 모든 파일이 로드된 후 스크립트가 동작할 수 있게 해줍니다.
이제 매개변수로 'string'가 아닌 다른 타입을 넣어 봅시다.
|
1
2
3
4
5
6
7
8 |
function greeter(person: string) {
return "Hello, " + person;
}
//var user = "Jane User";
var user = [0, 1, 2];
document.body.innerHTML = greeter(user); |
cs |
빌드를 돌리면 아래와 같이 빌드타임 에러가 납니다.
오홋!
이제 자바스크립트를 짜면서 삑사리 난 타입을 찾으러 다니지 않아도 됩니다!!
3. 인터페이스
타입스크립트를 사용하는 이유 중에 하나가 객체지향(Object-Oriented Programming, OOP)의 개념을 자바스크립트에서 사용할 수 있다는 점입니다.
이 개념을 어떻게 타입스크립트에서 사용하는지 하나하나 따라가 봅시다.
아래와 같이 인터페이스를 선언합니다.
그리고 파라미터를 인터페이스로 받도록 수정합니다.
|
1
2
3
4
5
6
7
8
9
10
11
12 |
interface Person {
firstName: string;
lastName: string;
}
function greeter(person: Person) {
return "Hello, " + person.firstName + " " + person.lastName;
}
var user = { firstName: "Jane", lastName: "User" };
document.body.innerHTML = greeter(user); |
cs |
그리고 저장 후 빌드 해봅시다.
오오오오~
이뿌게 자바스크립트가 생성되었습니다. ㅋ
결과는 똑같이 나옵니다.
4. 클래스
이제 정말 중요한 클래스를 사용해 봅시다.
클래스에서 조심해야 할 것이 생성자는 'constructor'로 만들어야 하며 생성자의 매개변수는 퍼블릭(public)으로 선언해야 외부에서도 접근이 가능합니다.
아래 코드를 넣고 빌드를 해봅시다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19 |
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); |
cs |
코드가 좀 난해한데....
클래스가 인터페이스를 상속하지 않았지만 자바스크립트에서처럼 변수명만 가지고 인터페이스를 연결해서 사용하는 모양입니다..-_-;;
일단 빌드해 봅시다.
중단점을 찍어 변환된 클래스를 생성해보면 아래와 같이 퍼블릭으로 받은 매개변수는 자동으로 클래스 내부 변수가 되어 있 는 것을 확인할 수 있습니다.
아마도 인터페이스의 변수명과 일치만 한다면 그냥 사용할 수 있나 봅니다.
마무리
간단하게 타입스크립트를 사용해 봤습니다.
아래는 테스트 프로젝트 입니다.
TypeScriptTest.zip
타입스크립트의 장점은 인텔리전스(Intelligence, 자동완성 기능)를 사용할 수 있다!!!
변수가 예측되어 에러를 쉽게 잡을 수 있다!!!
OOP개념으로 자바스크립트를 작성할 수 있다!!!!
등등~~
당신도 타입스크립트의 세계에 빠져 드는 겁니다!!
