[Typescript] 클래스(1)

🔍서론

ES6에서 새롭게 도입된 클래스는 기존 프로토타입 기반 객체지향 언어보다 클래스 기반 언어에 익숙한 개발자가 보다 빠르게 학습할 수 있는 명료하고 새로운 문법을 제시하고 있다.

하지만 클래스가 새로운 객체지향 모델을 제공하는 것은 아니다. 사실 클래스도 함수이고 기존 프로토타입 기반 패턴의 Syntactic sugar일 뿐이다.

Typescript가 지원하는 클래스는 ECMAScript 6의 클래스와 상당히 유사하지만 몇 가지 Typescript만의 고유한 확장 기능이 있다.

이 확장기능들을 아래에서 설명하고 있다.

---

1️⃣클래스 메서드

TypeScript는 독립함수(standalone function)을 이해하는 것과 동일한 방식으로 메서드를 이해한다.
매개변수에 타입이나 기본값을 지정하지 않으면 any타입을 갖는다. 또한 메서드를 호출할 때는 당연히 메서드의 매개변수의 수에 맞는 인수가 필요하다. 

class Greeter {
    greet(name:string){
        console.log(name);
    }
}

/* OK */
new Greeter().greet("Kim");

/* Error: Expected 1 arguments, but got 0 */
new Greeter().greet();

 

클래스 생성자(constructor)는 전형적인 클래스 메서드처럼 취급된다. TypeScript는 메서드 호출 시 올바른 타입의 인수가 올바른 수로 제공되는지 확인하기 위해 타입검사를 수행한다.

class Greeter {
    constructor(name:string){
        console.log(name);
    }
}

/*OK*/
new Greeter("kim");

/*Error: Expected 1 arguments, but got 0 */
new Greeter();

---

2️⃣클래스 속성

TypeScript에서 클래스의 속성을 읽거나 쓰려면 클래스에 명시적으로 선언해야한다. 
① 클래스 속성은 인터페이스와 동일한 구문을 사용해서 선언한다.  
② 클래스 속성 이름 뒤에는 선택적으로 타입 에너테이션이 붙는다. 
즉, 클래스 속성을 선언해야만 클래스 인스턴스에서 할당되고 접근하며 해당 클래스속성을 사용할수 있다.

class FieldTrip{
    destination : string;

    constructor(destination: string) {
        this.destination = destination; /*OK*/
        console.log(this.destination);

        this.noexistence = destination;
        /* Error: Property noexistence does not exist on type FieldTrip */
    }
}

const trip = new FieldTrip("Paris");
console.log(trip.destination);

console.log(trip.noexistence);
/* Error: Property noexistence does not exist on type FieldTrip */

2️⃣- 1. 함수 속성

클래스의 멤버를 호출가능한함수로 선언하는 두가지 구문  

① 일반 메서드 정의

class WithMethod{
    myMethod(): void{}
}

/* true */
console.log(new WithMethod().myMethod() === new WithMethod().myMethod())

② 함수 속성(Function Property)

class WithMethod {
    myProperty= () :void=> {  }
}
console.log(new WithMethod().myProperty === new WithMethod().myProperty);

 

차이점은 두 가지가 있다.

1. 프로토타입: 메서드 방식은 클래스의 프로토타입에 정의되고, 함수 속성 방식은 인스턴스에 직접 정의됨.
2. this 바인딩: 함수 속성에서 화살표 함수를 사용할 경우 this는 자동으로 해당 인스턴스를 가리키게 되므로 클래스 내에서 this 관련 문제를 피할 수 있다. 일반 메서드는 호출 방식에 따라 this가 다를 수 있어서 상황에 따라 this 바인딩을 명시적으로 해야 할 때가 있다.

👣인스턴스와 프로토타입

인스턴스는 클래스를 기반으로 생성된 개별 객체이다.

class Car {
  brand: string;
  
  constructor(brand: string) {
    this.brand = brand;
  }
}

const car1 = new Car("KIA");
const car2 = new Car("Ferrari");

/* car1과 car2는 Car 클래스의 각각의 인스턴스*/
console.log(car1.brand); /* "KIA"*/
console.log(car2.brand); /* "Ferrari"*/

car1과 car2가 인스턴스이다.

---

프로토타입은 자바스크립트의 상속 메커니즘이다.

⭐클래스에서 정의된 메서드와 속성은 인스턴스가 아니라 프로토타입에 저장되고 새 인스턴스들은 프로토타입 내의 메서드와 속성을 사용할 수 있다. 즉, 프로토타입에 메서드와 속성을 저장하면서 메모리 효율성을 높일 수 있는 것이다⭐

class Car {
  brand: string;

  constructor(brand: string) {
    this.brand = brand;
  }

  drive() {
    console.log(`${this.brand} is driving.`);
  }
}

const car1 = new Car("Toyota");

/* car1 인스턴스에는 brand 속성만 있고 drive 메서드는 없지만, 
 자바스크립트는 car1의 프로토타입에서 drive 메서드를 찾습니다.*/
car1.drive(); /* "Toyota is driving."*/

 

👣 this 바인딩과 프로토타입의 상관관계

class Car {
  brand: string;
  constructor(brand: string) {
    this.brand = brand;
  }

  /* 프로토타입에 저장되는 메서드*/
  start() {
    console.log(this.brand + " is starting.");
  }

  /* 인스턴스에 저장되는 함수 속성*/
  stop = () => {
    console.log(this.brand + " is stopping.");
  }
}

const car = new Car("Toyota");
car.start(); /* "Toyota is starting."*/
car.stop();  /* "Toyota is stopping."*/

일반 메서드는 프로토타입에 저장되므로 호출할 때 this가 어떤 객체를 가리킬지 호출 방식에 따라 다를 수 있다.

반면, 함수 속성은 인스턴스 자체에 직접 저장되고, ⭐화살표 함수를 사용하면 this가 항상 인스턴스를 가리킨다.

2️⃣- 2. 초기화 검사

엄격한 초기화 검사

class Example{
    now = 0; /*OK*/
    later: number; /*OK(Constructor에서 할당)*/
    mayBeUndefined: number | undefined /*OK(Undefined허용)*/
    unused: number; 
    /*Error : Property unused has no initializer and 
     is not definitely assigned in the constructor.*/
    constructor() {
        this.later = 12;
    }
}

TypeScript는 클래스에서 undefined타입으로 선언된 속성들이 생성자(constructor)에서 할당되었는지 확인한다.

위의 에러는 생성자에서 unused속성을 할당하지 않았기에 타입오류를 일으킨 모습이다.

 

엄격한 초기화 검사를 구성하는 방법은 TypeScript의 IDE 기능 사용에서 ⭐strictPropertyInitialization 컴파일러 옵션을 사용해 구성한다. 

 

확실하게 할당된 속성

엄격한 초기화 검사는 대부분의 경우에 유용하지만 클래스 생성자 다음에 클래스 속성을 의도적으로 할당하지 않는 경우가 있다.
이 때 엄격한 초기화 검사를 적용하면 안되는 속성에는 이름뒤에 !를 추가해 검사를 비활성화하도록 설정할 수 있다.   

class ActivitiesQueue{
    pending! : string[]; /*OK*/
    
    initialize(pending : string[]){
        this.pending = pending;
    }
    
    next(){
        return this.pending.pop();
    }
}

const activities = new ActivitiesQueue();

activities.initialize(['eat','sleep','learn']);
activities.next();

2️⃣- 3. 선택적 속성

인터페이스와 마찬가지로 클래스는 선언된 속성 이름 뒤에 ?를 추가해 속성을 옵션으로 선언한다.

class Example{
    property? : string;
}

new Example().property?.length; /*OK*/
new Example().property.length; 
/*Error:  Object is possibly undefined*/

2️⃣- 4. 읽기 전용 속성

readonly로 선언된 속성은 선언된 위치 또는 생성자에서 초깃값만 할당할 수 있다. 클래스 내의 메서드를 포함한 다른 모든 위치에서 속성은 읽을 수만 있고 쓸 수는 없다.

class Quote{
    readonly text: string;
    constructor(text: string) {
        this.text = text;
    }
    
    emphasize(){
        this.text += "!";
        
        /*Error: Cannot assign to text because it is a read-only property.*/
    }
}

npm 패키지로 게시한 코드를 사용하는 외부인은 readonly를 존중하지 않을 수 있으니 읽기 전용 보호가 정말 필요하다면 private(#) 필드나 get() 함수 속성의 이용을 고려하자. 

---

3️⃣ 타입으로서의 클래스

타입 시스템에서의 클래스는 클래스 선언이 런타임 값과 타입 애너테이션에서 사용할 수 있는 타입을 모두 생성한다는 점에서 독특하다.

이 말인 즉슨 타입스크립트에서 클래스는 두 가지의 역할을 수행할 수 있다는 뜻이다.

1. 클래스는 코드를 실행할 때(런타임) 실제 객체를 만들 수 있는 값이다.
2. 클래스가 객체를 생성하는 것뿐만 아니라 타입으로도 사용된다.

class Person {
  name: string;
  age: number;

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

const personInstance = new Person("Alice", 25); /* 런타임 값 */
let anotherPerson: Person; /* 타입 애너테이션 */

 

TypeScript는 클래스의 동일한 멤버를 모두 포함하는 모든 객체 타입을 클래스에 할당할 수 있는 것으로 간주한다.

왜냐하면 TS의 구조적 타이핑이 선언되는 방식이 아니라 객체의 형태만 고려하기 때문이다.  

 

⭐ 쉽게 풀어쓰면  타입스크립트는 "이 객체가 어떤 클래스에서 만들어졌는지"보다는 "객체의 속성과 타입이 맞는지"만 확인한다.

즉, 클래스에 선언된 멤버(속성 및 메서드)들이 모두 동일하게 존재한다면, 그 객체는 해당 클래스 타입과 호환된다고 간주한다.

class Person {
  name: string;
  age: number;

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

let obj = { name: "Alice", age: 25 };
let person: Person = obj; /* OK */

여기서 obj는 Person 클래스의 인스턴스가 아니지만 속성과 타입이 Person클래스와 동일하기 때문에 Person타입으로 할당될 수 있다.

---

4️⃣ 클래스와 인터페이스

TypeScript는클래스 이름 뒤에 implements 키워드와 인터페이스 이름을 추가함으로써 클래스의 해당 인스턴스가 인터페이스를 준수한다고 선언할 수 있다.

interface Animal {
  name: string;
  makeSound(): void;
}

class Dog implements Animal {
  name: string;

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

  makeSound(): void {
    console.log(`${this.name} says: Woof!`);
  }
}

const myDog = new Dog("Buddy");
myDog.makeSound(); 
// "Buddy says: Woof!"

이렇게 하면 클래스를 각 인터페이스에 할당할수 있어야 함을 TypeScript에 나타낸다. 또한, 타입 검사기에 의해 모든 불일치에 대해서 타입 오류가 발생한다.  

interface Learner{
    name: string;
    study(hours:number) : void;
}

class Student implements Learner{
    name: string;
    constructor(name:string){
        this.name = name;
    }
    study(hours:number){
        console.log(hours);
    }
}
const kim = new Student("Kim");
kim.study(4);
class Slacker implements Learner{}
/*
    Error : Class Slacker incorrectly implements interface Learner
    Type Slacker is missing the following properties from type Learner: name, study
*/

⭐TypeScript는 인터페이스에서 클래스의 메서드 또는 속성 타입을 유추하지 않는다.

class Slacker implements Learner{
    study(hours)
    /*Error : Parameter hours implicitly has an any type.*/
    {}
}

이러한 방식으로 타입 애너테이션을 지정하지 않은채  메서드를 추가한다면 TypeScript는 타입 애너테이션을 지정하지 않는 한 hours 매개변수를 암시적 any로 간주한다. ➡️ any 타입 오류가 발생함

 

인터페이스를 구현하는 것은 순전히 안정성 검사를 위해서이다.

4️⃣- 1. 다중 인터페이스 구현

✅충돌없이 가능할때

interface SoccerPlayer{
    goals: number;
    shoot(name:string): void;
}
interface BasketballPlayer{
    dunkShot: number;
}
class Player implements BasketballPlayer,SoccerPlayer{
    goals:number;
    dunkShot:number;
    constructor(goals:number,dunkShot:number){
        this.goals = goals;
        this.dunkShot = dunkShot;
    }

    shoot(name:string):void{
        console.log(`${name} goals ${this.goals} goals in Soccer.`);
    }
}

const Messi = new Player(500,0);
Messi.shoot("L.Messi");

❌충돌해서 안될 때 

interface SoccerPlayer{
    goals: number;
    shoot(name:string): void;   /*이 부분 주목*/
}
interface BasketballPlayer{
    dunkShot: number;
    shoot:string;   /*이 부분 주목*/
}
class Player implements BasketballPlayer,SoccerPlayer{
    goals:number;
    dunkShot:number;
    constructor(goals:number,dunkShot:number){
        this.goals = goals;
        this.dunkShot = dunkShot;
    }

    shoot(name:string):void{
    /*
    	Error:Property shoot in type Player is not assignable to the same property in base type BasketballPlayer
    	Type (name: string) => void is not assignable to type string
    */
        console.log(`${name} goals ${this.goals} goals in Soccer.`);
    }
}

const Messi = new Player(500,0);
Messi.shoot("L.Messi");