Utilizing Typescript to define key-value pairs within a structured form

Question

Utilizing Typescript to define key-value pairs within a structured form

I've been creating a form structure that's functioning smoothly, but I've encountered an interesting issue with field validation in the validation part.

While my Visual Code is pointing out that 'required2' in the phone constant needs to be changed to 'required', the phonefield item within the fields collection of the form constant doesn't raise any complaints about using 'required2'. It only becomes invalid when the interface shows 'required' instead of 'required2'.

My objective is to limit validation on a per-form-field basis to prevent unauthorized additions to the validation dictionary.

It's worth noting that changing 'phonenumber' to 'phonenumber2' results in incorrect typing, while altering the 'required' key doesn't affect it since it isn't necessary.

Here are my interfaces:

declare type fields = IPhoneField | ISelectField ..etc;

export interface IPage {
  title?: string;
  buttons?: IButton[];
  fields: fields[];
  showOn?: IDictionary<string | number>;
}

export interface IForm {
  modelPreset: IDictionary<string | number>;
  successPageConfig?: IDictionary<string | number | boolean>;
  presentation: pagePresentation;
  pages: IPage[];
}

interface IField {

  label: string;
  model: string;
  placeholder?: string;
  addon?: string;
  showOn?: IDictionary<string | number>;
  maxlength?: number;

}

export interface IPhoneField extends IField {
  type: 'phone';
  validation: {
    required?: string;
    phonenumber: string;
  };
}

And here's my code snippet:

const phone: IPhoneField = {
  "label":"Phone Number",
  "model":"phonenumber",
  "type":"phone",
  "placeholder":"Phone number",
  "validation":{
      "required2":"A phone number is required",
      "phonenumber":"Please enter a valid phone number",

    }
};

const form: IDictionary<IForm> = {
  "form1":{
      "pages":[
        {
            "fields": [
              {
                  "label":"Phone Number",
                  "model":"phonenumber",
                  "type":"phone",
                  "placeholder":"Phone number",
                  "validation":{
                    "required2":"A phone number is required",
                    "phonenumber":"Please enter a valid phone number"
                  }
              }
            ]
        }
      ]
  }
};

Has anyone else experienced this issue? Could it possibly be a bug with Typescript?

Check out the playground link for more details: NEW playground

typescript typing

Answer 1

Answer №1

There is no bug in TypeScript, but rather an issue with creating objects that deviate from their defined types, leading to type inference failure.

To address the specific problem with required2 in the phone object's validation, it's important to note that adding extraneous fields can alter the inferred type and cause discrepancies even if the object still meets the interface requirements.

If you insist on including such fields, one workaround is to explicitly specify the type within the object like so:

const phone: IPhoneField = {
  "label":"Phone Number",
  "model":"phonenumber",
  "type":"phone",
  "placeholder":"Phone number",
  "validation":{
    "required2":"A phone number is required",
    "phonenumber":"Please enter a valid phone number",
  } as { required?: string, phonenumber: string},
};

Alternatively, a cleaner approach would be defining interfaces for validation and field types as shown below:

interface IPhoneValidation {
  required?:          string;
  phonenumber:        string;
}

export interface IPhoneField extends IField {
  type:                 'phone';
  validation:           IPhoneValidation;
}

const phone: IPhoneField = {
  "label":"Phone Number",
  "model":"phonenumber",
  "type":"phone",
  "placeholder":"Phone number",
  "validation":{
    "required2":"A phone number is required",
    "phonenumber":"Please enter a valid phone number",
  } as IPhoneValidation,
}

The lack of error notifications in your form stems from its validation fields not undergoing proper type checking. This could be attributed to potential issues with the implemented IDictionary, though without further details, this remains somewhat speculative.

To facilitate early error detection, consider specifying types during assignments or ensuring strict compliance with interface definitions. Doing so prompts immediate error alerts, preventing potential mismatches later on.

Remember, TypeScript's rigorous checks aim to enhance accuracy by discouraging inadvertent typing errors. While this may seem restrictive at times, it ultimately promotes more robust and error-free code.

If flexibility in accepting additional properties within interfaces is desired, utilize index signatures as illustrated below:

interface IValidation {
  required?:          string;
  phonenumber:        string;
  [propName:string]:  any;
}

For further insights on managing excess properties in interfaces, refer to the relevant documentation on the TypeScript website.

Answer 2

There is no bug in TypeScript, but rather an issue with creating objects that deviate from their defined types, leading to type inference failure.

To address the specific problem with required2 in the phone object's validation, it's important to note that adding extraneous fields can alter the inferred type and cause discrepancies even if the object still meets the interface requirements.

If you insist on including such fields, one workaround is to explicitly specify the type within the object like so:

const phone: IPhoneField = {
  "label":"Phone Number",
  "model":"phonenumber",
  "type":"phone",
  "placeholder":"Phone number",
  "validation":{
    "required2":"A phone number is required",
    "phonenumber":"Please enter a valid phone number",
  } as { required?: string, phonenumber: string},
};

Alternatively, a cleaner approach would be defining interfaces for validation and field types as shown below:

interface IPhoneValidation {
  required?:          string;
  phonenumber:        string;
}

export interface IPhoneField extends IField {
  type:                 'phone';
  validation:           IPhoneValidation;
}

const phone: IPhoneField = {
  "label":"Phone Number",
  "model":"phonenumber",
  "type":"phone",
  "placeholder":"Phone number",
  "validation":{
    "required2":"A phone number is required",
    "phonenumber":"Please enter a valid phone number",
  } as IPhoneValidation,
}

The lack of error notifications in your form stems from its validation fields not undergoing proper type checking. This could be attributed to potential issues with the implemented IDictionary, though without further details, this remains somewhat speculative.

To facilitate early error detection, consider specifying types during assignments or ensuring strict compliance with interface definitions. Doing so prompts immediate error alerts, preventing potential mismatches later on.

Remember, TypeScript's rigorous checks aim to enhance accuracy by discouraging inadvertent typing errors. While this may seem restrictive at times, it ultimately promotes more robust and error-free code.

If flexibility in accepting additional properties within interfaces is desired, utilize index signatures as illustrated below:

interface IValidation {
  required?:          string;
  phonenumber:        string;
  [propName:string]:  any;
}

For further insights on managing excess properties in interfaces, refer to the relevant documentation on the TypeScript website.

Utilizing Typescript to define key-value pairs within a structured form

Answer №1

Similar questions

Invoking vscode Extension to retrieve data from webview

The element 'mat-toolbar' is unrecognized and not known:

Is it possible to use TypeScript or Angular to disable or remove arrow key navigation from a PrimeNG Table programmatically?

What is the best way to simulate a function within an object using Jest and Typescript?

minimize the size of the image within a popup window

The error message "this.startLoginAnimatioon is not defined as a function" popped up

Issues with the ngModel data binding functionality

Type of tuple without a specific order

Using ESLint to enforce snake_case naming conventions within TypeScript Type properties

Mastering the latest NavigationStart feature in @angular-router version 3.0.0-alpha.*

Issue: You cannot render objects as a React child element (object found with properties {name}). If you intended to display multiple children, consider using an array instead

Change an ISO date format to DD:MM:YYYY HH:MM using Angular

Tips for customizing the appearance of date and time formats

TypeScript introduces a new `prop` method that handles missing keys in objects

The character 'T' cannot be assigned to the data type 'number'

Guidelines for creating a binary release of Node.js with native modules

Tips for sending props, state, or arguments to a TypeScript React component

The Axios and TypeScript promise rejection error is displaying an unknown type- cannot identify

Angular firing off select option with object properties

Is there a way to communicate with the Microsoft bot from within the bot itself, ensuring that the message follows the dialog flow and receives the appropriate response?