타입스크립트 5일차 - 클래스

타입스크립트의 객체지향 지원

제 생각은 역시 C#을 만들었고 그 전에도 많은 객체지향언어를 다룬 사람들 답게 여러가지 객체지향적인 기능을 지원합니다.
ES6 에서 클래스를 만들었지만 타입스크립트에서는 좀 더 지원합니다.
구체적으로 인터페이스(+구현), 접근제한자, final(변경불가능한 상수)를 지원합니다.

SOLID, 디자인패턴 등 여러가지 객체지향적 특징은 나중에 정리할 일이 있을것 같습니다. 물론 여기서는 말고요

클래스 선언과 객체 생성

ES6의 문법을 그대로 따라갑니다.

책 따라서 Rectangle 클래스를 만들면 바로 문법을 알 수 있습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
class Rectangle {
x: number;
y: number;

constructor(x: number, y: number) {
this.x = x;
this.y = y;
}

getArea(): number { return this.x * this.y; }
}

let rectangle = new Rectangle(1,5); //객체생성

생성된 객체는 메모리에 위치하며 객체 참조가 참조변수에 할당되는 인스턴스화를 거칩니다.

접근제한자

C#은 private, protected, Internal, public가 있지만 타입스크립트에서는 Internal을 구현하기가 어렵기 때문에 존재하지 않습니다.
즉, private은 현재 클래스에서만 접근할 수 있고 protected 자식 클래스에서 접근 가능하며 public은 다 접근할 수 있습니다.
기본적인 생성방법은 다음과 같습니다.

1
2
3
private a = 0;
protected b = 0;
public c = 0;

물론 클래스 안에서 쓰셔야 합니다.
그리고 생성자 매개변수에 접근제한자를 추가하여 멤버 변수가 되도록 하게 되는 역할도 가능합니다.

1
2
3
4
5
6
7
8
9
10
11
class Cube {
constructor(public width: number, protected length: number, private height: number) {
}
getVolume() {
return this.width * this.length * this.height;
}
}

let [pWidth, pLength, pHeight] = [1, 2, 3];
let cube = new Cube(pWidth, pLength, pHeight);
console.log(cube.getVolume());

클래스 매개변수로 width, length, height 세개를 선언해서 getvolume 메소드로 넓이를 구하는 클래스입니다.
저렇게 선언하면 실제로 width, length, height를 선언하지 않아도 클래스 변수로 쓸 수 있습니다.

private, protected를 외부에서 쓸 수 없다

추상클래스

추상메소드를 가지고 있는 클래스를 추상클래스라고 합니다.

추상클래스는 객체 생성을 할 수 없게 만들며 공통으로 사용할 로직을 정의하고 싶을 때 쓰면 됩니다만 대부분은 거의 쓸 일이 없을 것이라 생각됩니다.
추상메소드에는 abstract 키워드를 쓰며 static, 접근제한자를 쓸 수 없습니다.

인터페이스

인터페이스는 객체지향언어에서는 지원하지만 자바스크립트에서는 지원하지 않았으며 타입스크립트에 추가됐습니다.
인터페이스에는 선언만 존재하며 변수와 메소드를 선언할 수 있지만 접근 제한자는 설정할 수 없습니다. 그리고 인터페이스를 다중으로 구현이 가능합니다.

나머지 특징은 기본적으로 객체지향의 인터페이스와 같으며 간단하게 써보겠습니다.

1
2
3
4
5
6
interface Icar {
name: string;
}

let mCar: Icar = { name: "car" };
console.log(mCar);

위의 코드에서 인터페이스는 타입스크립트만의 특징이므로 컴파일을 하면 날라가서 필요한 코드만 남게 됩니다.

1
2
let mCar = { name: "car" };
console.log(mCar);

이런식으로 컴파일됩니다.

get, set

C#에서는 POCO 형식으로, 자바에서는 POJO 형식으로 대부분 쓰고 있는 형식입니다.
클래스 내부변수를 선언하고 get,set 메소드를 사용하여 변수안에 값을 넣고 빼는 방식입니다.
언어 사양에 의해 강제되는 것 이외의 제한 사항에 구속받지 않는 객체입니다.

사용하는 이유는 간단하기 때문에 다른 라이브러리, 인터페이스 또는 주석에 의존하지 않습니다. 이렇게하면 여러 프로젝트 유형 (웹, 데스크탑, 콘솔 등)에서 재사용 할 수있는 가능성이 높아집니다.
타입스크립트도 이러한 형식으로 쓸 수 있도록 ES6 이후로 Object를 지원합니다.

저는 VSCODE에서 사용한다면 TypeScript's Getters and Setters Object Oriented Programming Style 같은 자동으로 만들어주는 get,set generator 플러그인을 추천합니다.
이클립스나 다른 툴이라면 자동으로 만들어주는 툴이 내장되어 있으니 바로 쓰시면 될 것 같습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
class student {
private sName: string;

//generator style
public getSName(): string {
return this.sName;
}

public setSName(sName: string): void {
this.sName = sName;
}

//ES6 style
get name() {
return this.sName;
}
set name(sName) {
this.sName = sName;
}
}

여러분이 원하는 스타일로 쓰시면 됩니다.

static과 readonly

객체지향 언어와 같이 static을 사용하면 객체생성없이 메소드를 사용할 수 있도록 해줍니다.
이러한 키워드를 사용하여 그 메소드에 하나만 있어야 할 변수나 클래스에 씁니다.

마지막으로 readonly를 사용하여 타 언어의 final과 같은 효과를 낼 수 있습니다.
즉, 상수에서 사용합니다.

const와 다른 점이 몇가지 있습니다.

  • readonly는 초기화가 선택입니다.
  • 값의 재할당이 가능합니다.
  • 컴파일 후 사라집니다.

사용처는 인터페이스의 멤버 변수, 클래스의 멤버 변수에 사용합니다.

결론

객체지향 형식으로 쉽게 코딩할 수 있도록 도와주는 클래스와 기타 기능에 대해 알아 봤습니다.
다음에는 8장 모듈로 뵙겠습니다.