Jim Smith's Blog

Is not assignable to type intrinsicattributes

Jim Smith's photo
Jim Smith
·

4 min read

I know that seeing this error message might not be a cause for celebration, but it's not that bad! Let's start by taking a closer look at the error message: ERROR in

/Users/xxx/Desktop/test.ts(4,9): (just for understanding)

4:9 Argument of type '" string"' is not assignable to parameter of type 'number'. This is informing you of the particular nature of the issue. The compiler is telling you that "function" is of a type-- function(parameter: number) --that does not accept any other parameters. If you look at the type for function (again, on the left-hand side), you'll see that the only parameter the function takes is a number. You must either give the function another parameter or remove the second one from your call to it. Read the error message carefully, and you can easily figure out how to fix it!

Image description

Is not assignable to type intrinsicattributes (explanation)

You’re familiar with the concept of functions, right? You can see that function is a type and it takes a parameter (a number). But look at the error message. The message states, "Function(parameter: number) cannot be applied to intrinsicattributes." So how does this fit into our understanding of what functions are?

Well, we know that there are a bunch of different types in TypeScript. We also know that there are some types that you can use as parameters, but others that aren’t allowed. For example, if I try to use ‘intrinsicattributes’ as a parameter for our function above, I get another error:

The code is a function that takes just one parameter, which happens to be of type number. This means the number could be any whole number from -infinity to infinity and it wouldn't matter. But the function doesn't take anything else. It has no return type (because there's no need for one) and does not accept any other parameters.

Reasons for this error

Reading the error message carefully is important because the error message should give you a hint as to what is wrong. It should instruct you on how to resolve the issue.

For example, if an error says: "Is not assignable to type intrinsicattributes", that might mean that there's some kind of syntax issue preventing your code from compiling correctly. The solution would be fixing whatever syntax error caused this problem in your code-- for example, it may be that you're missing some punctuation somewhere or using an incorrect symbol in one of your variable names or function parameters.

The Solution

You must either give the function another parameter or remove the second one from your call to it.

Let's dissect this error message one by one:

  • You must either give the function another parameter or remove the second one from your call to it. This is where we get into syntax land, so be prepared for a bit of jargon (and also be aware that you can ignore this part if you're not a programmer).
  • The word "must" indicates that this error requires immediate action to correct.
  • "another" means that there was already at least one parameter: yourself! That doesn't help in fixing our problem though; let's move on.
  • You need to add some more information—a variable, maybe?—to show what kind of thing is being referenced here. It's possible that instead of providing what IntrinsicAttributes expected as input, you accidentally gave it something else entirely without realizing it! That's why I said earlier in this article that errors like this can sometimes be hard: because even when they tell us exactly what went wrong and how we could fix it if given enough time, they don't always explain exactly what happened here or why those specific instructions were necessary (though those details are often available somewhere). So now let's try running IntrinsicAttributes(x) again: Here is an example

To add the props type, simply specify the component type correctly:

interface IMyProps {myValue: boolean,}
const MyComponent: React.FC<IMyProps> = (props: IMyProps) => {...}
export
default MyComponent;

Then you may put it to use as follows:

import MyComponent 
from '../MyComponent';...
return <MyComponent myValue={true} />

The good news is that typescript is now checking for only sending arguments that are present in the props interface (can prevent typos and so on).

For the standard component, something along the lines of:

class MyComponent 
extends React.Component<IMyProps, IMyState>{constructor(props: IMyProps){}}
export 
default MyComponent;

The Conclusion

I'm going to assume that your first name is "Hello", and you're looking for a job as a programmer. If this is the case, then I'd say there's no better way to get hired than by asking questions on Stack Overflow, where they can be seen by literally millions of people.

TypeScriptReact