An unobvious point when developing a Button-or-Link component. Optional href for tag a and mandatory for Link from Next.js. [5.5.2] about typescript HOT 14 CLOSED

Please fill out the issue template completely.

Just checking for truthiness of props.href is not enough to narrow the type, because the string can be empty and thus falsy. In that case your props still can be typed HTMLAnchorProps in line 31, which has incompatible properties with <button>.

You can explicitly check for a string instead: typeof props.href === "string"

from typescript.

From your pictures it's not clear what your issue is, but nothing indicates a bug in TypeScript, just trouble using it, and this issue tracker is not suitable as a general help forum. Perhaps you should try StackOverflow or the TypeScript discord?

from typescript.

You can explicitly check for a string instead: typeof props.href === "string"

It works in playground, but it doesn't work in my project. I am using nextjs 14.2.4

from typescript.

But at the same time, I still have the old versions

from typescript.

I've updated and the error still hasn't gone away.

from typescript.

The chain of actions and the appearance of errors:

1 Problem:
First there is the props type of the regular button and the props type of the link component from Next.js:

My button is highlighted in red just like that...

Questions:
Why is the button highlighted in red if there is nothing superfluous except the "POSSIBLE" href?

Even if I do a restructuring, I still have a mistake:

I can fix this by making this predicate:

And all my mistakes disappear.:

But at the same time, I lose the normal typing of props "type":

Instead of the typical: "button" | "submit" | "reset" | undefined
I get the type: string | undefined

from typescript.

From your pictures it's not clear what your issue is, but nothing indicates a bug in TypeScript, just trouble using it, and this issue tracker is not suitable as a general help forum. Perhaps you should try StackOverflow or the TypeScript discord?

https://codesandbox.io/p/devbox/test-typescript-q89n2h The error is not immediately loaded, but if you touch the button, it will appear

from typescript.

Screenshots are a terrible way to describe your issue, because most information is not accessible.

Nothing here indicates a bug in TypeScript, just a lack of understanding of either the types you work with, or how narrowing works.

In your "NextJS" case the typeof check for string does not work, because the href property of HTMLLinkProps is typed string | UrlObject. So if you check only for string it can still be a UrlObject in the else-branch, and this means the type HTMLButtonProps | HTMLLinkProps can't be narrowed to HTMLButtonProps, resulting in incompatible properties for your <button> from the still remaining HTMLLinkProps type.

For these types you can just check for undefined, because either it's undefined (or missing) from the HTMLButtonProps, or it's string | UrlObject (but never undefined) from the HTMLLinkProps. So by checking for undefined you make sure your value is not a HTMLButtonProps.

from typescript.

For these types you can just check for undefined, because either it's undefined (or missing) from the HTMLButtonProps, or it's string | UrlObject (but never undefined) from the HTMLLinkProps. So by checking for undefined you make sure your value is not a HTMLButtonProps.

I originally had this check, which also caused an error. If it were that simple, I wouldn't be writing here.

You don't have the option to use another framework in playground. And then it was another problem, which was fixed in a different way

You told me exactly the opposite (that you need to check the href for "string"), despite the fact that I said that this is an unusual html link tag, a Link, which the screenshots prove. But even if you omit this point, it still causes an error If I correct for another check.

Once again, please go in for example and see that it still causes an error. I made 2 components with different checks. One specifically for undefined, and the other for the presence of this props in principle:
https://codesandbox.io/p/devbox/test-typescript-q89n2h

from typescript.

If your href property is undefined, then you're dealing with a HTMLButtonProps. In your second image you're trying to use HTMLButtonProps for the <Link> element, and vice versa HTMLLinkProps for the <button> element.

Either swap the elements, or check if href is not undefined: typeof props.href !== "undefined".

And just checking for truthyness of href like in your first image does not work, because it can be an empty string, which is falsy, but it's not enough to narrow the type.

from typescript.

Either swap the elements, or check if href is not undefined: typeof props.href !== "undefined".

Okay, I'll agree on that. I wrote the condition incorrectly because I was in a hurry.

Let's move on. Why do I lose button typing if I don't have an href?

https://codesandbox.io/p/devbox/test-typescript-q89n2h

Why did my type narrow down to the HTMLButtonProps type, then it should show me in "type" everything that fits the button.
I checked, ComponentProps<"button"> has these types

from typescript.

I'm sorry, but I'll drop out of this issue. Again, nothing you have shown here indicates a bug with TypeScript, and this is the wrong place for general support / for teaching language basics. The issue tracker is not meant as a support forum, it's for bugs with TypeScript and feature requests.

from typescript.

And just checking for truthyness of href like in your first image does not work, because it can be an empty string, which is falsy, but it's not enough to narrow the type.

Why does the question highlight to me the error of a ton of unnecessary text, but does not highlight the main one, that my UrlObject type does not fit the condition or string does not fit the condition or that I may have an empty one that does not fit or fits (again, to the reflection that string prevents me). Why is this the purpose of this tool, but it just doesn't perform this function to protect me from unnecessary types. It does, but what's the point of doing it as a dev tool if it helps the developer half and, conversely, confuses, with this error output

from typescript.

Thanks: learn the basics. Your task of the tool, as well as typing, is to protect against non-obvious moments and strange javascript typing, so that it would be more explicit. From unnecessary or incorrect types, but instead, on the contrary, it confuses me even more and does not help.
That's why I use your tool, so that there are no problems, but it seems exactly the opposite

from typescript.