在打字稿中覆盖子项的静态字段

Question

我有一个包含静态 URL 的抽象类，并使用该静态 URL 实现功能。子级应覆盖 A 类的静态 URL。

但我仍然希望孩子们使用其父类 A 提供的功能来使用子类的静态覆盖 URL。有什么办法可以在 Typescript 中做到这一点？

interface IState {
    cashflowToPost?: CashflowObject;
    cashflowList: CashflowObject[];
}
export default abstract class CashflowListView extends React.Component<{}, IState> {
    static cashflowObject : CashflowObject;
    static getURL : URL;

    
    callApi() {
        try {
            axios.get(CashflowListView.getURL.toString()).then(response => {
                console.log("called Api");
                this.setState({cashflowList: response.data});
            })
        } catch {
            console.log("failed to call api!")
        }
    }
    


    componentDidMount() {
        this.callApi();
    }

    
}

Answer 1

嗯，我认为这是不可能的，直到我自己开始搜索它。这已经在这里回答了：Access child class' static members from base class

abstract class Base {
    static url: string = "hello.com";

    log() {
        const thisConructor = this.constructor as typeof Base;
        console.log('Do it>>>', thisConructor.url);
        // => Make axios call with "thisConructor.url"
    }
}

class Child extends Base {
    static url: string = "hello1.com";
}

const c = new Child();
c.log(); // => "hello1.com"

Answer 2

但我还是希望孩子们使用其父类 A 提供的功能来使用子类的静态覆盖 URL。

子实例当然可以访问父类中的方法，但是如果父类的方法访问静态属性，从实例调用它会失败：

class A {
  static getURL = 'http://example.com';
  
  aMethod() {
    console.log('A.aMethod() getURL:', getURL);
  }
}

class B extends A {
  static getURL = 'http://example.com/BClass';
}

const bInstance = new B();
bInstance.aMethod(); // ReferenceError: Can't find variable: getURL

虽然您不能“覆盖”类的静态变量，但您可以执行以下操作：

class A {
  static getURL = 'http://example.com/AClass';
  
  // make the method static and pass in url
  static aMethod(url) {
    console.log('aMethod() url:', url);
  }
}

class B extends A {
  static getURL = 'http://example.com/BClass';
}

console.log('A.getURL:', A.getURL);
A.aMethod(A.getURL);

console.log('B.getURL:', B.getURL)
B.aMethod(B.getURL);

但由于 OP 希望重用引用静态属性 (getURL) 和实例属性 (this) 的实例方法，因此需要不同的策略。

解决方案：从类构造函数访问静态属性

幸运的是，我们可以利用static property can be referenced from the instance's class constructor：

   thisURL = this.constructor.getURL;

this.constructor.getURL 引用实例类（而非父类）的静态属性 getURL。

class A {
  static getURL = 'http://AClassURL';

  aInstanceMethod() {
    // `this.constructor.getURL` references the instance's class
    this.result = `result obtained using ${this.constructor.getURL}`;
  }
}

class B extends A {
  static getURL = 'http://BClassURL';
}


const aInstance = new A();
aInstance.aInstanceMethod();

const bInstance = new B();
bInstance.aInstanceMethod();


document.querySelector('pre').innerText =
  `A.getURL = ${A.getURL}
B.getURL = ${B.getURL}

aInstance: ${JSON.stringify(aInstance, null, 2)}

bInstance: ${JSON.stringify(bInstance, null, 2)}`;

<pre></pre>