Comments (2)
@branislav-brincko
The reason for this is that the | operator in TypeScript denotes a union of types, which means that a value of type Props1 | Props2 can be either of type Props1 or Props2. So if you pass both foo and bar props to MyComponent when it is expecting a value of type Props1 | Props2, TypeScript does not consider it an error because it still matches the type Props1 | Props2
One solution might be to add one more condition
if ("foo" in props && "bar" in props) {
throw new Error("MyComponent expects only one of foo or bar props");
}
from react.
@branislav-brincko The reason for this is that the | operator in TypeScript denotes a union of types, which means that a value of type Props1 | Props2 can be either of type Props1 or Props2. So if you pass both foo and bar props to MyComponent when it is expecting a value of type Props1 | Props2, TypeScript does not consider it an error because it still matches the type Props1 | Props2
One solution might be to add one more condition
if ("foo" in props && "bar" in props) { throw new Error("MyComponent expects only one of foo or bar props"); }
@KunalSalunkhe12 But I have doubt here, let's say If we have dynamic props instead of foo
and bar
. so I think that time we need to mention in different props. But we can achieve above thing by below snippets
type Props<T extends keyof any> = {
[K in T]: string;
};
function MyComponent<T extends keyof any>(props: Props<T>) {
return <div>{props[Object.keys(props)[0] as T]}</div>;
}
const UsageComponent = () => (
<div>
<MyComponent foo="foo" />
<MyComponent bar="bar" />
</div>
);
so in the above snippets, I am getting dynamic keys from the props and mentioned to the string. so we can leverage to mention different props without second, thought!
please correct me if I am wrong.
from react.
Related Issues (20)
- [Basic] useReducer: type safe dispatcher call HOT 2
- [Question] QUESTION_TITLE_HERE
- [Advanced] Wrapping/Mirroring a Component with ref forwarding
- facing errors
- not working
- Gene Piki wants to pay 0 USD to have this issue fixed
- JSX.Element is Deprecated HOT 11
- [Bug] The logo text is overflowing in small devices it should be truncate like mobile navigation. HOT 5
- Update CSS So that website can be accessible from any device of any width -- Solved HOT 8
- [Basic] Add resources to basic/recommended/talks.md HOT 3
- [Basic] Want to Fix Navbar Text Issue Without Truncating And Decreased Footer Logo Size Responsively For all Devices HOT 3
- Table of Content HOT 2
- Linked article on defaultProps docs is paywalled HOT 3
- add as a contributor? HOT 7
- [Basic] Linting page links are not working HOT 6
- CLASS METHODS AND CLASS PROPERTIES TITLES INTERCHANGED HOT 3
- [Advanced] ISSUE_TITLE_HERE
- [Advanced] Restrict useage of child component only as a child of a particular component HOT 3
- [Basic] Provide some docs on `memo` HOT 1
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 react.