[Typescript] 클래스

이번에 소개할 구문은 클래스입니다. 자바와 비슷한 클래스 키워드들을 제공하고 있습니다.

---

1. 클래스 선언

인터페이스처럼 클래스도 class 키워드로 선언합니다.

class {
  [접근 지정자] 속성명: 타입;
}

class Student {
    public name: string;
    public id: number;
}

const std1: Student = new Student();

std1.name = 'ake';
std1.id = 1;

클래스는 new 키워드로 인스턴스를 만들어서 사용하고, .연산자를 통해 속성이나 메소드에 접근할 수 있습니다.

클래스의 속성에는 접근 지정자를 붙일 수 있는데, 다른 언어들처럼 public, protected, private를 지원하며, 생략할 경우에는 public 속성을 가집니다.

• public: 모두가 속성에 접근이 가능
• protected: 자기 자신과 상속받은 클래스에서만 접근 가능
• private: 자기 자신만 접근 가능

 

또한, es5에서 클래스와 함께 추가된 생성자 키워드인 constructor로 생성자를 만들 수 있습니다.

class Student {
    public name: string;
    public id: number;

    constructor(name: string, id: number) {
        this.name = name;
        this.id = id;
    }

}

const std1: Student = new Student('ake', 1);

여기서 더 나아가서 생성자 매개변수 앞에 접근 지정자를 붙이면, 해당 매개변수의 이름을 가진 속성을 클래스에 선언된 것 처럼 이용할 수 있습니다. 위의 코드는 아래와 같이 고칠 수 있습니다.

class Student {
    constructor(public name: string, public id: number) {}
}

const std1: Student = new Student('ake', 1);

 

추가적으로 타입스크립트 클래스의 속성에는 static 키워드를 통해 정적 속성을 부여할 수 있습니다.

정적 속성이란 인스턴스 생성 없이 바로 접근 가능한 것을 의미하고, 인스턴스를 통해 접근 할 수 없는 속성을 의미합니다.

class 클래스명 {
  static 속성명: 타입;
}

 

 

 

2. 인터페이스

이전 포스트에서 다룬 인터페이스를 implements 키워드를 통해 클래스에 연결할 수 있습니다.

class 클래스명 implements 인터페이스명 {}

interface IStudent {
    name: string;
    id?: number;
}

class Student implements IStudent {
    name: string;
    id: number;
}

//또는

interface IStudent {
    name: string;
    id?: number;
}

class Student implements IStudent {
    constructor(public name: string, public id: number) {
    }
}

 

 

 

3. 추상 클래스

타입스크립트는 abstract 키워드를 이용한 추상클래스도 지원합니다.

추상클래스는 클래스의 공통적인 부분만을 뽑아서 만든 클래스로, 인스턴스 생성이 불가능한 클래스입니다.

abstract class 클래스명 {}

abstract class AbstractStudent {
    abstract name: string;
    abstract age: number;
}

 

 

 

4. 상속

마찬가지로 extends를 통한 클래스 상속도 지원합니다.

class 클래스명 extends 상위클래스 {}

abstract class AbstractStudent {
    abstract name: string;
    abstract age: number;
}

class RealStudent extends AbstractStudent {
    age: number;
    name: string;
}