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: https://i.sstatic.net/JRKYI.png
But if you define the type with just a string:
https://i.sstatic.net/BEi2G.png
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 need assistance with retrieving data from a firebase database and storing it in an array using typescript. Below is the code snippet I am working with: export class ViewUserPage { public list = []; public ref = firebase.database().ref(); public ...
I implemented lazy loading of modules in the following way: { path: 'main', data: {title: ' - '}, component: LandingComponent, resolve: { images: RouteResolverService }, children: [ { path: '', redirectTo: 'home&apo ...
Creating a signup component in my app using Firebase as the authentication method and database. After registering a new user, a key is generated and all user information, including the UID from authentication, is saved in the database. I want to use the UI ...
When working with the MUI Input API props and CSS, I encountered an issue related to the {error} and its use. This is how my code looks: const [value, setValue] = useState<string>(cell.value); const [startAdornment, setStartAdornment] = useState< ...
Having an issue with the leaflet-area-select plugin in my Angular9 project. Whenever I try to call this.map.selectArea, VSCode gives me an error saying that property 'selectArea' does not exist on type 'Map'. How can I resolve this? I& ...
Is it possible to create detailed custom user snippets in VS Code for TypeScript functions such as: someArray.forEach((val: getTypeFromArrayOnTheFly){ } I was able to create a simple snippet, but I am unsure how to make it appear after typing an array na ...
The scenario: both the client and server share a folder named shared when we make changes to the shared folder in our development process, we need the corresponding references to update in both the client and server the server seems to w ...
I encountered a problem with my application and found two related questions on the same topic. However, due to a lack of reputation, I am unable to comment or ask questions there. That's why I'm reaching out here... Recently, I integrated Redux ...
I'm curious, does Material UI specifically require TypeScript or can we use React JSX code instead? I've been searching for an answer to this question without any luck, so I figured I'd ask here. ...
Here is the code snippet I'm dealing with interface deviceInfo { Data: { model: string; year: number; }; } const gadget: deviceInfo.Data; I encountered a warning in vscode that indicates there ...
After creating an Angularjs provider in typescript, I found myself wondering if there might be a more efficient way to achieve the same outcome. My current provider serves as an abstraction for a console logger, with the interface primarily designed to s ...
Currently, I am utilizing the aws-cdk to create config rules for approximately 15 rules that we need to monitor and receive notifications on. Below is a snippet of the code for reference: // Code snippet showing the creation of multiple config rules My m ...
Currently, I am working on an interface where I need to implement the following structure: export interface Passenger { id: number, name: string, checkedIn: boolean, checkedInDate?: Date // <- Is it possible to make this f ...
I am attempting to create a specific output format for my locale files in the form of _locales/[locale_shortcut]/[file].json To achieve this, I am utilizing the file-loader plugin within webpack. While the documentation mentions the use of a function with ...
I am trying to retrieve data from the current user, specifically their company named "ZeroMax", and then store this data in a global variable. The purpose of this variable is to define the path for Firebase. I believe my code gives a clear understanding of ...
I have been struggling with an error in my code for the past two days and I can't seem to find a solution. Can someone please help me with this? The error message is as follows: [Error] WebSocket network error: The operation couldn’t be complet ...
I am currently working on an Angular/TypeScript application and have been able to debug the TypeScript code in Chrome thanks to the map files. Recently, I decided to install the Debugger for Chrome extension from Visual Studio Marketplace. You can find it ...
Upon filtering the data, the response obtained inside the findChildrens function is as follows: My expectation now is that if the object length of this.newRegion is greater than 1, then merge the children of the second object into the parent object's ...
I'm relatively new to developing Node.js applications for production. I've created an app using TypeScript for the backend of my Node.js project. Currently, in the package.json file, I have the following script section: "scripts": { ...
Currently, I am using a regular observable instead of an observableArray. This observable keeps an array of elements which is defined as follows: public arrayOfItems: IArrayItem[]; public arrayOfItems$: BehaviorSubject<IArrayItem[]> = new BehaviorSu ...