Extending an interface in TypeScript does not permit the overriding of properties

Question

Extending an interface in TypeScript does not permit the overriding of properties

While working with Typescript, I encountered an issue where I couldn't make a property not required when overwriting it. I have defined two interfaces:

interface IField {

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

}
interface ICheckboxField extends IField {

  model?:               string;
  type:                 'checkbox';
  default?:             string;
  options:              IOption[];
  validation?:    {
    required?:          string;
  };
}

In the ICheckboxField interface, I tried to set the model property as not required. However, all other fields that extend from IField require a mandatory model.

I am curious if this limitation is inherent to Typescript or if there is a workaround besides avoiding extending the interface and manually adding specific properties for each interface?

typescript typing

Answer 1

Answer №1

To consolidate the shared properties of IField and ICheckboxField into a common interface, you can create an interface like this:

interface IBase {
    label: string;
    placeholder?: string;
    addon?: string;
    showOn?: IDictionary;
    maxlength?: number;
}

interface IField extends IBase {
    model: string;
}

interface ICheckboxField extends IBase {
    model?: string;
    type: 'checkbox';
    default?: string;
    options: IOption[];
    validation?: {
        required?: string;
    };
}

Alternatively, you could split the IField interface into two separate interfaces:

interface IField {
    label: string;
    placeholder?: string;
    addon?: string;
    showOn?: IDictionary;
    maxlength?: number;
}

interface IFieldOptionalModel extends IField {
    model?: string;
}

interface IFieldMandatoryModel extends IField {
    model: string;
}

interface ICheckboxField extends IFieldOptionalModel {
    type: 'checkbox';
    default?: string;
    options: IOption[];
    validation?: {
        required?: string;
    };
}

Answer 2

To consolidate the shared properties of IField and ICheckboxField into a common interface, you can create an interface like this:

interface IBase {
    label: string;
    placeholder?: string;
    addon?: string;
    showOn?: IDictionary;
    maxlength?: number;
}

interface IField extends IBase {
    model: string;
}

interface ICheckboxField extends IBase {
    model?: string;
    type: 'checkbox';
    default?: string;
    options: IOption[];
    validation?: {
        required?: string;
    };
}

Alternatively, you could split the IField interface into two separate interfaces:

interface IField {
    label: string;
    placeholder?: string;
    addon?: string;
    showOn?: IDictionary;
    maxlength?: number;
}

interface IFieldOptionalModel extends IField {
    model?: string;
}

interface IFieldMandatoryModel extends IField {
    model: string;
}

interface ICheckboxField extends IFieldOptionalModel {
    type: 'checkbox';
    default?: string;
    options: IOption[];
    validation?: {
        required?: string;
    };
}

Answer 3

Answer №2

Attempting to replace a strict type (IField) with a less strict type (ICheckboxField) where a mandatory property is required is not allowed.

The compiler does not approve of this, but the reverse scenario is acceptable:

interface Loose {
  label:string;
  model?:string;
}

interface Strict extends Loose {
  model:string;
}

var a:Loose = {
  label:"bar",
}

var b:Strict = {
  label: "baz",
  model: "me"
}

To work around this, you can create another interface that includes both, where the model field is initially optional and then enforced as mandatory in IField.

An alternate approach could involve using keyof and the Lookup Types introduced in TypeScript 2.1

Answer 4

Attempting to replace a strict type (IField) with a less strict type (ICheckboxField) where a mandatory property is required is not allowed.

The compiler does not approve of this, but the reverse scenario is acceptable:

interface Loose {
  label:string;
  model?:string;
}

interface Strict extends Loose {
  model:string;
}

var a:Loose = {
  label:"bar",
}

var b:Strict = {
  label: "baz",
  model: "me"
}

To work around this, you can create another interface that includes both, where the model field is initially optional and then enforced as mandatory in IField.

An alternate approach could involve using keyof and the Lookup Types introduced in TypeScript 2.1

Extending an interface in TypeScript does not permit the overriding of properties

Answer №1

Answer №2

Similar questions

Error message "Undefined is not a constructor" can occur when using Ionic2 with Karma and Jasmine

Working with TypeORM to establish two foreign keys pointing to a single primary key in a table

Tips for leveraging angular CLI's async import feature with webpack

Issues with Cross-Origin Resource Sharing (CORS) have been identified on the latest versions of Android in Ionic Cordova. However, this problem does not

Enhance the express Response type and then export my updated type as a distinct module

What is the proper way to enhance properties?

Can you explain the distinction between using get() and valueChanges() in an Angular Firestore query?

Error: TypeScript is unable to locate the 'moment' module

Sending the chosen dropdown ID to a different component

Struggling with TypeScript compilation in a Vue.js project? Encounter error code TS2352

Issue TS2315: Type 'ElementRef' does not support generics

Experiencing a typeerror with the Event attribute

Issue with ngFor displaying only the second item in the array

Updating state in React without providing a key prop is a common issue, especially when

Leverage the power of mathematical functions within Angular to convert numbers into integers

What is the best way to prevent the hassle of manually reloading a VS Code extension each time I make updates

TypeScript error: Cannot find property 'propertyName' in the 'Function' type

Setting Angular FormControl value to null within a service

Do you think this is a clever way to circumvent using ENUM for a parameter?

What is the proper way to write a function that verifies the presence of a key in an object and then retrieves the associated value?