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

Encountering a "subscribe is not a function" error while attempting to utilize a JSON file in Angular 2

What is the process for uploading an array of files with AngularFire2 and Firebase Storage?

Deciphering the TypeScript type in question - tips and tricks

Struggling to make the paste event function in Typescript

Swap out the traditional for loop with a LINQ query utilizing the any method

TypeScript failing to correctly deduce the interface from the property

When utilizing the Turf.nearPoint() function, it is important to consider the type of point being used. The documentation for Turf.nearestPoint() appears to be inaccurate

Unsure about the commit hash referenced in the tsd.json file

Using TypeScript to Implement Content Security Policy Nonce

TSLint warning: Duplicate identifier detected - 'err'

Utilizing Typescript for constructor parameter assignments

When trying to click the button in Navbar.jsx, I encounter an error when attempting to invoke the setShowCart(true) function

Creating a ref with Typescript and styled-components: A comprehensive guide

How to form an array using rxjs before the adding sequence is completed

Developing Derived Classes in Typescript

Issue with Formik compatibility in Next JS 14 Application Structure

No matter the circumstances, the "Unexpected end of form" error consistently appears when attempting to upload files in Express

How can I retrieve all element attributes in TypeScript using Protractor?

Using TypeScript, implement a function that is called when a React checkbox's state changes to true

Saving a user with a BLOB avatar in Angular 5: Tips and Tricks for Success