score:1
Accepted answer
unless some very clever person has a better solution, this should work:
const intent = {
none: "none" as "none",
primary: "primary" as "primary",
success: "success" as "success",
warning: "warning" as "warning",
danger: "danger" as "danger",
};
type intent = typeof intent[keyof typeof intent];
const classes = {
intent_primary: "foobar",
intent_none: "barfoo",
intent_success: "somecssclass",
intent_warning: "you get the idea",
intent_danger: "will robinson",
};
type intentkey = keyof typeof intent;
const keymap: {
[key in intentkey]: keyof typeof classes
} = {
primary: "intent_primary",
none: "intent_none",
success: "intent_success",
warning: "intent_warning",
danger: "intent_danger",
}
function test({ color }: { color: intentkey }) {
return classes[keymap[color]];
}
notice that this is type-safety at the cost of an explicit mapping.
Source: stackoverflow.com
Related Query
- Make sure that prop is a value from a constant - TS
- How do I make sure my first render with React has a value from localStorage?
- How to make a React component that accepts value like a HTML tag instead of taking it from attributes
- Whats the best way to make use of a counter variable in this nested 'map' loop so that each square key or value incremenents up from 1 to 9
- ReactJS: Pngquant failed to build, make sure that libpng-dev is installed
- React: why is that changing the current value of ref from useRef doesn't trigger the useEffect here
- Unable to load script from assets 'index.android.bundle'. Make sure your bundle is packaged correctly or you're running a packager server
- React: Invalid value for prop `savehere` on <div> tag. Either remove it from the element, or pass a string or number value to keep it in the DOM
- React: How does React make sure that useEffect is called after the browser has had a chance to paint?
- Setting a default value on a react select dropdown that is populated from an API call
- When calling super() in custom view, make sure to pass up the same props that your component's constructor was passed
- How to make a Header that Animates from Transparent to Opaque Color on Scrolling down in React-Native React Navigation 5?
- How to make input field editable that has a value in reactjs?
- ReactJS error: make sure to pass up the same props that your component's constructor was passed
- JavaScript using async/await to make sure I retrieve value before implementation, but still get 'undefined' returned
- Typescript - infer generic type from object prop value
- Will any prop apart from the value prop work inside Context.Provider
- How to make a loading animation that shows up when you click on a button? It should take up the full screen & should be from right to left & disappear
- How to update the correct state value in a parent component that gets its value from a child component using hooks in react?
- Component's state is derived from its prop and that prop comes from a async API call
- How to make a react component that can be controled from outside?
- React: How do i make a hidden page, that is only accessible from a login screen, when the username and password is correct?
- How to make a select input that is dependent on other inputs to always show a default value in React?
- select option from dropdown using API and get that selected value but i am getting last value which i have not selected in react
- ReactJs: Refresh img tag after image update where url remains constant but the image from that url changes
- Test that a component does not render when passed a certain prop value with enzyme
- How to use the useHook in the component rather than passing the value returned from it as a prop to the components using react and typescript?
- Pass prop value down from login component to routes component
- React - How to make a modal component that I can call from anywhere?
- Warning:Invalid value for prop `data-callback` on <div> tag. Either remove it from the element, or pass a string or number value to keep it in the DOM
More Query from same tag
- How to fix get request and response with whole html
- Making a function component from a class component. What is props here?
- How can I concatenate index to a function in Reactjs elements
- The React Application does not work as intended when submitting a form
- How do i access a function in a component with a button in a different component in React?
- Any alternatives to "e" in event handlers in React?
- NextJS environment variables aren't working
- displaying child div on hover on parent div in react js
- Pass child data to parent on an onClick event triggered in parent in React
- using browserify-css in gulp
- How can I test changing states in React?
- How do I run .map() starting from the second index onward?
- I want to change the state value of array while using Redux toolkit
- Need help mapping in json fetch
- <input> cannot appear as a child of <tr>
- I want to use useEffect once i submit a form and take the value from input field and assign it to a api url and get response
- Add css to existing applied css based on condition in reactjs?
- Set state of react component before mount with firebase data
- react router v4 about how to match two url with one route and one component
- React testing library: how to getByRole on custom role
- How can i render the selected option using React_Select?
- Correct way to calculate download percentage with node-fetch
- Anchor links in GatsbyJS + React
- Running Node & React on AWS Elastic Beanstalk
- Preload Images from URL React
- Passing int values from one react component to another with Google Maps API
- react-transition-group not working with React Router
- How to prevent React from posting back when submit button is pressed
- Inovua React Data Grid - can't set textAlign column property (typescript)
- How to test react-router with enzyme