How to automatically set member fields for string literal types in Typescript

Question

How to automatically set member fields for string literal types in Typescript

Imagine having the following classes:

class Foo {
  type: "foo"
  constructor(public id: number) {}
}

class Bar {
  type: "bar"
  constructor(public id: number) {}
}

type SomeUnion = Foo | Bar // (x : SomeUnion).type will have the type "foo" | "bar"

When you create an instance of new Foo(1), it returns { id: 1 }. However, what if you want to automatically include type: "foo" in the returned object?

An easy fix is to assign the string constant inside the constructor like so: this.type = "class_name".

But duplicating the string constant can be error-prone. Is there a way to generate a member with the same value as the string literal without explicitly typing it out twice?

typescript

Answer 1

Answer №1

Let's focus on analyzing the following code snippet:

class Bar {
  kind: "bar"
  constructor(public id: number) {}
}

If we set the compiler option strictNullChecks to false, then declaring kind: "bar" implicitly allows assigning values of undefined and null to the kind property. It becomes clear that initializing the field with a value other than undefined is crucial in this scenario.

Now, let's proceed with strictNullChecks enabled (set to true). In this case, only the value "bar" can be assigned to the kind property. It seems like you are expecting the compiler to deduce the following logic:

The declaration kind: "bar" specifies that the field named kind must have type "bar". Therefore, only the value "bar" should be assigned to it. Thus, I should automatically initialize it with "bar" since no other value is valid.

The issue arises with TypeScript 2.x, even when using

strictNullChecks</code, fields can initially have the value <code>undefined

despite not allowing direct assignment of undefined. To clarify: while you cannot directly assign undefined to kind, the field can start with the value undefined if left uninitialized without triggering an error. This behavior has sparked conversations within the TypeScript community as some view it as a flaw in the language design. You can refer to the related issue report.

Ultimately, the compiler does not perform the expected reasoning mentioned above. Therefore, currently, you will need to redundantly specify the string literal type and explicitly initialize your kind properties.

Answer 2

Let's focus on analyzing the following code snippet:

class Bar {
  kind: "bar"
  constructor(public id: number) {}
}

If we set the compiler option strictNullChecks to false, then declaring kind: "bar" implicitly allows assigning values of undefined and null to the kind property. It becomes clear that initializing the field with a value other than undefined is crucial in this scenario.

Now, let's proceed with strictNullChecks enabled (set to true). In this case, only the value "bar" can be assigned to the kind property. It seems like you are expecting the compiler to deduce the following logic:

The declaration kind: "bar" specifies that the field named kind must have type "bar". Therefore, only the value "bar" should be assigned to it. Thus, I should automatically initialize it with "bar" since no other value is valid.

The issue arises with TypeScript 2.x, even when using

strictNullChecks</code, fields can initially have the value <code>undefined

despite not allowing direct assignment of undefined. To clarify: while you cannot directly assign undefined to kind, the field can start with the value undefined if left uninitialized without triggering an error. This behavior has sparked conversations within the TypeScript community as some view it as a flaw in the language design. You can refer to the related issue report.

Ultimately, the compiler does not perform the expected reasoning mentioned above. Therefore, currently, you will need to redundantly specify the string literal type and explicitly initialize your kind properties.

Answer 3

Answer №2

It seems like this solution could meet your requirements. Although the string literal needs to be typed out twice, having them close together may reduce the likelihood of forgetting to update both values if the class type changes.

class Cat {
  breed: "Siamese" = "Siamese"
  constructor(public id: number) {}
}

class Dog {
  breed: "Golden Retriever" = "Golden Retriever"
  constructor(public id: number) {}
}

Answer 4

It seems like this solution could meet your requirements. Although the string literal needs to be typed out twice, having them close together may reduce the likelihood of forgetting to update both values if the class type changes.

class Cat {
  breed: "Siamese" = "Siamese"
  constructor(public id: number) {}
}

class Dog {
  breed: "Golden Retriever" = "Golden Retriever"
  constructor(public id: number) {}
}

Answer 5

Answer №3

If you need the type to be a string literal rather than a generic string for use in union types throughout your program, it's crucial to define a specific type for that union. Let's call it:

type MyType = "foo" | "bar";

Then, you can implement it as follows:

class Foo {
  type: MyType = "foo";
  constructor(public id: number) {}
}

class Bar {
  type: MyType = "bar";
  constructor(public id: number) {}
}

For additional organization and efficiency, consider creating a shared base class:

class Base
  type: MyType;
  protected constructor(type: MyType) {
    this.type = type;
  }
}

class Foo extends Base {
  constructor(public id: number) {
    super("foo");
  }
}

class Bar extends Base {
  constructor(public id: number) {
    super("bar");
  }
}

Answer 6

If you need the type to be a string literal rather than a generic string for use in union types throughout your program, it's crucial to define a specific type for that union. Let's call it:

type MyType = "foo" | "bar";

Then, you can implement it as follows:

class Foo {
  type: MyType = "foo";
  constructor(public id: number) {}
}

class Bar {
  type: MyType = "bar";
  constructor(public id: number) {}
}

For additional organization and efficiency, consider creating a shared base class:

class Base
  type: MyType;
  protected constructor(type: MyType) {
    this.type = type;
  }
}

class Foo extends Base {
  constructor(public id: number) {
    super("foo");
  }
}

class Bar extends Base {
  constructor(public id: number) {
    super("bar");
  }
}

Answer 7

Answer №4

Any thoughts on this?

function Bar {
    category: string;
    constructor(public code: number) {
       this.category = "class_category";
    }
}

Answer 8

Any thoughts on this?

function Bar {
    category: string;
    constructor(public code: number) {
       this.category = "class_category";
    }
}

How to automatically set member fields for string literal types in Typescript

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

What is the process for accessing a read-only markdown preview in a vscode extension?

Convert data into a tree view in JavaScript, with two levels of nesting and the lowest level represented as an array

Arranging strings in descending order using Typescript

Using TypeScript for Geolocation

How to vertically align Material UI ListItemSecondaryAction in a ListItem

Exploring Angular Scope within a Typescript-based javascript function

Using Type TTextKey to access TOption is not allowed

Issue with Material UI grid not rendering properly in TypeScript environment

Resolving TypeScript Problem: Showing Error Alerts from React Hook Form

Translate Typescript into Javascript for use in React applications

Triggering the detection of changes even when the value linked to remains the same

Setting a default value for a data type within Typescript

How do I maintain the Type<any> throughout my application state in NgRx without compromising on best practices?

Associating function parameters with object types in TypeScript

Issue encountered when attempting to save items in the browser's local storage

How to transition from using a CDN to NPM for implementing the Google Maps JavaScript MarkerClusterer?

Sorting by Date in JavaScript

I am seeking to divide an array into multiple arrays, each based on the presence of a specific element from a separate array

What is the best way to conduct tests on this React component using Jest?

Using Nest JS to Handle Null Responses in Services