이 내용은 코드앙마의 타입스크립트 강좌를 정리해놓은 자료이다.
타입스크립트 클래스
Car 클래스를 하나 만든다.
class Car {
constructor(color) {
this.color = color;
}
start() {
console.log("start")
}
}
const bmw = new Car("red");이 코드는 javascript에서는 문제가 없다. 하지만 typescript에서는 오류가 발생한다.
typescript에서 클래스를 만들 때 멤버변수는 미리 선언해줘야 한다.
class Car {
color: string;
constructor(color: string) {
this.color = color;
}
start() {
console.log("start")
}
}
const bmw = new Car("red");멤버변수를 미리 선언하지 않는 방법도 있다. 생성자에서 public 혹은 readonly를 지정하면 된다.
// color: string;
constructor(public color: string) {
this.color = color;
}typescript에서는 접근 제한자를 지원한다. (public, private, protected)
아무것도 지정하지 않으면 public이 된다.
접근 제어자
class Car {
name: string = 'car';
color: string;
constructor(color: string) {
this.color = color;
}
start() {
console.log('start');
console.log(this.name);
}
}
class Bmw extends Car {
constructor(color: string) {
super(color);
}
showName() {
console.log(this.name);
}
}
const z4 = new Bmw('black');위의 코드에서 Bmw의 this.name은 Car의 name을 가져온다. (public으로 지정한 것과 동일)
private name: string으로 지정하면 Bmw에서 사용을 하지 못한다.
private을 지정하는 또 다른 방법은 #을 사용하는 것이다.
class Car {
#name: string = 'car';
color: string;
constructor(color: string) {
this.color = color;
}
start() {
console.log('start');
console.log(this.#name);
}
}private과 #의 기능상 차이는 없다. 편한 방법대로 사용하면 된다.
다음은 protected를 지정하는 방법이다.
class Car {
protected name: string = 'car';
color: string;
constructor(color: string) {
this.color = color;
}
start() {
console.log('start');
console.log(this.name);
}
}
class Bmw extends Car {
constructor(color: string) {
super(color);
}
showName() {
console.log(this.name);
}
}
const z4 = new Bmw('black');
console.log(z4.name);protected name: string 으로 사용을 하고 상속받은 클래스에서 사용이 가능하다. 하지만 외부에서는 사용을 할 수 없다.
const z4 = new Bmw('black');
console.log(z4.name); // 여기서 오류protected는 자식클래스 내부에서는 사용할 수 있지만 인스턴스에서는 참조할 수 없다.
다시 정리하면
- public - 자식 클래스, 클래스 인스턴스 모두 접근 가능
- protected - 자식 클래스에서 접근 가능
- private - 해당 클래스 내부에서만 접근 가능
static 프로퍼티
다음은 static 프로퍼티이다
class Car {
name: string = 'car';
color: string;
static wheels = 4; // static 변수 선언
constructor(color: string) {
this.color = color;
}
start() {
console.log('start');
console.log(this.name);
console.log(this.wheels); // 오류
}
}
class Bmw extends Car {
constructor(color: string) {
super(color);
}
showName() {
console.log(this.name);
}
}
const z4 = new Bmw('black');
console.log(z4.wheels); // 오류static은 this를 사용하는 것이 아니라 클래스명으로 사용해야 한다.
class Car {
name: string = 'car';
color: string;
static wheels = 4;
constructor(color: string) {
this.color = color;
}
start() {
console.log('start');
console.log(this.name);
console.log(Car.wheels); // Car로 접근
}
}
class Bmw extends Car {
constructor(color: string) {
super(color);
}
showName() {
console.log(this.name);
}
}
const z4 = new Bmw('black');
console.log(Car.wheels); // Car로 접근추상 클래스
다음은 추상 클래스이다. class 앞에 abstract를 붙여주면 된다.
abstract class Car {
color: string;]
constructor(color: string) {
this.color = color;
}
start() {
console.log('start');
}
}
const car = new Car('red'); // 오류추상 클래스는 new를 사용해서 객체를 만들 수 없다. 상속을 통해서만 사용이 가능하다.
abstract class Car {
color: string;]
constructor(color: string) {
this.color = color;
}
start() {
console.log('start');
}
abstract doSomething() : void; // 추상 메소드 정의
}
class Bmw extends Car {
constructor(color: string) {
super(color);
}
doSomething() { // 추상 메소드 구현
console.log('doSomething');
}
}
const z4 = new Bmw('black');특정 기능을 하는 함수를 abstract로 만들고 이를 상속받는 클래스에서 구현해주어야 한다.
