When defining a class property in TypeScript, you can make it optional by not providing

Question

When defining a class property in TypeScript, you can make it optional by not providing

Is there a way to make a property on a Class optional without it being undefined?

In the following example, note that the Class constructor takes a type of itself (this is intentional)

class Test {
  foo: number;
  bar: string;
  baz?: string;

  constructor(test: Test) {
    this.foo = test.foo;
    this.bar = test.bar
    this.baz = test.baz || "Default";
  }
}

const first = new Test({foo: 1, bar: "Bob"});

const str = "Some Default String about Bob";

str.replace(first.baz, "New Value");
// Type 'undefined' is not assignable to type 'string | RegExp'.(

I am aware that I can use the ! operator, but would rather avoid it

str.replace(first.baz!, "New Value");

This question seems to address the issue —"class properties can't rely on default values"

javascript typescript class oop

Answer 1

Answer №1

From my understanding, you are not looking for the class property to be optional, but rather the constructor parameter to be optional. This can easily be achieved:

interface TestOptions {
  foo: number;
  bar: string;
  baz?: string; // optional
}

class TestClass {
  foo: number;
  bar: string;
  baz: string; // NOTE: not optional!

  constructor ({
    foo,
    bar,
    baz,
  }: TestOptions) {
    this.foo = foo;
    this.bar = bar;
    this.baz = baz ?? "Default";
  }
}

I have utilized the nullish coalescing operator to handle the default value assignment more efficiently. If you prefer a more concise syntax with positional parameters in the constructor, you can achieve that as well:

class Test2 {
  constructor (
    public foo: number,
    public bar: string,
    public baz = "Default",
  ) {}
}

Although there might be slight differences in behavior regarding optional parameters, the end result is quite similar.

Playground

Answer 2

From my understanding, you are not looking for the class property to be optional, but rather the constructor parameter to be optional. This can easily be achieved:

interface TestOptions {
  foo: number;
  bar: string;
  baz?: string; // optional
}

class TestClass {
  foo: number;
  bar: string;
  baz: string; // NOTE: not optional!

  constructor ({
    foo,
    bar,
    baz,
  }: TestOptions) {
    this.foo = foo;
    this.bar = bar;
    this.baz = baz ?? "Default";
  }
}

I have utilized the nullish coalescing operator to handle the default value assignment more efficiently. If you prefer a more concise syntax with positional parameters in the constructor, you can achieve that as well:

class Test2 {
  constructor (
    public foo: number,
    public bar: string,
    public baz = "Default",
  ) {}
}

Although there might be slight differences in behavior regarding optional parameters, the end result is quite similar.

Playground

When defining a class property in TypeScript, you can make it optional by not providing

Answer №1

Similar questions

Ways to avoid using a specific type in TypeScript

Accessing getUserMedia within Internet Explorer 11 or utilizing MediaStream on IE 11

How can I trace the origin of a post request sent from a form?

How to show table cell value in Angular 4 using condition-based logic

TypeScript is unable to identify import paths

Calculate the total number of table rows added using jQuery

Issue with JQuery dialog not triggering autocomplete

What is the best way to organize an Express application that handles both API requests and views?

Is there a way to search for multiple items using just one search term?

Jquery unresponsive in AJAX form output presentation

Tips for implementing multiple selectors in YUI

Storing JavaScript arrays in CSV format on the server

Guide on sharing a Vue project with other devices within a network

Can AngularJS Filters be used to convert a number into a string, but not the other way around?

Swap out the content within the selected element

Loop through a JSON object to dynamically update the value of a specific key

Browse the string on the web browser

What could be the reason behind my useEffect() not triggering when updating a value in a React context?

Generate pre-set components using fundamental building blocks

Here is a unique rewrite: "Strategies for effectively passing the data variable in the geturldata function within Vue.js on the HTML side vary