Cannot invoke an expression whose type lacks a call signature. Type 'typeof “”' has no compatible call signatures React TypeScript

3
votes

I'm trying to convert three scripts from Javascript to TypeScript. The scripts can be found in this gist. I do however have one error left that I can't get rid of. Please note that this is my first React and TypeScript project so I can easily have missed something obvious. I'm using .tsx files and TypeScript 2.1.

In the file: GoogleApiComponent.tsx

import * as cache from './ScriptCache'
...
componentWillMount() {
    this.scriptCache = cache({ <--Error TS2349 here
        google: GoogleApi({
            apiKey: apiKey,
            libraries: libraries
        })
    });
}

Gives me this error:

Cannot invoke an expression whose type lacks a call signature. Type 'typeof "ScriptCache"' has no compatible call signatures.

ScriptCache.tsx looks like this:

let counter = 0;
let scriptMap = new Map();

export const ScriptCache = (function (global: any) {
    return function ScriptCache(scripts: any) {
        const Cache: any = {}
        ...
2
javascriptreactjstypescript
Please give a full example. This could also be caused by how you import/export your modules + on what line the error occurs. – Sebastian Sebald
@SebastianSebald You were right, it was an import error! Thank you so much! – Ogglas

2 Answers

7
votes

Looks like you're import is not correct :)

Please try to import it like this import cache from './ScriptCache'. If you just used the code from the gist the cache is also exported as default.

If this does not work, try import { ScriptCache as cache } from './ScriptCache'. You do not need the as syntax. This is just so you don't have to change the variable names.

2
votes

Turned out to be an import error as suggested by @Sebastian Sebald.

Wrong:

import * as cache from './ScriptCache'

Correct:

import cache from './ScriptCache'