十五、Mixins

2511 ワード

紹介する
従来のオブジェクト向け継承方式に加えて、再利用可能なコンポーネントによってクラスを作成する方法として、別の単純なクラスのコードを結合する方法が流行しています.
// TS     : Disposable Mixin
class Disposable {
  isDisposed: boolean;
  dispose() {
    this.isDisposed = true;
  }
}
// Activatable Mixin
class Activatable {
  isActive: boolean;
  activate() {
    this.isActive = true;
  }
  deactivate() {
    this.isActive = false;
  }
}

//    extends    implements。        ,   Disposable Activatable        
class SmartObject implements Disposable, Activatable {
  constructor(){
    setInterval(() => {
      console.log(this.isActive + ' : ' + this.isDisposed)
    }, 500)
  }
  interact(){
    this.activate();
  }
  //    mixin              。                   。       mixin     ,              
  isDisposed: boolean = false;
  dispose: () => void;
  isActive: boolean = false;
  activate: () => void;
  deactivate: () => void;
}

applyMixins(SmartObject, [Disposable, Activatable]);

let smartObj = new SmartObject();
setTimeout(() => {
  smartObj.interact()
}, 1000)
//     mixins      ,        ,                  
function applyMixins (derivedCtor: any, baseCtors: any[]){
  baseCtors.forEach(baseCtors => {
    Object.getOwnPropertyNames(baseCtors.prototype).forEach(name => {
      derivedCtor.prototype[name] = baseCtors.prototype[name];
    })
  })
}

さんしゃせんめいれい
三斜線命令は単一のXMLラベルを含む単行注釈であり、注釈の内容はコンパイラ命令として三斜線参照を使用してコンパイラがコンパイル中に導入する追加のファイルに通知されます.
3斜線命令は、彼を含むファイルの最上位にのみ配置できます.1つの3斜線命令の前には、1行または複数行の注釈しか表示されません.これには、他の3斜線命令が含まれます.
もし彼が文や声明の後に現れたら、彼らは普通の単行注釈として扱われ、特別な意味を持っていません.
前処理入力ファイル:解析解析:コンパイラは入力ファイルを前処理してすべての三斜線参照命令を解析します.この過程で、追加のファイルがコンパイル中に追加されます.検索ファイルはいくつかのルートファイルで始まります(コマンドで指定したファイルまたはtsconfig.jsonのfilesリストのファイル).これらのルートファイルは、指定した順序で前処理されます.処理順序:三斜線参照ファイルに表示される順序で、深さ優先を使用してエラーを解析します:参照が存在しないファイルはエラーを報告します.一つのファイルは三斜線命令で自分を参照するとエラーを報告しますnoResolve:noResolveコンパイルオプションを指定すると、三斜線参照は無視され、新しいファイルを追加したり、与えられたファイルの順序を変更したりしません.
@typesパッケージへの依存を.tsファイルで宣言するには、--typesコマンドラインオプションを使用するか、tsconfig.jsonで指定します.
//                  ,           
/// 
//           @types/node/index.d.ts       ;   ,                      
//          d.ts          
/// 
//                。     lib.d.ts                  
/// 
//                     ,   r.js。
// amd-module                  :
/// 
///