Angular2 가기전 Type script소개

Type script
이것은 무엇을까?
권동준

Type script 란?
1. MS에서 만든 scrip로 C++/C#과 유사하다.
2. 타입스크립트는 자바스크립트 슈퍼셋 언어다.
3. 모든 브라우저, 호스트, 모든 OS에서 호환이 되며, 오픈소스다.
4. 확장성을 위해 ts를 js로 컴파일 하여 사용한다.
5. ES6에 기반을 두고 있다.
6. 많은 IDE 에서 지원을 하고 있다.

설치
설치는 총 2가지의 방법이 있다.
1. Node Js를 이용한 설치
npm install –g typescript
2. Visual Studio plugins
Visual Studio 2015, 2013, code
Sublime Text
Atom
Eclipse
Emacs
WebStorm
Vim

타입 주석(Type annotation)
아래와 같이(: 변수타입) 타입 주석(Type annotations)을 사용한다.
1. boolean
2. number
3. string
4. array
- var array: number[] = [1,2,3];
- var array: Array<number> = [1,2,3];
5. enum
- C#과 Object-c 같은 언어와 마찬가지로 enum제공
- 값의 할당이 없으면 0으로 시작.
- 시작 값의 변경은 첫번째 변수에만 값을 할당해주면 된다.
* enum Week {sunday = 1, monday, tuesday}
- enum값 참조
* var week: Week = Week.Monday -> 1로 출력 (시작이 0일경우)
* var day: string = Weel[1] -> monday 출력
6. any
7. void (함수 반환에서 사용)
var 변수명 : 변수타입 = 값
function getter() : string {
return “hello world”
}
1. 변수 값 선언
2. 함수의 리턴
function getter(person: string) : string {
return `hello ${person}`
}
3. 함수의 인자값

인터페이스(interface)
변수 값의 이름과 타입을 정의해주는 역할을 한다.
아래와 같이 진행 했을 시 size가 없어서 typescript에서 에러는 나지만 size 값까지 잘 출력이 된다.
인터페이스 객체를 속성으로 담을 수도 있지만 함수 자체를 속성으로 담을 수도 있다.
interface SearchFunc {
(source: string, subString: string): boolean;
}
let mySearch: SearchFunc;
mySearch = (source: string, subString: string) => {
var result = source.search(subString);
if (result == -1) {
return false;
}
else {
return true;
}
};
console.log(mySearch("aaaab", "b"));
var mySearch; // interface call
mySearch = function (source, subString) {
var result = source.search(subString);
if (result == -1) {
return false;
}
else {
return true;
}
};
console.log(mySearch("aaaab", "b"));
//# sourceMappingURL=helloWord.js.map
function printLabel(labelledObj) {
console.log(labelledObj.label);
}
var myObj = { size: 10, label: "Size 10 Object" };
printLabel(myObj);
interface LabelledValue {
label: string;
}
function printLabel(labelledObj: LabelledValue) {
console.log(labelledObj.label);
}
let myObj = {size: 10, label: "Size 10 Object"};
printLabel(myObj);

클래스(Class)
기존 자바스크립트에 있는 function & prototy 기반의 상속은
OOP를 좀더 편하게 해주는 거라고 생각하면 된다.
class Greeter {
/* 타입어노테이션이 추가 된 것 말고는 ES6와 똑같다. */
greeting: string;
constructor(message: string) {
this.greeting = message;
}
greet() {
return "Hello, " + this.greeting;
}
}
let greeter = new Greeter("world");
console.log(greeter.greet());
var Greeter = (function () {
function Greeter(message) {
}
Greeter.prototype.greet = function () {
return "Hello, " + this.greeting;
};
return Greeter;
}());
var greeter = new Greeter("world");
console.log(greeter.greet());

클래스(Class) - 상속
class Animal {
name:string;
constructor(theName: string) {
this.name = theName;
}
/* meters값이 없으면 0로 셋팅 */
move(meters: number = 0) {
console.log(this.name + " moved " + meters + "m.");
}
}
class Snake extends Animal {
constructor(name: string) {
super(name);
}
/* meters값이 없으면 5로 셋팅 */
move(meters = 5) {
console.log("Slithering...");
super.move(meters);
}
}
let snake = new Snake('test');
snake.move();
기본적인 상속과 동일하게 메소드 오버라이드부터 super등의 키워드 사용가능하다.

모듈(Module)
관련된 인터페이스, 클래스, 함수 등을 묶어서 관리해준다.
export module Sayings {
export class Greeter {
greeting: string;
constructor(message: string) {
}
greet() {
return `Hello, ${this.greeting}`;
}
}
}
helloWord.ts
import {Sayings} from "./helloWord";
let sayings = new Sayings.Greeter("Kwon");
console.log(sayings.greet());
import.ts
결과 값으로 Hello, Kwon 출력

제네릭(Generics)
처음부터 데이터 타입을 정해놓지 않고 임의타입으로 명시해준 후 나중에
직접적으로 해당 구문을 사용할 때 지정하여 사용하는 형태
function identity<T>(arg: T): T {
return arg;
}
let myArgNumber = identity<number>(32);
console.log(`${typeof myArgNumber} type: ${myArgNumber}`); // number type: 32;
let myArgString = identity<string>("32");
console.log(`${typeof myArgString} type: ${myArgString}`); // string type: 32;

tsconfig.json
Typescript 1.5부터 추가된 것 Typescript 설정과 Exclude 하고 싶은 폴더나 파일, Compile 옵션, File 옵션등을 설정 할 수 있다.
TypeScript의 컴파일러인 tsc 명령 수행시 참조한다.
{
"compilerOptions": {
"module": "commonjs",
"target": "es5",
"sourceMap": true
},
"exclude": [
"node_modules"
],
"files": [
"core.ts",
"sys.ts",
"types.ts",
"scanner.ts",
"parser.ts",
"utilities.ts"
]
}
http://www.typescriptlang.org/docs/handbook/tsconfig.json.html

Typings
쉽게 말해서 외부라이브로리 혹은 프레임워크를 좀더 편하게 쓸 수 있게 가이드 하는 역할이다.
- tsd라는 것을 사용하였지만 지금은 Typings를 사용하고 있다. angular2.0에서도 Typings를 사용하고 있다.
1. typings 설치
- npm install typings –g
2. typings 사용한다고 정의
- typings init
3. 사용할 typings 설치
- typings install jquery --ambient --save

Angular2 시작하기
1. NodeJs 설치
2. 프로젝트 만들기(폴더 만들기)
3. tsconfig.json 설정(타입스크립트 설정)
4. typings.json 설정 (typings 설정)
5. package.json 설정 (npm 설정)
6. npm install
https://angular.io/docs/ts/latest/quickstart.html

Angular2 가기전 Type script소개

Recommended

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to Angular2 가기전 Type script소개 (20)

Angular2 가기전 Type script소개