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 이전
타입스크립트의 역사
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과 같은 부자연스러운
표현식이 존재하며
표현이 불명확하다.
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개 입니다.
유럽 컴퓨터 제조협회 = European Computer Manufacturers Association
ECMA 262
http://www.ecma-international.org/publications/files/ECMA-ST-ARCH/ECMA-262,%201st%20edition,%20June%201997.pdf
ECMA-262 Ed. 1 자바스크립트와 Jscript간 차이를 좁히기 위해 제정
ES2016 (ES7)
ES2015 (ES6)
ES5
Angular CLI는 angular앱을 위한 커맨드 라인 인터페이스이다.
Jspm은 package manager이다.
2013년 이후 이클립스에서 Plugin 방식으로 타입스크립트 지원, Emax, Vim, Sublime 에서도 지원
"Microsoft augments JavaScript for large-scale development".InfoWorld. IDG. 1 October 2012. Retrieved 26 April 2015.
Jump up^ Turner, Jonathan (2 April 2014). "Announcing TypeScript 1.0".TypeScript Language team blog. Microsoft. Retrieved 26 April 2015.
https://blogs.msdn.microsoft.com/typescript/2014/04/02/announcing-typescript-1-0/
자바스크립트의 암묵적(implicit) 형변환은 예측할 수 없는 오류를 만들어 냄
"Microsoft augments JavaScript for large-scale development".InfoWorld. IDG. 1 October 2012. Retrieved 26 April 2015.
Jump up^ Turner, Jonathan (2 April 2014). "Announcing TypeScript 1.0".TypeScript Language team blog. Microsoft. Retrieved 26 April 2015.
https://blogs.msdn.microsoft.com/typescript/2014/04/02/announcing-typescript-1-0/
"Microsoft augments JavaScript for large-scale development".InfoWorld. IDG. 1 October 2012. Retrieved 26 April 2015.
Jump up^ Turner, Jonathan (2 April 2014). "Announcing TypeScript 1.0".TypeScript Language team blog. Microsoft. Retrieved 26 April 2015.
https://blogs.msdn.microsoft.com/typescript/2014/04/02/announcing-typescript-1-0/