Troubleshooting compilation issues when using RxJS with TypeScript

Question

Troubleshooting compilation issues when using RxJS with TypeScript

Having trouble resolving tsc errors in the code snippet below.

This code is using rxjs 5.0.3 with tsc 2.1.5

import { Observable } from 'rxjs/Observable';
import { Subject } from 'rxjs/Subject';
import 'rxjs/Rx';

let subject = new Subject();

Observable.merge(subject, Observable.interval(500))
  .startWith(new Date())
  .scan((acc, curr) => {
    const date = new Date(acc.getTime());
    date.setSeconds(date.getSeconds() + 1);
    return date;
  })
  .subscribe(v => {
    let today = v.toISOString();
    console.log(today);
  });

The errors encountered are:

node_modules/rxjs/Observable.d.ts(68,60): error TS2304: Cannot find name 'Promise'.
node_modules/rxjs/Observable.d.ts(68,70): error TS2304: Cannot find name 'Promise'.
node_modules/rxjs/observable/PromiseObservable.d.ts(40,31): error TS2304: Cannot find name 'Promise'.
node_modules/rxjs/observable/PromiseObservable.d.ts(41,26): error TS2304: Cannot find name 'Promise'.
node_modules/rxjs/operator/toPromise.d.ts(2,60): error TS2304: Cannot find name 'Promise'.
node_modules/rxjs/operator/toPromise.d.ts(3,79): error TS2304: Cannot find name 'Promise'.
node_modules/rxjs/operator/toPromise.d.ts(3,89): error TS2304: Cannot find name 'Promise'.
test.ts(10,31): error TS2339: Property 'getTime' does not exist on type 'number | {}'.
  Property 'getTime' does not exist on type 'number'.
test.ts(15,19): error TS2339: Property 'toISOString' does not exist on type 'number | {}'.
  Property 'toISOString' does not exist on type 'number'.

typescript rxjs

Answer 1

Answer №1

It seems like you're trying to call "Date" methods on a regular number here. It looks like "acc" is being treated as a date or has already been converted to a number and you are still trying to use it as a date.

If I were to make an educated guess, modifying this line:

const date = new Date(acc.getTime());

To something like this might help:

const date = new Date(acc).getTime();

This modification could potentially solve the issue you are facing. Alternatively, considering that you are returning "date":

const date = new Date(acc);
date.setSeconds(date.getSeconds() + 1);
return date.getTime();

Another approach you could take is:

let today = new Date(v).toISOString();
console.log(today);

Please refer to the documentation for "scan" (you may find using "seed" instead of "startWith" to be beneficial):

acc: Any - represents the accumulated value.
currentValue: Any - denotes the current value.
index: Number - signifies the present index.
source: Observable - indicates the current observable instance.
[seed] (Any): Refers to the initial accumulator value.

Answer 2

It seems like you're trying to call "Date" methods on a regular number here. It looks like "acc" is being treated as a date or has already been converted to a number and you are still trying to use it as a date.

If I were to make an educated guess, modifying this line:

const date = new Date(acc.getTime());

To something like this might help:

const date = new Date(acc).getTime();

This modification could potentially solve the issue you are facing. Alternatively, considering that you are returning "date":

const date = new Date(acc);
date.setSeconds(date.getSeconds() + 1);
return date.getTime();

Another approach you could take is:

let today = new Date(v).toISOString();
console.log(today);

Please refer to the documentation for "scan" (you may find using "seed" instead of "startWith" to be beneficial):

acc: Any - represents the accumulated value.
currentValue: Any - denotes the current value.
index: Number - signifies the present index.
source: Observable - indicates the current observable instance.
[seed] (Any): Refers to the initial accumulator value.

Answer 3

Answer №2

If you need to rectify the type errors, you can take the following steps.

npm install --save-dev @types/core-js

To address the remaining errors, I have assigned the types for acc and curr as any. The updated code below has been corrected and is now compiling and executing without any issues.

import { Observable } from 'rxjs/Observable';
import { Subject } from 'rxjs/Subject';
import 'rxjs/Rx';

let subject = new Subject();

Observable.merge(subject, Observable.interval(500))
  .startWith(new Date())
  .scan((acc: any, curr: any) => {
    const date = new Date(acc.getTime());
    date.setSeconds(date.getSeconds() + 1);
    return date;
  })
  .subscribe(v => {
    let today = v.toISOString();
    console.log(today);
  });

Answer 4

If you need to rectify the type errors, you can take the following steps.

npm install --save-dev @types/core-js

To address the remaining errors, I have assigned the types for acc and curr as any. The updated code below has been corrected and is now compiling and executing without any issues.

import { Observable } from 'rxjs/Observable';
import { Subject } from 'rxjs/Subject';
import 'rxjs/Rx';

let subject = new Subject();

Observable.merge(subject, Observable.interval(500))
  .startWith(new Date())
  .scan((acc: any, curr: any) => {
    const date = new Date(acc.getTime());
    date.setSeconds(date.getSeconds() + 1);
    return date;
  })
  .subscribe(v => {
    let today = v.toISOString();
    console.log(today);
  });

Troubleshooting compilation issues when using RxJS with TypeScript

Answer №1

Answer №2

Similar questions

What is the best way to create an Office Script autofill feature that automatically fills to the last row in Excel?

What is the best way to choose checkboxes from data that is passed dynamically?

The Context API's `useContext` hook appears to be malfunctioning, persistently

What is causing the issue with TypeScript's React.createRef() and its compatibility with the material-ui Button element?

Linking Redux to the highest level of my application is not functioning as expected

Using React with Typescript: Can the parent component access data fetched from a nested child component?

Angular 6: Utilizing async/await to access and manipulate specific variables within the application

Generate a dynamic key object in Angular/TypeScript

Necessitating derived classes to implement methods without making them publicly accessible

Encountering a type error with gatsby-plugin-dark-mode in a Typescript Gatsby setup

ESLint warning: Potentially risky assignment of an undetermined data type and hazardous invocation of an undetermined data type value

The Material UI Datagrid is failing to display any data

Cluster multiple data types separately using the Google Maps JavaScript API v3

The absence of a template or render function in a Vue.js 3 and Quasar 2 component has resulted in an

The DataGrid is only displaying a single result instead of multiple results

utilize the getStaticProps function within the specified component

Maintaining the order of the returned values type is crucial when working with mapped objects in Typescript

Using Angular: A guide to setting individual values for select dropdowns with form controls

Issue with the physical back button on Android devices

Guide on setting up and configuring the seeder in MikroORM