04. 클래스

https://poiemaweb.com/typescript-class

 

 

ES6 문법

기존 프로토타입 기반 객체지향 언어보다 클래스 기반 언어에 익숙한 개발자가 보다 빠르게 학습할 수 있는 단순명료한 새로운 문법을 제시하고 있다.  사실 여기서의 클래스도 함수이고 기존 프로토타입 기반 패턴이다. 

 

1. 클래스 정의

• ES6 클래스는 클래스 몸체에 메소드만을 포함할 수 있다. 
• 생성자 (constructor) 내부에서 클래스 프로퍼티를 선언하고 초기화한다.

// person.js

class Person {

  constructor(name) {

    // 클래스 프로퍼티의 선언과 초기화

    this.name = name;

  }

  walk() {

    console.log(`${this.name} is walking.`);

  }

}

 

 

Typescript 클래스는 클래스 몸체에 클래스 프로퍼티를 사전 선언하여야 한다.

// person.ts

class Person {

  // 클래스 프로퍼티를 사전 선언하여야 한다

  name: string;

  constructor(name: string) {

    // 클래스 프로퍼티수에 값을 할당

    this.name = name;

  }

  walk() {

    console.log(`${this.name} is walking.`);

  }

}

const person = new Person('Lee');

person.walk(); // Lee is walking

---

 

2. 접근 제한자

Typescript 클래스는 클래스 기반 객체 지향 언어가 지원하는 접근 제한자(Access modifier) public, private, protected 를 지원하며 의미 또한 기본적으로 동일하다. 접근 제한자를 생략한 클래스 프로퍼티와 메소드는 암묵적으로 public이 선언된다. 

 

class Foo {

  public x: string;

  protected y: string;

  private z: string;

  constructor(x: string, y: string, z: string) {

    // public, protected, private 접근 제한자 모두 클래스 내부에서 참조 가능하다.

    this.x = x;

    this.y = y;

    this.z = z;

  }

}

const foo = new Foo('x', 'y', 'z');

// public 접근 제한자는 클래스 인스턴스를 통해 클래스 외부에서 참조 가능하다.

console.log(foo.x);

// protected 접근 제한자는 클래스 인스턴스를 통해 클래스 외부에서 참조할 수 없다.

console.log(foo.y);

// error TS2445: Property 'y' is protected and only accessible within class 'Foo' and its subclasses.

// private 접근 제한자는 클래스 인스턴스를 통해 클래스 외부에서 참조할 수 없다.

console.log(foo.z);

// error TS2341: Property 'z' is private and only accessible within class 'Foo'.

class Bar extends Foo {

  constructor(x: string, y: string, z: string) {

    super(x, y, z);

    // public 접근 제한자는 자식 클래스 내부에서 참조 가능하다.

    console.log(this.x);

    // protected 접근 제한자는 자식 클래스 내부에서 참조 가능하다.

    console.log(this.y);

    // private 접근 제한자는 자식 클래스 내부에서 참조할 수 없다.

    console.log(this.z);

    // error TS2341: Property 'z' is private and only accessible within class 'Foo'.

  }

}

 

 

3. 생성자 파라미터에 접근 제한자 선언

 

기존 방식

// person.ts

class Person {

  name: string;

  constructor(name: string) {

    this.name=name;

  }

}

const man = new Person("kim");

console.log(man.name); // kim

 

 

생성자 파라미터에 접근 제한자 사용

// person.ts

class Person {

   //  접근 제한자가 선언된 생성자 파라미터 x는 클래스 프로퍼티로 선언되고 지동으로 초기화된다.

   //  public이 선언되었으므로 x는 클래스 외부에서도 참조가 가능하다.

   //  constructor(name: string) { //  ... 설명1. 생성자 내부에서만 유효한 지역변수가 된다. 

  constructor(public name: string) {

  }

}

const man = new Person("kim");

console.log(man.name); // kim

 

설명1. 만일 생성자 파라미터에 접근 제한자를 선언하지 않으면 생성자 파라미터는 생성자 내부에서만 유효한 지역 변수가 되어 생성자 외부에서 참조가 불가능하게 된다.

---

4. readonly 키워드

readonly가 선언된 클래스 프로퍼티는 선언 시 또는 생성자 내부에서만 값을 할당할 수 있다.

그 외의 경우에는 값을 할당할 수 없고 오직 읽기만 가능한 상태가 된다. 이를 이용하여 상수의 선언에 사용한다.

class Foo {

  private readonly MAX_LEN: number = 5;

  private readonly MSG: string;

  constructor() {

    this.MSG = 'hello';

  }

  log() {

    // readonly가 선언된 프로퍼티는 재할당이 금지된다.

    this.MAX_LEN = 10; // Cannot assign to 'MAX_LEN' because it is a constant or a read-only property.

    this.MSG = 'Hi'; // Cannot assign to 'MSG' because it is a constant or a read-only property.

    console.log(`MAX_LEN: ${this.MAX_LEN}`); // MAX_LEN: 5

    console.log(`MSG: ${this.MSG}`); // MSG: hello

  }

}

new Foo().log();

 

 

5. static 키워드 

ES6 클래스에서 static 키워드는 클래스의 정적(static) 메소드를 정의한다. 정적 메소드는 클래스의 인스턴스가 아닌 클래스 이름으로 호출한다. 따라서 클래스의 인스턴스를 생성하지 않아도 호출할 수 있다.

 

class Foo {

  prop:number

  constructor(prop:number) {

    this.prop = prop;

  }

  static staticMethod() {

    /*

    정적 메소드는 this를 사용할 수 없다.

    정적 메소드 내부에서 this는 클래스의 인스턴스가 아닌 클래스 자신을 가리킨다.

    */

    return 'staticMethod';

  }

  prototypeMethod() {

    return this.prop;

  }

}

// 정적 메소드는 클래스 이름으로 호출한다.

console.log(Foo.staticMethod());

const foo = new Foo(123);

// 정적 메소드는 인스턴스로 호출할 수 없다.

console.log(foo.staticMethod()); // Uncaught TypeError: foo.staticMethod is not a function

 

Typescript에서는 static 키워드를 클래스 프로퍼티에도 사용할 수 있다. 

정적 메소드와 마찬가지로 정적 클래스 프로퍼티는 인스턴스가 아닌 클래스 이름으로 호출하며 클래스의 인스턴스를 생성하지 않아도 호출할 수 있다.

 

class Foo {

  // 생성된 인스턴스의 갯수

  static instanceCounter = 0;

  constructor() {

    // 생성자가 호출될 때마다 카운터를 1씩 증가시킨다.

    Foo.instanceCounter++;

  }

}

var foo1 = new Foo();

console.log(Foo.instanceCounter);  // 1

var foo2 = new Foo();

console.log(Foo.instanceCounter);  // 2

console.log(foo2.instanceCounter); // error TS2339: Property 'instanceCounter' does not exist on type 'Foo'.

 

 

6. 추상 클래스

추상 클래스(abstract class)는 하나 이상의 추상 메소드를 포함하며 일반 메소드도 포함할 수 있다.

추상 메소드는 내용이 없이 메소드 이름과 타입만이 선언된 메소드를 말하며 선언할 때 abstract 키워드를 사용한다.

추상 클래스를 정의할 때는 abstract 키워드를 사용하며, 직접 인스턴스를 생성할 수 없고 상속만을 위해 사용된다. 추상 클래스를 상속한 클래스는 추상 클래스의 추상 메소드를 반드시 구현하여야 한다.

 

abstract class Animal {

  // 추상 메소드

  abstract makeSound(): void;

  // 일반 메소드

  move(): void {

    console.log('roaming the earth...');

  }

}

// 직접 인스턴스를 생성할 수 없다.

// new Animal();

// error TS2511: Cannot create an instance of the abstract class 'Animal'.

class Dog extends Animal {

  // 추상 클래스를 상속한 클래스는 추상 클래스의 추상 메소드를 반드시 구현하여야 한다

  makeSound() {

    console.log('bowwow~~');

  }

}

const myDog = new Dog();

myDog.makeSound();

myDog.move();