This expression is not callable Type 'String' has no call signatures

Question

In my Typescript Function, when I set the type annotation to String, I receive the error "This expression is not callable Type 'String' has no call signatures." as seen in the code below.

function thing<T>(setThingState: string ){

    return Axios.request({
        method: 'get',
        url:'https://jsonplaceholder.typicode.com/todos/',//'https://jsonplaceholder.typicode.com/todos/'
    }).subscribe(
        response => {
            console.log(response);
            setThingState({ message: response.status });
        },
        error => {
            console.log(error);
            setThingState({ message: '404' });
        }
    );

}

However, if I set the type to Any, then I have no issues. As seen in the code below. I'm still wrapping my head around TypeScript, so any feedback would be appreciated.

function thing<T>(setThingState: any ){

    return Axios.request({
        method: 'get',
        url:'https://jsonplaceholder.typicode.com/todos/',//'https://jsonplaceholder.typicode.com/todos/'
    }).subscribe(
        response => {
            console.log(response);
            setThingState({ message: response.status });
        },
        error => {
            console.log(error);
            setThingState({ message: '404' });
        }
    );

}

This Function is then being called in a React Functional Component, with Redux as seen in the following:

const [thingState, setThingState] = useState({ message: ''});
    function testCall(){
        thing(setThingState);
    };

Reflector

You're trying to call it as if it is a function here: setIssuerCallState({ message: response.status }); and again a few lines later. Obviously TypeScript won't allow that on a string. Why are you trying to annotate it as string if it's not a string? – Chrome

What would you expect const a = "string"; a() to do? – Diagnostician

@Chrome -- Thank you, I understand what I'm doing wrong now. I just needed that second pair of eyes, I guess. – Reflector

I meant no disrespect! I was merely trying to illustrate the what typescript is trying to tell you by the error you are getting. We were all beginners once. You've asked a very clear question that I am happy to help you with :) – Diagnostician

Answer 1

You typed setIssuerCallState as a string. And you cannot invoke a string.

You are basically doing:

const aString = "a string"
aString() // error

It looks like the proper type for this function would be:

function IssuerCall(setIssuerCallState: (newState: { message: string }) => void) {
   //...
}

Now setIssuerCallState is typed as a function that takes a single argument that is an object with a message property.

Diagnostician

Thank you -- why do I need "void"? I see in the TypeScript docs that "Do use the return type void for callbacks whose value will be ignored" -- So I can use this an a learning opportunity, can you explain to me why this works? I'm not ignoring value of message. – Reflector

void is the return type. A function type in typescript looks like (arg1: Type) => ReturnType. So the void after the arrow there is saying that you don't care what the setIssuerCallState function returns. I assumed it was void since you do not assign or use the return value of the function. Typically, for functions that change state (like from React) they do not return a value. And this looked like that kind of function. Read the docs on function types for more info – Diagnostician

Answer 2

setIssuerCallState is a function, so setting it as string will give you the error String' has no call signatures.

Try setting the type of setIssuerCallState as setIssuerCallState: (param: any) => void

function IssuerCall<T>(setIssuerCallState: (param: any) => void ){

return Axios.request({
    method: 'get',
    url:'https://jsonplaceholder.typicode.com/todos/',//'https://jsonplaceholder.typicode.com/todos/'
}).subscribe(
    response => {
        console.log(response);
        setIssuerCallState({ message: response.status });
    },
    error => {
        console.log(error);
        setIssuerCallState({ message: '404' });
    }
);
}

Govea

Answer 3

I ran into a similar error message when I tried to use triple backticks instead of single backticks in javascript:

   ```
   I thought this would work
   ```

   `
   but this was correct
   `

The error was because it was interpreting the first two backticks as a seperate string, and then trying to use that string as a tag function on the template literal.

Just