Type Script
배우고 생각하지 않으면 얻음이 없고, 생각하기만 하고 배우지 않으면 위태롭다.
Type Script 의 역사
Java Script의 등장
1995년 넷스케이프사의 브렌던 아이크(Brendan Eich)에 의하여 자사의 웹브라우저인 Navigator 2에 탑재하기 위하여 개발 초창기의 Javascript는 웹페이지의 보조적인 기능을 수행하는 한정적인 용도로만 사용함.
TypeScript의 등장
Ajax와 HTML5의 등장 → SPA가 대세 → Javascript의 역할이 중요해짐.
정제되어있지 않은 Javascript의 태생적 한계로인하여 장점도 있었지만 단점이 많아 불편함.
Javascript의 특징
Prototype-based Object Oriented Language
Scope & this
동적타입(Dynamic typed) 또는 느슨한타입(Loosely typed) 언어
기존 C-base의 클래스 기반 객체지향 언어에 익숙한 개발자들의 혼란
혼란을 극복하고자 CoffeeScript, Dart, Haxe 등의 대체언어의 등장
Typescript의 등장
TypeScript
C#의 창시자인 덴마크 출신 소프트웨어 엔지니어 아네르스 하일스베르(Anders Hejlsberg)가 Microsoft에서 2012년에 발표한 오픈 소스
AltJS중 하나
확장자는 *.ts를 사용하며 compile의 결과물로 *.js를 출력, runtime에는 javascript를 구동
Javascript(ES5)의 상위확장(Superset) : ES5의 문법을 그대로 사용 가능
정적 타이핑을 지원하며 ES6(ECMAScript 2015)의 클래스, 모듈 등과 ES7의 Decorator등을 지원
- ES6의 새로운 기능들을 사용하기 위해 Babel과 같은 별도 Transpiler를 사용하지 않아도 ES6의 새로운 기능을 기존의 Javascript Engine(Web Browser, Node.js)에서 실행 가능
- ECMAScript의 업그레이드에 따른 새로운 기능을 지속적으로 추가 예정 (표준에 가까움)
TypeScript의 장점
Compile 단계에서 오류를 포착 할 수 있다.
//Javascript
function sum (a, b) {
return a + b;
}
console.log( sum( 1, 2 ) ); // 3
console.log( sum( 'x', 'y' ) ); // 'xy'
//TypeScript
function sum (a: number, b: number) {
return a + b;
}
console.log( sum( 1, 2 ) ); // 3
console.log( sum( 'x', 'y' ) ); // error TS2345: Argument of type '"x"' is not assignable to parameter of type 'number'
IDE를 포함한 다양한 tool의 기능을 활용 할 수 있다.
다양한 도구 에 Type 정보를 제공함으로써 높은 수준의 인텔리센스(IntelliSence), Code Assistant, Type Check, Refectoring 등을 지원 받을 수 있다.
강력한 OOP 지원
Interface, Generic 등 강력한 OOP 지원
크고 복잡한 프로젝트의 코드 기반을 쉽게 구성하도록 도움
진입장벽을 낮춤
ES6 / ES Next 지원, Angular
TypeScript - HelloWorld
설치
# npm install
$ npm install -g typescript
# check Version
$ tsc -v
예제
// Person.js
class Person {
private name: string;
construtor (name: string){
this.name = name;
}
sayHello() {
return 'Hello, ' + this.name;
}
}
const person = new Person('Kim');
console.log(person.sayHello());
변환 ( Transpiling )
# 변환 시에 확장자 생략 가능
$ tsc Person
# 여러 파일을 한 번에 변환 하는 경우
$ tsc Person Student Teacher
# 와일드 카드 ( *.ts ) 를 사용
$ tsc *.ts
# 변환될 javascript의 버전을 선택하려면 컴파일 옵션에 --target 또는 -t 를 사용한다.
$ tsc Person -t es6
# 변환 결과로 Javascript 파일(Person.js)이 생성된다.
# 실행
$ node Person
Sample Code
// Person
var Person = /** @class */ (function () {
function Person (name) {
this.name = name;
}
Person.prototype.sayHello = function () {
return 'Hello, ' + this.name;
};
return Person;
}());
var person = new Person( 'Lee' );
console.log( person.sayHello() );
Type Script Handbook
Types By Inference : 타입 추론
let helloWorld = "Hello World";
/*
* 타입에 의한 추론
- 명시적으로 데이터의 타입을 지정하지 않더라도 묵시적으로 형을 인식하여 처리된다.
*/
// ^ = let helloWorld: string
Defining Types : 타입 정의
/*
자바스크립트에서 타입을 자동으로 인식하여 형을 지정하기 어려운 경우들이 있는데,
이런 경우를 지원하기 위해서 타입스크립트에서는 어떤 타입을 써야만 하는지를 지정하게 할 수 있다.
*/
const user = {
name : "Hayes",
id : 0,
};
interface User {
name : string;
id : number;
}
const user : User = {
name : "Hayes",
id : 0,
}
// 자바스크립트에 Class가 도입된 이후로는 Class를 사용하여 interface를 선언할 수 있다.
interface User {
name : string;
id : number;
}
class UserAccount {
name : string;
id : number;
constructor(name: string, id: number){
this.name = name;
this.id = id;
}
}
const user: User = new UserAccount("Murphy", 1);
// 타입스크립트를 이용해 반환되는 값의 유형을 정의하고자 할 경우, 아래와 같이 사용
function getAdminUser() : User {
// ...
}
// 타입스크립트를 이용해 파라미터를 전달받고 싶은 경우, 아래와 같이 사용
function deleteUser(user : User) {
// ...
}
Composing Types : 타입 구성
// 변수에 대해서 실제 할당 가능한 타입 만을 정의하여 사용하고 싶은 경우, 함수의 파라미터 또는 변수 선언에서 아래와 같이 사용할 수 있다.
type MyBool = true | false;
type WindowStates = "open" | "closed" | "minimized";
type LockStates = "locked" | "unlocked";
type OddNumbersUnderTen = 1 | 3 | 5 | 7 | 9;
function getLength( obj : string | string[] ){
return obj.length;
}
// 함수 내에서 서로 다른 유형의 타입을 하나의 파라미터로 정의하여 typeof를 이용해서 자신의 상황에 맞게 반환할 수 있다.
function wrapInArray(obj: string | string[] ){
if ( typeof obj === "string" ) {
return [obj];
}else{
return obj;
}
}