TypeScript 사용법

# Classes 클래스

일반적인 Point 클래스입니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
class Point {
x: number;
y: number;
constructor(x: number, y: number) {
this.x = x;
this.y = y;
}
add(point: Point) {
return new Point(this.x + point.x, this.y + point.y);
}
}
var p1 = new Point(0, 10);
var p2 = new Point(10, 20);
var p3 = p1.add(p2); // {x:10,y:30}

위에 클래스는 Typescript Compile 명령을 통해 ES5에서 아래와 같이 Javascript를 생성합니다.

1
tsc Point.ts
Point.js
1
2
3
4
5
6
7
8
9
10
11
12
13
var Point = (function () {
function Point(x, y) {
this.x = x;
this.y = y;
}
Point.prototype.add = function (point) {
return new Point(this.x + point.x, this.y + point.y);
};
return Point;
}());
var p1 = new Point(0, 10);
var p2 = new Point(10, 20);
var p3 = p1.add(p2); // {x:10,y:30}

# Inheritance 상속

extends 라는 키워드를 통해 한개의 클래스를 상속 받을 수 있습니다.

1
2
3
4
5
6
7
8
9
10
11
12
class Point3D extends Point {
z: number;
constructor(x: number, y: number, z: number) {
super(x, y);
this.z = z;
}
// 부모의 function도 override가 가능합니다.
add(point: Point3D) {
var point2D = super.add(point); // 부모 클래스는 super로 호출가능
return new Point3D(point2D.x, point2D.y, this.z + point.z);
}
}

# Statics

TypeScript에서는 클래스의 모든 인스턴스에서 공유되는 static 속성도 지원합니다.

1
2
3
4
5
6
7
8
9
10
class Something {
static instances = 0;
constructor() {
Something.instances++;
}
}
var s1 = new Something();
var s2 = new Something();
console.log(Something.instances); // 2

# Access Modifiers 접근제한

TypeScript에서는 public, private, protected를 사용할 수 있습니다.

물론 생성된 js에서는 의미가 없지만 컴파일시에 에러를 발생시켜 잘못 사용하는것을 막을 수 있습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
class FooBase {
public x: number;
private y: number;
protected z: number;
}
// EFFECT ON INSTANCES
var foo = new FooBase();
foo.x; // okay
foo.y; // ERROR : private
foo.z; // ERROR : protected
// EFFECT ON CHILD CLASSES
class FooChild extends FooBase {
constructor() {
super();
this.x; // okay
this.y; // ERROR: private
this.z; // okay
}
}

# Constructor 생성자

생성자는 반드시 필요하지 않습니다.

1
2
class Foo {}
let foo = new Foo();

클래스 내 멤버 변수가 있고 아래와 같이 초기화 할 수 있습니다.

1
2
3
4
5
6
class Foo {
x: number;
constructor(x:number) {
this.x = x;
}
}

또 생성자에서 접근제한(public, private, protected)을 이용해서 자동으로 생성할 수 있습니다.

1
2
3
4
class Foo {
constructor(public x:number) {
}
}

# 속성 초기화

생성자 밖에 코드에서 해당 클래스의 다른 변수들을 초기화 할 수 있습니다.

1
2
3
4
5
6
class Foo {
members = []; // 생성자가 아닌 밖에서 직접 초기화
add(x) {
this.members.push(x);
}
}

# 참고자료

TypeScript Deep Dive

Share