[typescript - 2.2] Mix-in classes

[kennyd98]

Mix-in 이란?

• Mix-in은 클래스의 부분부분을 쪼개어 조립하는 것
• 다중상속의 대안으로만 사용되는 것은 아님
• 전통적인 클래스 상속을 이용할 때에는 필요하지 않은 부분도 모조리 상속되는 불편함
• Mix-in으로 클래스를 조립한다면 더 깔끔한 구현이 가능
• 구현측면에서의 Mix-in
  • constructor를 인자로 받아서
  • 해당 constructor를 확장하는 클래스를 선언하고
  • 새로 정의된 클래스에 멤버를 추가하고
  • 해당 클래스를 반환한다.
• 참고
  • MDN Mixin description
  • Real Mixins with JavaScript Classes
  • https://blog.mariusschulz.com/2017/05/26/typescript-2-2-mixin-classes

예시 1

• Mix-in 정의

  
  type Constructor<T = {}> = new (...args: any[]) => T;

function Timestamped(Base: TBase) { return class extends Base { timestamp = Date.now(); }; }

* Mix-in 사용

class User { name: string;

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

}

// Create a new class by mixing "Timestamped" into "User" const TimestampedUser = Timestamped(User);

// Instantiate the new "TimestampedUser" class const user = new TimestampedUser("John Doe");

// We can now access properties from both the "User" class // and our "Timestamped" mixin in a type-safe manner console.log(user.name); console.log(user.timestamp);

### 예시 2 - 생성자를 갖는 Mix-in
* Mix-in 클래스의 확장자는 반드시 `...args: any[]` 형태의 파라미터를 정의함
* 범용적으로 적용할 수 있게 하기 위함 = 특정 파라미터 형태의 생성자를 갖는 클래스에 종속되지 않기 위함
```javascript
function Tagged<TBase extends Constructor>(Base: TBase) {
    return class extends Base {
        tag: string | null;

        constructor(...args: any[]) {
            super(...args);
            this.tag = null;
        }
    };
}

• 위에 있는 User 클래스에 tag 프로퍼티를 추가하려면?

  
  // Create a new class by mixing "Tagged" into "User"
  const TaggedUser = Tagged(User);

// Instantiate the new "TaggedUser" class const user = new TaggedUser("John Doe");

// We can now access properties from both the "User" class // and our "Tagged" mixin in a type-safe manner user.name = "Jane Doe"; user.tag = "janedoe";

### 예시 3 - 메소드를 갖는 Mix-in
```javascript
function Activatable<TBase extends Constructor>(Base: TBase) {
    return class extends Base {
        isActivated = false;

        activate() {
            this.isActivated = true;
        }

        deactivate() {
            this.isActivated = false;
        }
    };
}

const ActivatableUser = Activatable(User);

// Instantiate the new "ActivatableUser" class
const user = new ActivatableUser("John Doe");

// Initially, the "isActivated" property is false
console.log(user.isActivated);

// Activate the user
user.activate();

// Now, "isActivated" is true
console.log(user.isActivated);

예시 4 - 여러 Mix-in 동시에 사용하기

const SpecialUser = Activatable(Tagged(Timestamped(User)));
const user = new SpecialUser("John Doe");

[kennyd98]

ORIGINAL - typescript document 번역

---

Mix-in 이란?

• Mix-in은 클래스의 부분부분을 쪼개어 조립하는 것
• Mix-in이 다중상속의 대안으로만 사용되는 것은 아님
• 전통적인 클래스 상속을 이용할 때에는 필요하지 않은 부분도 모조리 상속되는 불편함
• Mix-in으로 클래스를 조립한다면 더 깔끔한 구현이 가능

Mix-in 지원

• TypeScript 2.2 부터 ECMAScript 2015 Min-in 클래스 패턴 지원

  
  var calculatorMixin = Base => class extends Base {
  calc() { }
  };

var randomizerMixin = Base => class extends Base { randomize() { } };

class Foo { } class Bar extends calculatorMixin(randomizerMixin(Foo)) { }

* 참고
  - [MDN Mixin description](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes#Mix-ins)
  - [Real Mixins with JavaScript Classes](http://justinfagnani.com/2015/12/21/real-mixins-with-javascript-classes/)

### Mix-in 생성자 타입
* `any[]` 타입의 single rest argument
* object-like 타입의 반환
* 예시, `X` 가 특정 object-like 타입인 경우 아래와 같은 게 Mix-in 생성자 타입
```javascript
constructor (...args: any[]) {
   return X;
} 

Mix-in 클래스

• 타입 파라미터 형태을 extend하는 클래스
• 타입 파라미터 형태의 정의는 Min-in 생성자를 가지고 있어야 함
• 생성자는 any[] 타입의 single rest argument를 가져야 하고, 이는 super(...args)와 같이 부모생성자를 호출할 때 쓰임
• 합성된 타입의 생성자 시그니쳐는 Min-in 생성자의 시그니쳐를 가지고 있지 않음, 예를 들어 { new(...args: any[]) => A } & { new(s: string) => B } 가 섞인 경우, new(s: string) => A & B 와 같은 생성자 시그니쳐가 됨.

class Point {
    constructor(public x: number, public y: number) {}
}

class Person {
    constructor(public name: string) {}
}

type Constructor<T> = new(...args: any[]) => T;

function Tagged<T extends Constructor<{}>>(Base: T) {
    return class extends Base {
        _tag: string;
        constructor(...args: any[]) {
            super(...args);
            this._tag = "";
        }
    }
}

const TaggedPoint = Tagged(Point);

let point = new TaggedPoint(10, 20);
point._tag = "hello";

class Customer extends Tagged(Person) {
    accountBalance: number;
}

let customer = new Customer("Joe");
customer._tag = "test";
customer.accountBalance = 0;

• Mix-in 클래스는 생성자 시그니처 반환타입을 지정함으로써 생성되는 인스턴스의 유형을 제한한다??? 먼 얘기여. 예를 들어 아래 WithLocation 함수는 getLocation 메소드가 추가되고 'Point' 인터페이스를 만족하여 'x', 'y' 프로퍼티가 있는 subclass 팩토리를 구현함.

interface Point {
    x: number;
    y: number;
}

const WithLocation = <T extends Constructor<Point>>(Base: T) =>
    class extends Base {
        getLocation(): [number, number] {
            return [this.x, this.y];
        }
    }