�ݺ�ߣ

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

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

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

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)

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

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

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

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

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

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

타입스크립트의 차별점

• 명시적인 자료형 선언가능
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) 형변환은 예측할 수
없는 오류를 만들어 냄.
결과 : 타입이 다른 경우 더
하기 에러가 발생함! (오류가
능성 사전제거)

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

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

타입스크립트 개발준비

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

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

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

타입스크립트 중요문법

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

• 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

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

• 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;

• 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 키워드를 이용하여, 선언
후에 대해서만 명확한 스코
프를 가지며, 선언전 변수 호
출시 에러가 발생한다.

• 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개 입니다.

• 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 {
number) { super(carName,numTier); }
setSpeed(speed = 0) {
super.setSpeed(speed);
}
}
class truck extends HappyCar {
number) { super(carName,numTier); }
setSpeed(speed = 0) {
super.setSpeed(speed);
}
}

• 인스턴스 생성후 테스트
상속
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

• 선언된 변수나 메서드에 대한 사용을 강제함
인터페이스
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());
[결과]
나의 주소록

• 네임스페이스는 중복 없는 이름으로 정의한다.
네임스페이스
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;
}
(다음 페이지에 계속)

• 네임스페이스 내 클래스 사용
네임스페이스
//배열 인덱스마다 객체생성 가능
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;
}
}
}

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

�ݺ�ߣ

Angular2를 위한 타입스크립트

More Related Content

Angular2를 위한 타입스크립트

Editor's Notes