TypeScript / 클래스

Classes (클래스)

객체를 생성하기 위한 하나의 템플릿 역할로, ES6에서 도입된 클래스 문법을 기반으로 한다.

생성자, 속성, 메서드로 구성되어있다.

 

// 클래스 정의
class Continent {
    continentName: string;
    constructor(name: string) {
        this.continentName = name;
    }
    getContinentName() {
        return this.continentName;
    }
}

class Country extends Continent {
    name: string;
    capital: string;

    constructor(continentName: string, name: string, capital: string) {
        super(continentName) // 부모로부터 상속
        this.name = name;
        this.capital = capital;
    }

    getInfo() {
    	// 상속받은 클래스의 요소에 접근하려면 getContinentName 메소드를 통해 접근한다
        return `${this.name}, ${this.capital}, ${this.getContinentName()}`;
    }
}

// 인스턴스 생성
let country = new Country(
    'Asia', 'South Korea', 'Seoul'
);

console.log(country.getInfo()) // "South Korea, Seoul, Asia"

 

 

 

접근 제어자(Access Modifiers)

Typescript에는 클래스의 속성과 메서드의 접근 범위를 제어할 수 있는 접근 제어자가 있다.

 

- 종류

• public : 기본값, 어디서나 접근 가능
• protected : 해당 클래스 내부 및 서브클래스에서 접근 가능
• private / # (해시 이름) : 해당 클래스 내부에서만 접근 가능

 

class Continent {
// 접근 제어자
    private continentName: string;
    constructor(name: string) {
        this.continentName = name;
    }
    getContinentName() {
        return this.continentName;
    }
}

class Country extends Continent {
    name: string;
    capital: string;

    constructor(continentName: string, name: string, capital: string) {
        super(continentName) // 부모로부터 상속
        this.name = name;
        this.capital = capital;
    }

    getInfo() {
        // private의 경우에만 에러,
        // protected, public에서는 접근이 가능
        this.continentName;
        return `${this.name}, ${this.capital}, ${this.getContinentName()}`;
    }
}

 

ES6부터는 해시를 사용할 수 있다.

class Country extends Continent {
// 해시 사용
    #name: string;
    capital: string;

    constructor(continentName: string, name: string, capital: string) {
        super(continentName) // 부모로부터 상속
        this.#name = name;
        this.capital = capital;
    }

    getInfo() {
        this.continentName;
        return `${this.#name}, ${this.capital}, ${this.getContinentName()}`;
    }
}

// 인스턴스 생성
let country = new Country(
    'Asia', 'South Korea', 'Seoul'
);

country.name; // 접근 불가능!

 

 

 

인터페이스로 클래스 구조 정의

// 인터페이스 정의
interface ContinentInterface {
    getContinentName(): string
}

interface CountryInterface {
    // 지금은 name이 private(#)인 상태이므로 제외
    capital: string;
    getInfo(): string;
}

// 클래스 정의
class Continent implements ContinentInterface {
    protected continentName: string;
    constructor(name: string) {
        this.continentName = name;
    }
    getContinentName() {
        return this.continentName;
    }
}

// extends 먼저 사용, implements는 그 다음
class Country extends Continent implements CountryInterface {
    #name: string;
    capital: string;

    constructor(continentName: string, name: string, capital: string) {
        super(continentName) // 부모로부터 상속
        this.#name = name;
        this.capital = capital;
    }

    getInfo() {
        this.continentName;
        return `${this.#name}, ${this.capital}, ${this.getContinentName()}`;
    }
}

// 인스턴스 생성
let country = new Country(
    'Asia', 'South Korea', 'Seoul'
);

console.log(country.getInfo())

 

 

 

추상클래스

abstract class AbstractCountry {
    name: string;
    capital: string;
    constructor(name: string, capital: string) {
        this.name = name;
        this.capital = capital;
    }

    setup(): void {
        console.log("setup complete")
    }
    abstract displayInfo(): void;
}

// 추상 클래스는 인스턴스 사용이 불가능
// 상속받는 새 클래스를 생성해줘야됨
class MyCountry extends AbstractCountry {
    displayInfo(){
        console.log("display info called")
    }
}

const abstractCountry = new MyCountry("Germany", "Berilin")
abstractCountry.setup();
abstractCountry.displayInfo();