【TypeScript】Mixinの使い方を10選の実例コードで解説！

// TypeScriptの型定義の例
let num: number = 10;
let str: string = "Hello, TypeScript!";

// Mixinの例
class Disposable {
  isDisposed: boolean = false;
  dispose() {
    this.isDisposed = true;
  }
}

class Activatable {
  isActive: boolean = false;
  activate() {
    this.isActive = true;
  }
  deactivate() {
    this.isActive = false;
  }
}

// ２つのクラスを組み合わせたクラスを作成
class SmartObject implements Disposable, Activatable {
  constructor() {
    setInterval(() => console.log(this.isActive + " : " + this.isDisposed), 500);
  }

  interact() {
    this.activate();
  }

  // Disposable
  isDisposed: boolean = false;
  dispose: () => void;
  // Activatable
  isActive: boolean = false;
  activate: () => void;
  deactivate: () => void;
}

applyMixins(SmartObject, [Disposable, Activatable]);

function applyMixins(derivedCtor: any, baseCtors: any[]) {
  baseCtors.forEach(baseCtor => {
    Object.getOwnPropertyNames(baseCtor.prototype).forEach(name => {
      derivedCtor.prototype[name] = baseCtor.prototype[name];
    });
  });
}

// Jumpable Mixin
class Jumpable {
  jump() {
    console.log('ジャンプした！');
  }
}

// Swimmable Mixin
class Swimmable {
  swim() {
    console.log('泳いだ！');
  }
}

// クラスにMixinsを追加
class Character implements Jumpable, Swimmable {
  // Jumpableのメソッド
  jump: () => void;

  // Swimmableのメソッド
  swim: () => void;

  constructor() {
    // Mixinsのメソッドの初期化
    setMixins(this, new Jumpable(), new Swimmable());
  }
}

function setMixins(base: any, ...mixins: any[]) {
  mixins.forEach(mixin => {
    Object.getOwnPropertyNames(mixin).forEach(name => {
      base[name] = mixin[name];
    });
  });
}

const character = new Character();
character.jump();
character.swim();

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

function Flying<T extends Constructor>(Base: T) {
    return class extends Base {
        // 日本語コメント：飛ぶメソッド
        fly() {
            console.log("空を飛ぶ！");
        }
    };
}

// Swimming Mixin
function Swimming<T extends Constructor>(Base: T) {
    return class extends Base {
        // 日本語コメント：泳ぐメソッド
        swim() {
            console.log("水を泳ぐ！");
        }
    };
}

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

// 複数のMixinを組み合わせて新しいクラスを作成
const FlyingSwimmingAnimal = Swimming(Flying(Animal));

const duck = new FlyingSwimmingAnimal('アヒル');
duck.fly();   // 空を飛ぶ！
duck.swim();  // 水を泳ぐ！

// Personクラスを定義
class Person {
    constructor(public name: string, public age: number) {}
}

// 住所を追加するMixinを定義
type WithAddress = new(...args: any[]) => {
    address: string;
};

function AddressMixin<T extends WithAddress>(Base: T) {
    return class extends Base {
        address: string = '';
    };
}

// Personクラスに住所を追加
const PersonWithAddress = AddressMixin(Person);

const person = new PersonWithAddress('太郎', 25);
person.address = '東京都';

// 基本的なPersonクラス
class Person {
    constructor(public name: string) {}
    greet() {
        return `こんにちは、${this.name}さん！`;
    }
}

// 関数を使ったMixin
function Tagger<TBase extends new (...args: any[]) => {}>(Base: TBase) {
    return class extends Base {
        tag = 'MixinTag';
    };
}

// PersonクラスにTaggerを適用
const TaggedPerson = Tagger(Person);

const taro = new TaggedPerson('太郎');
console.log(taro.greet());  // こんにちは、太郎さん！
console.log(taro.tag);     // MixinTag

interface Runner {
    run(): void;
}

function Speedy<TBase extends new (...args: any[]) => {}>(Base: TBase) {
    return class extends Base implements Runner {
        run() {
            console.log('高速に走ります！');
        }
    };
}

const SpeedyPerson = Speedy(Person);
const hanako = new SpeedyPerson('花子');
hanako.run(); // 高速に走ります！

// ログ出力のMixin
function LoggingMixin(base: any) {
    return class extends base {
        log(message: string) {
            console.log(`[LOG]: ${message}`);
        }
    };
}

// ログ出力機能を持つデコレータ
function WithLogging(target: Function) {
    return LoggingMixin(target);
}

// デコレータを適用したクラスの例
@WithLogging
class MyClass {
    doSomething() {
        this.log("何かをしています...");
    }
}

const instance = new MyClass();
instance.doSomething();  // コンソールに"[LOG]: 何かをしています..."と出力される

// 基本的なUserクラスの定義
class User {
    constructor(public name: string) {}
}

// AdminMixinというMixinを定義
const AdminMixin = Base => class extends Base {
    isAdmin = true;
    getRole() {
        return '管理者';
    }
};

// UserクラスにAdminMixinを動的に適用する関数
function enhanceUserWithRole(user: User, isAdmin: boolean) {
    if (isAdmin) {
        return new (AdminMixin(User))(user.name);
    }
    return user;
}

const user = new User('山田太郎');
const adminUser = enhanceUserWithRole(user, true);

if (adminUser.isAdmin) {
    console.log(`${adminUser.name}は${adminUser.getRole()}です`);
}

// 高階関数を使用したMixinの例
function withLogging(level: string) {
    return function <T extends new (...args: any[]) => {}>(constructor: T) {
        return class extends constructor {
            // ログのレベルに応じてメッセージを出力
            log(message: string) {
                if (level === 'info') {
                    console.info(`[INFO] ${message}`);
                } else if (level === 'warn') {
                    console.warn(`[WARN] ${message}`);
                }
            }
        };
    }
}

class MyClass {
    doSomething() {
        console.log('何かをしています...');
    }
}

// infoレベルのログを持ったクラスを作成
const MyClassWithInfoLog = withLogging('info')(MyClass);
const instance = new MyClassWithInfoLog();
instance.doSomething();
instance.log('これは情報ログです。');

何かをしています…
[INFO] これは情報ログです。

// 複数の高階関数を組み合わせる例
function withTimestamp<T extends new (...args: any[]) => {}>(constructor: T) {
    return class extends constructor {
        timestamp = Date.now();
    };
}

const MyClassWithInfoLogAndTimestamp = withTimestamp(withLogging('info')(MyClass));
const anotherInstance = new MyClassWithInfoLogAndTimestamp();
anotherInstance.log('タイムスタンプ付きの情報ログです。');
console.log(anotherInstance.timestamp);

// まずはMixinの作成
type Constructor<T = {}> = new (...args: any[]) => T;

// Loggerという名前のMixinを作成
function Logger<T extends Constructor>(Base: T) {
    return class extends Base {
        // logメソッドを追加
        log(message: string) {
            console.log(`[Log]: ${message}`);
        }
    };
}

// 通常のクラスの定義
class User {
    constructor(public name: string) {}
}

// UserクラスにLogger Mixinを適用
const UserWithLogger = Logger(User);

const user = new UserWithLogger("Taro");
user.log("Hello from Taro!");  // コンソールに「[Log]: Hello from Taro!」と表示される

// IRunnableというインターフェースを定義
interface IRunnable {
    run(): void;
}

// runnableというMixinを定義
const runnable: IRunnable = Base => class extends Base implements IRunnable {
    run() {
        console.log("走っています。");
    }
}

// Animalクラスを定義
class Animal {
    name: string;
    constructor(name: string) {
        this.name = name;
    }
}

// Animalクラスにrunnableを適用して、Dogクラスを作成
class Dog extends runnable(Animal) {
    bark() {
        console.log(`${this.name}が吠えています。`);
    }
}

const shiro = new Dog("シロ");
shiro.run(); // シロは走っています。
shiro.bark(); // シロが吠えています。

// 抽象クラスを利用したMixinの例
abstract class DatabaseMixin {
    abstract connection: string;

    connect() {
        console.log(`データベースに${this.connection}で接続します。`);
    }
}

class MySQLDatabase extends DatabaseMixin {
    connection = 'MySQL';
}

const db = new MySQLDatabase();
db.connect();

// ジェネリクスを利用したMixinの例
type Constructor<T = {}> = new (...args: any[]) => T;

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

class User {
    name?: string;
}

const TimestampedUser = Timestamped(User);
const userInstance = new TimestampedUser();
console.log(userInstance.timestamp);

class TimestampedDatabase extends DatabaseMixin {
    connection = 'PostgreSQL';
    constructor() {
        super();
        const timestampMixin = new Timestamped(TimestampedDatabase);
        this.timestamp = timestampMixin.timestamp;
    }
}

const timestampDb = new TimestampedDatabase();
console.log(timestampDb.timestamp);
timestampDb.connect();

// NameMixinというMixinを定義
class NameMixin {
    name: string;
    constructor(name: string) {
        this.name = name;
    }
    info() {
        return `名前は${this.name}です。`;
    }
}

// AgeMixinというMixinを定義
class AgeMixin {
    age: number;
    constructor(age: number) {
        this.age = age;
    }
    info() {
        return `年齢は${this.age}歳です。`;
    }
}

class Person extends NameMixin {
    constructor(name: string) {
        super(name);
    }
    info() {
        return super.info() + `年齢は秘密です。`;
    }
}

// LogMixin: メソッドの呼び出しをログに記録
class LogMixin {
    log(data: string) {
        console.log(data);
    }
}

class Calculator extends LogMixin {
    value: number;
    constructor() {
        super();
        this.value = 0;
    }
    add(num: number) {
        this.value += num;
        this.log(`Added ${num}. Current value: ${this.value}`);
    }
}

const calc = new Calculator();
calc.add(5);  // コンソールに「Added 5. Current value: 5」と表示されます。

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

function LoggerMixin<TBase extends Constructor>(Base: TBase) {
    return class extends Base {
        log(message: string) {
            console.log(`[${new Date().toISOString()}]: ${message}`);
        }
    };
}

// クラスにLoggerMixinを適用
class MyClass extends LoggerMixin(Object) {
    doSomething() {
        this.log('何かを実行します');
    }
}

const instance = new MyClass();
instance.doSomething();

function EnhancedLoggerMixin<TBase extends Constructor>(Base: TBase) {
    return class extends LoggerMixin(Base) {
        errorLog(message: string) {
            console.error(`ERROR [${new Date().toISOString()}]: ${message}`);
        }
    };
}

// クラスにEnhancedLoggerMixinを適用
class MyEnhancedClass extends EnhancedLoggerMixin(Object) {
    doError() {
        this.errorLog('エラーが発生しました');
    }
}

const enhancedInstance = new MyEnhancedClass();
enhancedInstance.doError();