Comments (14)
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'sundefined
(or missing) from theHTMLButtonProps
, or it'sstring | UrlObject
(but neverundefined
) from theHTMLLinkProps
. So by checking forundefined
you make sure your value is not aHTMLButtonProps
.
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 notundefined
: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 emptystring
, 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.
Related Issues (20)
- Suboptimal completion list for template literal type member
- Document `maxNodeModuleJsDepth` behavior HOT 8
- Conditional (using extends) parametrised type inference seems to be inconsistent HOT 2
- Assertion failure when move-to-file code contains entities from ambient module
- Design Meeting Notes, 8/20/2024
- `lib.d.ts` Updates for TypeScript 5.7
- Object.keys doesn't return correct type HOT 2
- Unions of assertion functions do not act as assertion functions HOT 3
- wrong behavior about type parameters of `as` clause in a mapped type HOT 2
- Type is not referred correctly in the while loop HOT 4
- Interface type coercion fails with unsatisfied properties in unions HOT 1
- Generic type narrowing for truthy check has inconsistent / incorrect behavior HOT 1
- `rootDirs` is not working as expected. HOT 9
- Function inference is incorrect with inline const objects HOT 1
- No typechecking error in code that uses an uninitialized variable due to circular reference HOT 1
- Readonly shorthand cast for expression where `as const` is forbidden
- Optimal TS monorepos: how to handle project references when projects opt out of composite within dependency chain HOT 2
- Auto accessor field types cannot be inferred from constructor
- The order of values ββin a union affects the correct type inference HOT 1
- Inlay variance hints
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. πππ
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google β€οΈ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from typescript.