Typescript: Error TS2346 when importing React components written in JavaScript

Created on 25 Apr 2017  ·  6Comments  ·  Source: microsoft/TypeScript



TypeScript Version: 2.3.0

Code
See repo here: https://github.com/mohsen1/ts23-super-issue

import React from 'react';

export default class Component extends React.Component {
    constructor(...args) {
        super(...args)
    }
}

Expected behavior:

No error

Actual behavior:

Error: src/component.js(5,9): error TS2346: Supplied parameters do not match any signature of call target.
Duplicate

Most helpful comment

Has this not been fixed or am I doing someting wrong? Just ran into this issue with typescript 2.9.1

    public handleSpawnError(pythonCommand:string, pythonPath:string, err:string){
        this.pythonPreview.handleSpawnError(...arguments)
         // gives me error: Expected three arguments, but got 0 or more
    }

pythonPreview:

    public handleSpawnError(pythonCommand:string, pythonPath:string, err:string){
        // ... code is irrelevant
    }

All 6 comments

This is a very common pattern in React. For now we can @ts-ignore that line.

import React from 'react';

export default class Component extends React.Component {
    constructor(...args) {
        // @ts-ignore
        super(...args)
    }
}

It also seems that TypeScript ignores the good 'ol es5 spread pattern:
super.apply(this, ...args);

A more complete demo:

function bar(a: any, b: any, c: any): void { 
    console.log(a, b, c);
}

function foo(a: number, b: number, c: number): void {
    bar.apply(null, arguments);
}

Has this not been fixed or am I doing someting wrong? Just ran into this issue with typescript 2.9.1

    public handleSpawnError(pythonCommand:string, pythonPath:string, err:string){
        this.pythonPreview.handleSpawnError(...arguments)
         // gives me error: Expected three arguments, but got 0 or more
    }

pythonPreview:

    public handleSpawnError(pythonCommand:string, pythonPath:string, err:string){
        // ... code is irrelevant
    }

(super as any)(...args)

I couldn't find online any good solution to writing stuffs like:

authenticateUser = (...args: any[]) => this.authManager.authenticateUser(...args);

Is there any update on a way to do this without having to do something ugly like:

authenticateUser = (...args: any[]) => (this.authManager.authenticateUser as any)(...args);

Was this page helpful?
0 / 5 - 0 ratings

Related issues

MartynasZilinskas picture MartynasZilinskas  ·  3Comments

fwanicka picture fwanicka  ·  3Comments

DanielRosenwasser picture DanielRosenwasser  ·  3Comments

CyrusNajmabadi picture CyrusNajmabadi  ·  3Comments

jbondc picture jbondc  ·  3Comments