Suppose you have these type definitions:
type Panel = 'store' | 'logs'
You aim to construct an object containing key => ReactChild pairs, where the keys are restricted to the values in Panel.
const components = {
store: StoreComponent,
logs: LogsComponent
}
In this scenario, how would you specify the type of the components object?
If you're in search of the perfect solution, the predefined mapped type Record is exactly what you need. This incredible feature allows you to combine keys and generate an object type where each property is assigned a specific type as specified in the second parameter of the type:
type Tab = 'products' | 'orders'
const components: Record<Tab, ReactElement> = {
products: ProductsComponent,
orders: OrdersComponent
}
To create a restriction on keys, one can use a combination of enum and types like so:
enum Section {
products,
users
}
type CustomObject = Partial<{ [ item in keyof typeof Section ]: ReactNode }>
const obj1: CustomObject = {
products: 2 // valid entry
}
const obj2: CustomObject = {
something: 'test' // key is not allowed
}
In this scenario, ReactNode is simply representative of any type for illustrative purposes.
If you're looking for a solution, consider using an enum in this scenario:
enum Tab {
Home = 'home',
About = 'about',
};
...
const components = {
[Tab.Home]: HomeComponent,
[Tab.About]: AboutComponent,
}
One alternative approach to achieve reusable typing could involve establishing a relationship between keys and types, followed by creating a union type PaneMap that outlines the expected value type for each key within Panel:
type Panel = "store" | "logs"
/*
Establish a reusable type relationship
*/
type PanelRelation<K extends Panel, V> = { [key in K] : V }
/*
Define a union type that specifies the relationship between keys from Panel and
their corresponding value types. This ensures that each key is correctly mapped
to a specific value type
*/
type PanelMap =
PanelRelation<'store', StoreComponent> &
PanelRelation<'logs', LogsComponent>
/* Example of how it can be used */
type LogsComponent = string
type StoreComponent = number
const object:PanelMap = {
"store": 1,
"logs": "x",
// "logs": 1, <-- this would lead to a type mismatch error as expected
// "foo": 1, <-- foo key not part of Panel leads to an expected error
}
To maintain the data type of an item, consider utilizing the fulfills operator in TypeScript versions 4.9 and above.
type Panel = 'shop' | 'documents'
const item = {
shop: ShopItemComponent,
documents: DocumentsComponent
} as const fulfills Record<Panel, ReactElement>;
The data type of ShopItemComponent would be assigned to item['shop'].
Currently, I am working on a web application using Node.js. In my project, I have two main files. The first one is Server.js, where I handle server actions such as going online. The second file contains a large object filled with data. I successfully impo ...
The Namespaces chapter provides an example involving D3.d.ts that I find puzzling. Here is the complete example: declare namespace D3 { export interface Selectors { select: { (selector: string): Selection; (element: ...
Exploring ways to streamline imports in my NextJs Project (v14.1.3), I'm interested in finding a method to modify the import statement below: import foo from 'path/to/foo/foo' To possibly simplify it to: import foo from 'path/to/foo&ap ...
I was struggling to make the code work on certain browsers. The code you see in the resource URL below has been a collection of work-around codes to get it functioning, especially for Android browsers and Windows 8. It might be a bit sketchy as a result. ...
In my redux slice, I have defined a MyState interface with the following structure: interface MyState { key1: string, key2: boolean, key3: number, } There is an action named set which has this implementation: set: (state: MyState, action: PayloadAct ...
Is there a way to store my NodeJS config in the global scope efficiently? I came across this helpful post on Stack Overflow about Extending TypeScript Global object in node.js, and I've tried implementing it along with other solutions suggested by th ...
The data structure: export const myTable = mysqlTable( "MyTable", { id: varchar("id", { length: 191 }).notNull(), value: decimal("value", { precision: 7, scale: 4 }).notNull(), createdAt: datetime("created ...
Attempting to create a hidden side navbar using Jquery and Bootstrap 4. Struggling with the .on('click', ...) event handler for a button not hiding the sidebar as expected despite all files loading correctly according to the developer tools. Atte ...
As I develop my web application, it is crucial for me to track the lines of code written in languages such as php, css, html, and JavaScript specific to the /var/www directory. However, when using the command line code counter tool, I find myself tempted ...
I have set up a script that sends an email notification whenever someone comments on my Facebook comment box. The script uses FB.event.subscribe to trigger an AJAX call to mail.php on my server, which then sends an email to my address. How can I enhance ...
Here is the code snippet I am working with: <input type="text" style="text-transform: uppercase" /> When using this code, characters like ü are transformed to Ü. However, I want ü to be transformed to U, so for example, Gülay should become GULA ...
Can the Redux Store be developed as a separate npm package for a React App and then imported into it? For instance: Assuming there is a fictional React Project named reactapp. A package called reactapp-reduxstore is created containing the Redux Store, al ...
Looking for help with this basic javascript code snippet. $('#about_us').on('click',function() { $('#slider').toggleClass('open'); }); I'm trying to find a way to activate this function by pressing the lef ...
Seeking a JavaScript/jQuery function for a full page slider functionality. The HTML structure I'm working with is as follows: My objectives are twofold: Both slide1 and slide2 should occupy the full width of the page. Additionally, I am looking for ...
I am currently in the process of creating a highly sortable and filterable image gallery that utilizes numerous tags. The inspiration for this project stems from a similar question on Stack Overflow regarding dropdown menus and checkboxes. You can view the ...
My infinite scroll code is causing a problem - it only works when scrolling up, not down. Can someone help me fix this issue? <script type="text/javascript"> $(document).ready(function(){ $(window).scroll(function(){ var lastID = $(&apos ...
I am searching for a method to display and play different YouTube videos based on a selected CSS style from a drop-down menu. I believe JavaScript can be utilized to detect the chosen CSS. Include the following in the html header of the page. <script ...
As a beginner in node.js and express.js, I find myself stuck on a problem that I'm hoping someone can help me solve. I have data stored in Redis. redis 127.0.0.1:6379> hgetall "store1" 1) "apple" 2) "10" 3) "banana" 4) "15" 5) "pear" 6) "20" 7) "n ...
When I select a row, I want to set the map center to the provided coordinates in Primeng. The issue is that while this.options works fine in ngOnInit, it doesn't work when called in the showCords() function. Below is my code: gmap.component.ts im ...
I am using Bootstrap validation and I do not want the green checkmark to be displayed when the inputs are correct. I searched the Bootstrap documentation but could not find a way to hide the green checkmarks. <script> // Here is an example of Java ...