TypeScript : ES6 Class와 TS Class

holymoly.jun·2021년 7월 20일

TypeScript로 React 다루기

목록 보기

2/4

이 글은 TypeScript : 선언 (1편) 의 다음 편입니다.

class는 이미 ES6에 추가된 JavaScript의 문법이다. 그러나 TypeScript에서 몇가지 추가된 문법이 존재한다. ES6의 class의 특징과 TypeScript에는 어떤 것을 할 수 있는지 알아보자.

class(클래스)란 ?

class(클래스)란, 객체 지향 프로그래밍을 하기 위한 문법이다. 객체 지향 프로그래밍은 모든 데이터를 객체로 바라보며, 객체의 상태와 행동으로 구분지어 개발한다.

우리는 class에서 객체의 상태와 행동을 정의할 수 있기 때문에 객체 지향 프로그래밍에서 class는 필수적인 문법이다.

1. class 용어 정리와 특징

객체를 선언하는 과정을 인스턴스화 라고 하며, 이렇게 선언된 클래스 타입의 객체를 인스턴스라고 한다.
new 키워드를 통해 인스턴스를 생성한다.
객체의 행동은 메소드 로 정의한다.
객체의 상태(클래스에 표함된 변수)는 필드 로 정의한다.
클래스에 생성된 객체는 메모리에 즉시 생성되지만, 인스턴스 변수는 아직 초기화 되지 않는다. 이를 위해, 객체 생성과 동시에 인스턴스 변수를 초기화하는 메소드를 constructor(생성자) 라고 한다.
class명은 보통 대문자로 시작한다.

// 기존 ES6
class Developer {
    //인스턴스 변수 초기화 메소드, contructor
    constructor(skill, ability) {
        this.skill = skill;
        this.ability = ability;
    }

    //클래스의 행동을 정의하는, 메소드
    getSkill() {
        return this.skill;
    }
    getAbility() {
        return this.ability;
    }
}

const developer = new Developer('TypeScript', 10);
developer.getSkill(); // "TypeScript"
developer.getAbility(); // 10

2. TS, Contructor

TypeScript에서는 ES6와 달리, contructor 메소드에서 받은 파라미터의 데이터 타입을 지정해 주어야 한다.

// TypeScript
class Developer {
    //클래스의 상태를 기억하는, 필드
    skill: string; // 멤버 변수 
    ability: number; // 멤버 변수

    // 데이터 타입 지정하지 않으면, Error !
    constructor(skill: string, ability: number) {
        this.skill = skill;
        this.ability = ability;
    }

    //...
}

3. TS, 접근 제어자 : public과 private

class 내의 멤버 변수들은 public이 default이기 때문에 위의 class 밖에서 누가나 접근할 수 있다. TypeScript에서는 이런 문제를 방지하기 위해 접근 제어자를 추가했다.

// 기존 ES6
class Developer {
    skill: string;

    //...
}

const developer = new Developer('TypeScript');
console.log(developer.skill); // 'TypeScript'

3.1 public

멤버변수의 default 값인 constructor 초기화 과정에서 public 키워드를 사용하면 코드를 줄일 수 있다.

// TypeScript
class Developer {
    // 멤버 변수 선언 과정 생략...

    constructor(public skill: string, public ability: number) {
        this.skill = skill;
        this.ability = ability;
    }

    //...
}

3.2 private

멤버 변수를 private으로 선언하게 되면 class 외부에서 접근하는 것을 막을 수 있다. private으로 선언된 멤버 변수들은 class 내에서만 사용할 수 있다. ~~(그러나 TS에서 JS로 번역되는 과정에서 모두 public으로 바뀌는게 함정..)~~

// TypeScript
class Developer {
    constructor(private skill: string, private ability: number) {
        this.skill = skill;
        this.ability = ability;
    }

    //...
}

const developer = new Developer('TypeScript', 10);
console.log(developer.skill); // Error !

4. 상속 : extends과 implements

객체 지향 프로그래밍에서는 상위 객체를 상속 받아 사용할 수 있다. 상속을 하기 위해서는 extends 키워드와 impements 키워드를 사용할 수 있다.

extends : 상위 객체를 '상속'받아 상위 객체의 필드와 메소드를 모두 사용할 수 있다.
implements : 상위 객체(interface)를 구현하라는 의미이다. (오버라이드)

4.1 extends (상위 객체 상속)

class -> class 상속에 사용된다.
interface -> interface 상속에 사용된다.
TypeScript에서는 다중 상속을 지원하지 않는다.
(ex. class Dev extends Person, Animal)
파생 클래스에서 contructor를 정의하려면 super() 메소드를 호출해주어야한다.

/*** class -> class 상속 ***/
class Person {
    name: string;

    constructor(name: string) {
        this.name = name;
    }
    getName() {
        console.log(this.name);
    }
}

//Person 객체의 필드와 메소드를 모두 사용할 수 있다.
class Developer extends Person {
    constructor(name: string) {
        super(name); //패생 클래스에서 contructor를 정의하려면 super()를 꼭 호출해야한다.
    }
}

const developer = new Developer('jbee');
developer.getName();

/*** interface -> interface 상속 ***/
interface Person {
    name: string;
    age?: number; //없어도 되는 데이터 타입은 ?로 정의한다.
}
interface Developer extends Person {
    skills: string[];
}

const designer: Person = {
    name: '최준영',
    age: 21,
};
const developer: Developer = {
    name: '최준영',
    skills: ['React', 'TS'],
};

const myTeam: Person[] = [designer, developer];

4.2 implements (상위 객체 구현)

class에서 interface를 구현하는데 사용된다.
상위 객체의 필드와 메소드를 반드시 오버라이드 해주어야한다.
다중 상속을 지원한다. (ex. class Son implements Man, Person )

interface Person {
    name: string;
    getAbility(): string; // 사람이라면, 능력은 반드시 가지고 있어야하며, 반환값은 string이어야 한다.
}

class Developer implements Person {
    name: string;
    skill: string;

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

    getAbility() {
        return this.skill;
    }
}

class Designer implements Person {
    name: string;
    tool: string;

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

    getAbility() {
        return this.tool;
    }
}

//interface를 배열로 선언도 가능하다.
const myTeam: Person[] = [new Developer('jun', 'TypeScript'), new Designer('anna', 'Figma')];

myTeam.forEach((person) => {
    console.log(person.name, person.getAbility());
}); // "jun", "TypeScript", "anna", "Figma"