Typescript/Angular：更新擴展類/組件中的 Getter/Setter 類型轉換

Question

我試圖把它簡化，所以想要這個的用例不太清楚，但問題仍然存在。

問題：無法在 class 中擴展/更新/聲明枚舉或類型

目標：每當“ValidState”偏離基礎 class 中的默認值時，與其用新類型重寫擴展類中的 getter/setter，有沒有辦法做到這一點，以便 getter/setter 知道新類型？

示例基礎 Class

import { Component, OnInit } from '@angular/core';

export enum DefaultValidStates {
  LOADING = 'LOADING',
  READY = 'READY',
}

type ValidState = DefaultValidStates;
// Is there a way for this to be within a class so it can be updated in extended classes and still trigger type checks

@Component({
  selector: 'app-base',
  template: '<p>BaseComponent status = {{status}}</p>',
})
export class BaseComponent implements OnInit{
  private _status: ValidState | undefined;

  constructor(
  ) {
  }

  ngOnInit() {
    this.status = DefaultValidStates.LOADING;
    window.setTimeout(() => {
      this.status = DefaultValidStates.READY;
    }, 3000)
  }

  get status(): ValidState | undefined {
    return this._status;
  }

  set status(status: ValidState | undefined) {
    this._status = status;
  }
}

示例擴展 Class

import { Component} from '@angular/core';
import {BaseComponent, DefaultValidStates} from "../base/base.component";

enum OtherValidStates {
  FATAL_ERROR = 'FATAL_ERROR',
}

type ValidState = DefaultValidStates | OtherValidStates;
// Is there someway to pass/use this new type so the base class knows of it

@Component({
  selector: 'app-other',
  template: '<p>OtherComponent status = {{status}}</p>',
})
export class OtherComponent extends BaseComponent{
  
  constructor() {
    super();
  }

  ngOnInit() {
    this.status = DefaultValidStates.LOADING;
    window.setTimeout(() => {
      this.status = OtherValidStates.FATAL_ERROR;
      // Because ValidState is what is set in BaseComponent this won't compile
      // Type 'OtherValidStates' is not assignable to type 'DefaultValidStates | undefined'.
    }, 3000)
  }
}

干杯，

編輯：試圖澄清問題。

Answer 1

可能的解決方案

底座 Class

import { Component, OnInit } from '@angular/core';

export enum DefaultValidStates {
  LOADING = 'LOADING',
  READY = 'READY',
}

@Component({
  selector: 'app-base',
  template: '<p>BaseComponent status = {{status}}</p>',
})
export class BaseComponent<States = undefined, ValidStates = States> implements OnInit{

  constructor() {}

  ngOnInit() {
    this.status = DefaultValidStates.LOADING;
    window.setTimeout(() => {
      this.status = DefaultValidStates.READY;
    }, 3000)
  }

  private _status: DefaultValidStates | ValidStates | undefined;

  get status(): DefaultValidStates | ValidStates | undefined {
    return this._status;
  }

  set status(status: DefaultValidStates | ValidStates | undefined) {
    this._status = status;
  }
}

擴展

import {Component, OnInit} from '@angular/core';
import {BaseComponent, DefaultValidStates} from "../base/base.component";

enum OtherValidStates {
  FATAL_ERROR = 'FATAL_ERROR',
}

@Component({
  selector: 'app-other',
  template: '<p>OtherComponent status = {{status}}</p>',
})
export class OtherComponent extends BaseComponent<OtherValidStates> implements OnInit {
  constructor() {
    super();
  }
  ngOnInit() {
    this.status = DefaultValidStates.LOADING;
    window.setTimeout(() => {
      this.status = OtherValidStates.FATAL_ERROR;
    }, 3000)
  }
}