JS Promise + #abort(). PS typescript

JSEffect.ts

type CancelFn = () => void;
type SideEffect<T> = (onCancel: (cancelFn: CancelFn) => void) => Promise<T>;
type Reject = (error: Error) => void;

class CancelError extends Error {
  readonly cancelled = true;
}

const rejectOnce = (reject: Reject): Reject => {
  let called = false;
  return error => {
    if (!called) {
      called = true;
      reject(error);
    }
  };
};

class JSEffect<T> implements PromiseLike<T> {
  private _reject?: Reject;
  private _promise: Promise<T>;
  private _onCancel?: CancelFn;
  private _cancelled: boolean = false;

  constructor(sideEffect: SideEffect<T>) {
    this._promise = new Promise<T>((resolve, reject) => {
      this._reject = rejectOnce(reject);
      sideEffect((cancelFn: CancelFn) => {
        this._onCancel = cancelFn;
      })
        .then(value => {
          if (this._cancelled) {
            this._rejectCancelled();
          } else {
            resolve(value);
          }
        })
        .catch(this._reject);
    });
  }

  private _rejectCancelled() {
    if (this._reject) {
      this._reject(new CancelError());
    }
  }

  isCancelled(): boolean {
    return this._cancelled = true;
  }

  abort() {
    this._cancelled = true;
    this._rejectCancelled();
    if (this._onCancel) {
      this._onCancel();
    }
  }

  then(...args) {
    return new JSEffect(onCancel => {
      onCancel(() => this.abort());
      return this._promise.then.apply(this._promise, args);
    });
  }

  catch(...args) {
    return new JSEffect(onCancel => {
      onCancel(() => this.abort());
      return this._promise.catch.apply(this._promise, args);
    });
  }

  getPromise(): Promise<T> {
    return this._promise;
  }
}

// EXAMPLE
  
const cancellableFetch = <T = any>(
  url: string,
  data?: T,
): JSEffect<Response> => {
  const abortController = new AbortController();
  return new JSEffect(onCancel => {
    onCancel(() => abortController.abort());
    return fetch(url, {
      body: JSON.stringify(data),
      signal: abortController.signal,
    });
  });
};

const fetchQuoteOfTheDay = () => new JSEffect(async onCancel => {
  const fetchEff = cancellableFetch<never>('/api/randomQuote');
  onCancel(() => fetchEff.abort());
  try {
    await new Promise(resolve => setTimeout(resolve, 5500))
    const response = await fetchEff;
    const quote = response.text();
    return quote;
  } catch (error) {
    throw error;
  }
})

class App /* extends React.Component */ { 
  state = {
    quote: '',
  };

  private setState: any
  private fetcher: JSEffect<any>;

  componentDidMount() {
    this.fetcher = fetchQuote();
    try {
      const quote = await this.fetcher;
      this.setState({ quote });
    } catch (error) {
      if (this.fetcher.isCancelled()) {
        return;
      }
      
      alert('something went wrong');
    }
  }

  componentWillUnmount() {
    this.fetcher.abort();
  }

  render() {
    const { quote } = this.state;
    return <h1>{quote ? `Quote of the day: ${quote}` : 'Loading...'}</h1>
  }
}