如何将一个接口设置为两个单独的其他接口，而不合并Typescript

如何解决如何将一个接口设置为两个单独的其他接口，而不合并Typescript

我对打字稿非常陌生，但可以说我有这样的事情：

class Foo{
  options: fooOptionsObj;
  constructor(options: fooOptionsObj){
    this.options = options;
  }
  sayMessage(){
      console.log(`I am number${this.options.position},and I say ${this.options.message}`);
  }
}

interface fooOptionsObj{
  message: string;
  position: number;
}

然后我可以创建Foo的子类，并使用fooOptionsObj传递选项

class SubFoo extends Foo{
  subOptions: subFooOptionsObj;
  constructor(superOptions: fooOptionsObj,subOptions: subFooOptionsObj){
      super(superOptions);
      this.subOptions = subOptions;
  }
  draw(){
      drawSqaure(0,this.subOptions.size,this.subOptions.color);//say thats a function
  }
}

interface subFooOptionsObj{
    color:string;
    size:number
}

但是如果我想再做一个话

class DifferentSubFoo extends Foo{
...
}

我需要传递与子参数不同的超级参数，这可能会造成混淆。

我只需要一个类型为whatClassYourUsingOptionsObj的参数options。像这样：

class ThreeLetters{
  options: fooOptionsObj|barOptionsObj;
  constructor(options: fooOptionsObj|barOptionsObj){
    this.options = options;
  }
  sayMessage(){
    console.log(this.options.message)
  }
}

class Foo extends ThreeLetters{
  constructor(options: fooOptionsObj){
    super(options)
  }
  returnBol(): boolean{
    return this.options.bool;
  }
}

class Bar extends ThreeLetters{
  constructor(options: barOptionsObj){
    super(options);
  }
  sayNumber(){
    console.log(this.options.num);
  }
}

interface fooOptionsObj{
  message: string;
  bool: boolean;  
}
interface barOptionsObj{
  message: string;
  num: number;
}

但是，这不起作用，因为barOptionsObj没有bool，而fooOptionsObj没有num，即使他们不应该这样做不需要一个。这是因为在ThreeLetters内部，options类型是barOptionsObj|fooOptionsObj，即使它只会是一个实例（对于一个实例）。我将如何解决这个问题，以便只需要1个options对象？

解决方法

在给出示例代码的情况下，我将假设您希望您的类层次结构形成有效的subtype hierarchy；也就是说，您希望能够在需要Foo实例的任何地方使用Bar或ThreeLetters的实例。

如果是这样，我继续的方法是缩小子类的options属性的类型。这可以通过declare-ing the property in each subclass来完成，该操作确保此信息仅影响静态类型系统，而不影响所发出的JavaScript。

除非您确定要将子类限制为枚举的选项类型列表，否则我可能还会将基本选项类型的扩展范围指定为比已知子类的选项的并集更为具体。 >

这是基类的代码：

interface BaseOptions {
  message: string;
}

class ThreeLetters {
  readonly options: BaseOptions; // readonly to avoid unsound writes
  constructor(options: BaseOptions) {
    this.options = options;
  }
  sayMessage() {
    console.log(this.options.message)
  }
}

请注意，我将options设置为readonly，因为您可能想阻止某人抓住Foo，将其扩展为ThreeLetters，然后编写BaseOptions：

const tl: ThreeLetters = new Foo({ message: "",bool: true });
const badFooOptions = { message: "",oopsie: 123 };
tl.options = badFooOptions; // error because options is readonly

现在是子类：

interface FooOptionsObj {
  message: string;
  bool: boolean;
}
class Foo extends ThreeLetters {
  declare options: FooOptionsObj; // narrow
  constructor(options: FooOptionsObj) {
    super(options)
  }
  returnBol(): boolean {
    return this.options.bool;
  }
}

和

interface BarOptionsObj {
  message: string;
  num: number;
}
class Bar extends ThreeLetters {
  declare options: BarOptionsObj; // narrow
  constructor(options: BarOptionsObj) {
    super(options);
  }
  sayNumber() {
    console.log(this.options.num);
  }
}

现在没有任何错误，希望一切都会按预期进行。希望能有所帮助；祝你好运！

Playground link