Hey there! I'm new to TypeScript and I'm a bit confused about the purpose of
(keyof FormValues & string) | stringexport type FieldValues = Record<string, any>;
export type FieldName<FormValues extends FieldValues> =
| (keyof FormValues & string)
| string;
export type FieldValue<FormValues extends FieldValues> = FormValues[FieldName<
FormValues
>];
The data type is incorrect. The FieldName type will always be evaluated as a string, regardless of the input provided. Here are a few examples to consider:
type X = FieldName<{ x: string }> // X is string
type Y = FieldName<{y: number, z: string}> // Y is string
type Z = FieldName<{w: boolean, q: string}> // Z is string
The problem lies in the union part:
export type FieldValues = Record<string, any>; // object type with string keys
export type FieldName<FormValues extends FieldValues> =
| (keyof FormValues & string) // intersecting with string
| string; // everything becomes string due to this line
If we want to specify a particular type, the final line | string negates the first line. Since keyof FormValues is a subset of string, the union results in just a string. In reality, the type should be defined as follows:
export type FieldName<FormValues extends {}> = keyof FormValues & string
type A = FieldName<{ x: string }> // A is "x"
type B = FieldName<{ m: number, n: string }> // B is "m" | "n"
type C = FieldName<{o: boolean, p: string}> // C is "o" | "p"
type D = FieldName<{1: string}> // D is never - accurate
Note that I no longer use FormFields since & string ensures that our key is strictly a string. Types from A to D consistently narrow down the result types, and for types with numeric keys, we get never as expected, considering only string keys.
As pointed out by @maciej-sikora, the combination of strings has caused some issues.
The keyof operation on a union of string-keyed types results in the type being evaluated as a string.
However, in certain rare cases, the code above actually does make sense.
Consider if you have a type that can accept any string as its key, but you also have a predefined set of keys. For instance, think about an investigation form that includes fields like age and name, along with any additional fields that users may input as keys.
By using the types defined below, Visual Studio Code will provide autocomplete suggestions in unexpected ways. For instance:
But if you define the type with just a string:
It's worth noting that even the first image was auto-completed based on keys from Form, even though it could technically be filled with any string value. Perhaps the code you provided is related to this interesting feature/bug.
I am currently developing a Next.js application and have created a custom hook called useAxios. I am looking to implement a type assertion similar to what can be done with useState. For example: const [foo, setFoo] = useState<string>(''); ...
I am having an issue with finding a declaration file for the module 'react-combine-styles' even after I installed it using npm install @types/react-combine-styles. import React, { useState } from "react"; import useStyles from "./u ...
I am currently working on developing a versatile sort function that can function with or without promises seamlessly. The intended structure of the function should look something like this: function sort<T>(list: T[], fn: (item: T) => string | nu ...
I am in need of an input that adheres to the following format: [00-23]:[00-59] Due to the limitations of Angular 2.4, where the pattern directive is unavailable and external libraries like primeNG cannot be used, I have been attempting to create a direct ...
I'm facing an issue while trying to utilize Buffer in my angular component ts for encoding the Authorization string. Even after attempting npm i @types/node and adding "node" to types field in tsconfig.json, it still doesn't compile with ng buil ...
I have encountered an issue while trying to display HTML content inside a tooltip element's title attribute. The HTML content is not rendering as expected and appears as text instead. Let me outline the structure of my Angular project: library.comp. ...
Recently, I've started working with React and Typescript and one of the challenges I'm facing is managing an editable table with default values that can be updated and submitted. The data format for the parameters is crucial as the fields and va ...
I'm currently working on a web application that can display URLs in an iframe. However, I also want to be able to test the URL before showing it in the iframe. The goal is to wait for a response and only display the iframe if there are no errors or if ...
I have a query regarding the most effective way to code this scenario: Within a class, I require a static variable that is accessible throughout the entire project: connection Singleton without namespace: class Broker { static connection: Connection = u ...
const Flex = styled(Stack, { shouldForwardProp: (prop) => calcShouldForwardProp(prop), })<LayoutProps>(({ center, autoWidth, autoFlex, theme }) => ({ })); This syntax is a bit confusing to me. I understand the functionality of the code, b ...
I am facing an issue with my Material Dialog not working properly. Can anyone point out what I might be missing? product-thumbnail.ts I will use this to trigger the dialog export class ProductThumbnailComponent implements OnInit { @Input() product: Pr ...
Encountering an interesting issue with MatTable pagination and grouping simultaneously. I have two components each with a Mat-table featuring Pagination+Grouping. ComponentOne functions smoothly without any issues. When choosing to display 5 elements pe ...
Here's the Angular component I'm working with: export class UserListComponent implements OnInit, OnDestroy { private _subscriptions: Subscription; private _users: User[] = []; private _clickableUser: boolean = true; constructor( priv ...
While trying to build an Angular application for server-side execution, I encountered the following errors: ERROR in ./src/app/shared/components/carousel/interface/Carousel.d.ts Module build failed: Error: /home/training/Desktop/vishnu/TemplateAppv6/src ...
Recently, I upgraded a Next project from version 12 to 14, and now I'm encountering numerous import errors when attempting to run the project locally. There are too many errors to list completely, but here are a few examples: Import trace for requeste ...
In the process of developing an Aurelia app, I am tasked with creating functionality that allows users to display various lists for different resources. These lists share common features such as a toolbar with search and refresh capabilities, along with a ...
I am new to TypeScript and I have some code that is functioning perfectly. I believe if I define a type somewhere, d3's generics will come into play? Within my code, I have an xAxis and a yAxis. Both are the same, but D3 seems to have an issue with t ...
I am facing a challenge with my React Typescript project where multiple files share a similar structure but have differences at certain points. To avoid manually copying and pasting files and making changes, I decided to create a Node script that automates ...
Recently, I updated my Angular application from version 8 to 9. After updating the packages and successfully compiling the application, I encountered an error message in the Chrome browser console: Error: Zone.js has detected that ZoneAwarePromise `(wind ...
Is there a way to use TypeScript types and default values in the "defineProps" function? I'm having difficulty getting it to work. Code snippet: const props = defineProps<{ type?: string color?: 'color-primary' | 'color-danger&a ...