Angular2는 타입스크립트(Typescript)를 메인언어로 사용한다. Angular2를 정복하기 위해서는 타입스크립트 이해가 필수다. 자바스크립트 개발만 진행한 개발자에게는 다소 생소한 언어일지 모른다. 하지만 타입스크립트는 기존 자바스크립트 언어 특성을 침범하지 않으면서, ES최신 표준에서 타입요소를 확장하여, 자바스크립트 개발의 복잡도를 낮춘다. Change Log 2016-06-11 : 업로드 2016-06-12 : ECMA 인터내셔널 내용추가 및 교정 2016-07-21 : ECMA 히스토리 정정

1. Typescript for Angular2
Angular2를 위한 타입스크립트
160611 대구개발자그룹 정진욱

2. • ECMA 스크립트
• 타입스크립트 소개
• 타입스크립트의 차별점
• 타입스크립트 개발준비
• 타입스크립트 중요문법
목차

3. ECMA 스크립트

4. • ECMA 스크립트는 ECMA International의 표준
– 최초 ECMA 스크립트는 브라우저 언어인 자바스크립
트와 Jscript간 차이를 줄이기 위한 공통스펙 제안으로
출발 (1997, ECMA-262)
• ECMA International은 전세계적인 표준기관
– 유럽 컴퓨터 제조협회로부터 기원함 (ECMA는 옛이름)
• ECMA(European Computer Manufacturers Association)
– C#, JSON, Dart을 포함한 많은 언어표준을 관리함
ECMA 스크립트에 대하여

5. ECMA Script(ES) 히스토리
ES1 ES2 ES3 ES4 ES5 ES6
(ES2015)
1997 1998 1999 2008 2009 2013 2016
ECMA-262 Ed. 5
사용제외ECMA-262 Ed. 1
주요 브라우저
지원시작
ES7
(ES2016)

6. ES7을 포함하는 타입스크립트
ES5
브라우저지원
- JSON
- Use strict
ES6
= ES2015
- 클래스
- 모듈
타입스크립트
- 타입
- 어노테이션
ES7
= ES2016
- 데코레이터
- Async/await
앳스크립트
- 어노테이션

7. Angular2 생태계의 중심인ECMA 스크립트
…

8. 타입스크립트 소개

9. • MS에서 개발한 자바스크립트 상위집합 언어
• 타입스크립트 = 자바스크립트 + 타입
• ECMA 스크립트 표준을 따르는 차세대 자바스크
립트
• Angular2가 채택한 언어 스펙이 충분한 언어
타입스크립트(TS)란?

10. • 큰 규모의 자바스크립트 프로젝트에 적용가능
– 객체지향 프로그래밍 지원으로 ES5 (브라우저 지원
자바스크립트)에 비해 코드 복잡도가 낮다
• 자바스크립트의 결점을 보완
– 명시적인 타입제공을 통한 컴파일 단계에서 오류제거
• 예로 Boolean 형 false와 숫자 0을 구분할 수 있음
타입스크립트 장점

11. • 인텔리센스지원
– 타입추가로 인해 인텔리센스(코드완성 기능) 지원가능
– 예 : 비주얼 스튜디오 코드 (https://www.visualstudio.com)
• 학습비용이 낮다
– 타입특성 및 ES6, ES7 확장을 제외하고 ES5를 그대로 이
용할 수 있다. (타입추가 외에는 자바스크립트이다.)
– ES5의 경험과 객체지향개념 개념을 가지고 있다면 학습
비용이 낮다. 예 : 자바, C#과 비슷한 문법 스타일
타입스크립트 장점

12. • 2012년 10월 첫 타입스크립트 버전 0.8 발표
• 2013년 6월 18일 타입스크립트 버전 0.9 발표
• 2014년 2월 25일 Visual Studio 2013 빌트인 지원
• 2014년 4월 2일 타입스크립트 1.0 발표
• 2014년 7월 타입스크립트 컴파일러 발표, Github 이전
타입스크립트의 역사

13. 타입스크립트의 차별점

14. • 명시적인 자료형 선언가능
타입스크립트의 차별점
var a="10";
var b=10;
var sum=a+b;
console.log(sum);
function add_error(){
let a: string = "10";
let b: number = 10;
let sum: number = a+ b;
//error!
console.log(sum);
}
add_error();
JS TS
결과 : 1010
해석: 20이 출력되길 기대했
지만, 자바스크립트의 암묵적
(implicit) 형변환은 예측할 수
없는 오류를 만들어 냄.
결과 : 타입이 다른 경우 더
하기 에러가 발생함! (오류가
능성 사전제거)

15. • 명시적인 자료형 선언가능
타입스크립트의 차별점
function add(){
let a: number = 10;
let b: number = 10;
let sum: number = a+ b;
console.log(sum);
}
add();
TS
결과 : 20
- 명시적인 자료형 선언으로
가독성이 향상됨
- 자료형을 명시적으로 정의
함으로서 오류를 사전감지함
예 : 자료형이 다르면 비교나,
할당이 불가능함

16. • 객체지향 프로그래밍 지원
타입스크립트의 차별점
var car = (function()({
function car(){};
car.prototype.getNumTier=f
unction(){};
…
}());
class car {
numTier: number;
constructor(){}
getNumTier(){}
….
}
JS TS
클래스 관련 키워드 도입으로
표현식이 간결하고 명확해졌다.
객체네 함수 정의를 위해
prototype과 같은 부자연스러운
표현식이 존재하며
표현이 불명확하다.

17. 타입스크립트 개발준비

18. • 컴파일러
• 트랜스파일러
– ES2015 이후 문법에 대해 ES5(현재 브라우저에서 지
원하는 자바스크립트)로 변환하는 도구
트랜스파일러
상위언어 기계어
ES2015 ES5
트랜스파일링
컴파일링

19. • TSC는 타입스크립트를 자바스크립트로 변환
(transpiring)해주는 도구이다.
트랜스파일러인 TSC
트랜스파일링

20. • 타입스크립트 설치시 TSC는 기본 포함되어 있다.
– 타입스크립트 설치
– 트랜스파일링 (컴파일)
– 테스트
TSC 활용
npm install –g typescript
tsc helloworld.ts
node helloworld.js

21. 타입스크립트 중요문법

22. • Boolean
• Number
일반타입
let isDone: boolean = false;
let decimal: number = 6;
let hex: number = 0xf00d;
let binary: number = 0b1010;
let octal: number = 0o744;

23. • String
• Array
• Tuple
일반타입
let color: string = "blue";
color = 'red';
let list: number[] = [1, 2, 3];
let x: [string, number]; // Initialize it
x = ["hello", 10]; // OK
x = [10, "hello"]; // Error

24. • Enum
• Any
일반타입
enum Color {Red, Green, Blue};
let c: Color = Color.Green;
let notSure: any = 4; // 숫자로 할당
notSure = “Hello"; // 문자열로 할당
notSure = false; // 불리안 형이 된다.

25. • Void
• Type assertions
일반타입
function warnUser(): void {
alert("This is my warning message");
}
let someValue: any = "this is a string";
let strLength: number = (<string>someValue).length;

26. • Let을 이용한 호이스팅 문제 해결
일반타입
function display() {
console.log("My Name is
", t); // 정상출력
var t = "hello";
}
display();
function display() {
console.log("My Name is
", t); // 에러발생
let t = "hello";
}
display();
JS TS
Let 키워드 사용전 스코프 전
역에서 변수호출이 가능하다.
변수의 변경내용에 대한 추
적이 어렵다.
Let 키워드를 이용하여, 선언
후에 대해서만 명확한 스코
프를 가지며, 선언전 변수 호
출시 에러가 발생한다.

27. • Class 키워드를 이용하여, 클래스 정의
클래스
class car {
numTier: number;
carName: string;
constructor(carName: string,
numTier: number){
this.carName = carName;
this.numTier = numTier;
}
getNumTier(){
return this.numTier;
}
getCarName(){
return this.carName;
}
}
let myCar = new car("해피카",4);
console.log(myCar.getCarName()+"
의 타이어 개수는
"+myCar.getNumTier()+"개 입니
다.");
[결과]
해피카의 타이어 개수는 4개 입니다.

28. • Extend 키워드를 이용하여 부모 클래스를 상속
상속
class HappyCar {
numTier: number;
carName: string;
speed: number;
constructor(carName: string, numTier:
number){
this.carName = carName;
this.numTier = numTier;
}
setSpeed(speed:number){
this.speed=speed;
}
getSpeed(){
return this.speed;
}
}
class bus extends HappyCar {
constructor(carName: string, numTier:
number) { super(carName,numTier); }
setSpeed(speed = 0) {
super.setSpeed(speed);
}
}
class truck extends HappyCar {
constructor(carName: string, numTier:
number) { super(carName,numTier); }
setSpeed(speed = 0) {
super.setSpeed(speed);
}
}

29. • 인스턴스 생성후 테스트
상속
let myBus = new bus("myBus",6);
let myTruck: HappyCar = new truck("myTruck",10);
myBus.setSpeed(100);
myTruck.setSpeed(120);
console.log("현재 버스속도 : "+myBus.getSpeed());
console.log("현재 트럭속도 : "+myTruck.getSpeed());
[결과]
현재 버스속도 : 100
현재 트럭속도 : 120

30. • 선언된 변수나 메서드에 대한 사용을 강제함
인터페이스
interface AddressInterface {
addressBookName:string;
setBookName(addressBookName: string);
getBookName();
}
class AddressBook implements
AddressInterface {
addressBookName:string;
setBookName(addressBookName: string) {
this.addressBookName =
addressBookName;
}
getBookName(){
return this.addressBookName;
}
constructor() { }
}
let myAddressBook = new AddressBook();
myAddressBook.setBookName("나의 주소록");
console.log(myAddressBook.getBookName());
[결과]
나의 주소록

31. • 네임스페이스는 중복 없는 이름으로 정의한다.
네임스페이스
namespace Zoo {
export interface ZooInterface {
list: string[];
inAnimal(s: string): boolean;
getCount(pName:string):number;
}
export class HappyZoo implements
ZooInterface {
list: string[];
constructor(){
this.list=[];
}
inAnimal(s: string){
this.list.push(s);
return true;
}
(다음 페이지에 계속)

32. • 네임스페이스 내 클래스 사용
네임스페이스
//배열 인덱스마다 객체생성 가능
let zoo: { [s: string]: Zoo.ZooInterface; } = {};
zoo["daeguZoo"] = new Zoo.HappyZoo();
zoo["daeguZoo"].inAnimal("cat");
zoo["daeguZoo"].inAnimal("cat");
zoo["daeguZoo"].inAnimal("horse");
console.log("daeguZoo :
"+zoo["daeguZoo"].getCount("cat"));
//개별객체 생성가능
let seoulZoo=new Zoo.HappyZoo();
seoulZoo.inAnimal("horse");
seoulZoo.inAnimal("horse");
console.log("seoulZoo :
"+seoulZoo.getCount("horse"));
[결과]
daeguZoo : 2
seoulZoo : 2
getCount(pName:string){
let cnt:number=0;
for(var name in this.list){
if(this.list[name]==pName){
cnt++;
}
}
return cnt;
}
}
}

33. • 네임스페이스는 중첩과 노출(export)이 가능
네임스페이스
namespace Shapes {
export namespace Polygons {
export class Triangle { }
export class Square { }
}
}
import polygons = Shapes.Polygons;
let sq = new polygons.Square();

34. 고맙습니다