TypeScript interface with an optional parameter that is treated as a required parameter

Question

TypeScript interface with an optional parameter that is treated as a required parameter

Within my interface, I have a property that can be optional. In the constructor, I set default values for this property, which are then overridden by values passed in as the first parameter. If no properties are set, the defaults are used.

I am looking for a way to keep the parameter optional when passed into the constructor but ensure that it is considered as set within the class. I want to avoid receiving the error:

Object is possibly 'undefined'.

TypeScript Playground

export interface IMain {
  req: string;
  prop?: ISecondary;
}

export interface ISecondary {
  a?: string;
  b?: string;
}

export class ABC {
  public main: Main;

  public constructor(main: Main) {
    this.main.prop = {
      a: "A",
      b: "B",
      ...main.prop
    };
  }

  public doSomething() {
    this.main.prop.a = "Z";
  }
}

new ABC({
  req: 'cat'
});

javascript typescript

Answer 1

Answer №1

To designate a property as required for the class and update the constructor accordingly, you can modify it like this:

export class ABC {
    public main: Required<IMain>;

    public constructor(main: IMain) {
        this.main = {
            ...main,
            prop: {
                a: "A",
                b: "B",
                ...main.prop
        }};
    }
}

If there are properties that need to remain optional, you must specify your types more explicitly. For example:

type OptionalProps<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>

export interface IMain {
    req: string;
    prop: ISecondary; // Make it required here
}

export class ABC {
    public main: IMain;

    public constructor(main: OptionalProps<IMain, 'prop'>) {
        this.main = {
            ...main,
            prop: {
                a: "A",
                b: "B",
                ...main.prop
        }};
    }
}

If things get too complex, consider defining separate interfaces or extracting common properties to a parent interface. For instance:

interface IMainRequired {
    req: string;
}
interface IMainOptional {
    prop: ISecondary;
}
export type IMain = IMainRequired & IMainOptional
export type IMainArg = IMainRequired & Partial<IMainOptional>

export class ABC {
    public main: IMain;

    public constructor(main: IMainArg) {
        this.main = {
            ...main,
            prop: {
                a: "A",
                b: "B",
                ...main.prop
        }};
    }
}

Answer 2

To designate a property as required for the class and update the constructor accordingly, you can modify it like this:

export class ABC {
    public main: Required<IMain>;

    public constructor(main: IMain) {
        this.main = {
            ...main,
            prop: {
                a: "A",
                b: "B",
                ...main.prop
        }};
    }
}

If there are properties that need to remain optional, you must specify your types more explicitly. For example:

type OptionalProps<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>

export interface IMain {
    req: string;
    prop: ISecondary; // Make it required here
}

export class ABC {
    public main: IMain;

    public constructor(main: OptionalProps<IMain, 'prop'>) {
        this.main = {
            ...main,
            prop: {
                a: "A",
                b: "B",
                ...main.prop
        }};
    }
}

If things get too complex, consider defining separate interfaces or extracting common properties to a parent interface. For instance:

interface IMainRequired {
    req: string;
}
interface IMainOptional {
    prop: ISecondary;
}
export type IMain = IMainRequired & IMainOptional
export type IMainArg = IMainRequired & Partial<IMainOptional>

export class ABC {
    public main: IMain;

    public constructor(main: IMainArg) {
        this.main = {
            ...main,
            prop: {
                a: "A",
                b: "B",
                ...main.prop
        }};
    }
}

Answer 3

Answer №2

To ensure that all properties are optional, one method is to define the property as non-optional and then utilize a Partial<IMain> to make all arguments optional:

export interface IMain {
  prop: ISecondary;
}

export interface ISecondary {
  a?: string;
  b?: string;
}

const ISecondaryDefaults: ISecondary = {
  a: "A",
  b: "B",
};

export class ABC {
  public main: IMain;

  public constructor(main: Partial<IMain>) {
    this.main = {
      ...main,
      prop: {
        ...ISecondaryDefaults,
        ...main.prop,
      },
    };
  }

  public doSomething() {
    this.main.prop.a = "Z";
  }
}

Answer 4

To ensure that all properties are optional, one method is to define the property as non-optional and then utilize a Partial<IMain> to make all arguments optional:

export interface IMain {
  prop: ISecondary;
}

export interface ISecondary {
  a?: string;
  b?: string;
}

const ISecondaryDefaults: ISecondary = {
  a: "A",
  b: "B",
};

export class ABC {
  public main: IMain;

  public constructor(main: Partial<IMain>) {
    this.main = {
      ...main,
      prop: {
        ...ISecondaryDefaults,
        ...main.prop,
      },
    };
  }

  public doSomething() {
    this.main.prop.a = "Z";
  }
}

TypeScript interface with an optional parameter that is treated as a required parameter

Answer №1

Answer №2

Similar questions

What is the proper location to insert CSS within Laravel?

Unreliable static URLs with Next.js static site generation

Tips for splitting JSON objects into individual arrays in React

What is the method used by React or Next to prevent the <a> tag from refreshing the page while still loading content?

Generating intricate JSON structures with JavaScript programming instructions

Using a JavaScript array in Java

The DataType.MultilineText field in my modal popup partial view is causing all validation to fail

What are some ways to execute a script prior to installing an npm package?

Setting the paths property in a project with multiple tsconfig.json files: a step-by-step guide

The module 'angular/common' was not found in the Angular 2 TypeScript

An element in CSS that has a position of fixed and a width of 100% surpasses the dimensions of its

Tips for sorting through existing data without resorting to a remote call - Material Table repository by mbrn (mbrn/material

Locate the highest and lowest values within a .json file

What is causing the object, which is clearly defined (as shown in the callback to JSONLoader), to be interpreted as undefined

Angular JS allows for the display of text from a textarea upon clicking the submit button

Create a dynamic animation effect by making a div slide on and off the screen

Tips for extracting text from a textarea while retaining newline characters:

The module 'iap_verifier' could not be located

identifying the element targeted on dynamically created links with the help of jquery

Showing formatted JSON (Large Object) on an HTML page