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

Generate HTML elements within an AngularJS directive and establish a click event

Despite using Vue and Vuex with Axios asynchronously, the getters are still returning an empty array

Vue.js: Issue with updating list in parent component when using child component

Angular HttpClient does not support cross-domain POST requests, unlike jQuery which does

Canvg | Is there a way to customize canvas elements while converting from SVG?

Employing a general-purpose function in a recursive manner

Issues with Angular displaying filter incorrectly

Update text displayed on radio button selection using jQuery

Exploring the world of HTTP PUT requests in Angular 4.0

ng-class expressions are constantly evolving and adapting

Postpone the processing of a message in the Service Bus Queue until a specific time using NodeJS

Navigate through a series of div elements using Jquery

CSS: Concealing a separate div

Develop and arrange badge components using Material UI

How can you receive a file through AJAX response?

The functionality of Intersection Observer causes text to appear over the header

Dynamic Namespaces in Socket.io is a feature that allows for

When resizing an anchor tag with a percentage in CSS, the child image width may not scale accordingly

In JavaScript, promises remain in a pending state

Which is the best choice for a large-scale production app: caret, tilde, or a fixed package.json