Using a TypeScript type in Angular 2 referencing

Question

Using a TypeScript type in Angular 2 referencing

I have encountered an issue while referencing a custom type in Typescript that has left me puzzled. Despite my background in c#, I am facing difficulty using the correct syntax to reference the custom type. Here is my current setup:

export type MyCustomeType=
    'text1' |
    'text2' |
    'text3';

export class MyCustomeTypeUtils {}

Within my component, I have declared variables of this custom type:

var1 : MyCustomeType;

Strangely, the only way I can assign a value to var1 is by explicitly providing the string value like so:

var1 = 'text1'

Attempting to assign a value using the type reference itself such as:

var1 = MyCustomeType.0

or

var1 = MyCustomeType.text1

results in an error indicating that it couldn't find the name MyCustomeType. Any assistance on resolving this would be highly appreciated.

angular typescript enums

Answer 1

Answer №1

That's the way it functions. TypeScript refers to this as String Literal Types

String literal types enable you to define the precise value a string must possess. In practical terms, string literal types work well with union types, type guards, and type aliases. By using these functionalities together, you can achieve enum-like behavior with strings.
type Easing = "ease-in" | "ease-out" | "ease-in-out";
class UIElement {
    animate(dx: number, dy: number, easing: Easing) {
        if (easing === "ease-in") {
            // ...
        }
        else if (easing === "ease-out") {
        }
        else if (easing === "ease-in-out") {
        }
        else {
            // error! should not pass null or undefined.
        }
    }
}

let button = new UIElement();
button.animate(0, 0, "ease-in");
button.animate(0, 0, "uneasy"); // error: "uneasy" is not allowed here
You can provide any of the three specified strings, but providing any other string will result in an error

Argument of type '"uneasy"' is not assignable to parameter of type
'"ease-in" | "ease-out" | "ease-in-out"'

Note: If you prefer to utilize actual enums, TypeScript offers support for that

Answer 2

That's the way it functions. TypeScript refers to this as String Literal Types

String literal types enable you to define the precise value a string must possess. In practical terms, string literal types work well with union types, type guards, and type aliases. By using these functionalities together, you can achieve enum-like behavior with strings.
type Easing = "ease-in" | "ease-out" | "ease-in-out";
class UIElement {
    animate(dx: number, dy: number, easing: Easing) {
        if (easing === "ease-in") {
            // ...
        }
        else if (easing === "ease-out") {
        }
        else if (easing === "ease-in-out") {
        }
        else {
            // error! should not pass null or undefined.
        }
    }
}

let button = new UIElement();
button.animate(0, 0, "ease-in");
button.animate(0, 0, "uneasy"); // error: "uneasy" is not allowed here
You can provide any of the three specified strings, but providing any other string will result in an error

Argument of type '"uneasy"' is not assignable to parameter of type
'"ease-in" | "ease-out" | "ease-in-out"'

Note: If you prefer to utilize actual enums, TypeScript offers support for that

Answer 3

Answer №2

I found myself in a similar situation not too long ago. One solution is to add a method in your utilities class that will return an instance of MyCustomType containing the string text1.

public static readonly TextValue: MyCustomType = 'text1';

Then you simply need to use:

let myVariable: MyCustomType = UtilitiesClass.TextValue;

Answer 4

I found myself in a similar situation not too long ago. One solution is to add a method in your utilities class that will return an instance of MyCustomType containing the string text1.

public static readonly TextValue: MyCustomType = 'text1';

Then you simply need to use:

let myVariable: MyCustomType = UtilitiesClass.TextValue;

Using a TypeScript type in Angular 2 referencing

Answer №1

Answer №2

Similar questions

Which rxjs operator functions similarly to concatmap, but delays the firing of the next request until the current one is completed?

Error message: "ExpressionChangedAfterItHasBeenCheckedError - encountered while using ngIf directive to hide/show a progress

Ways to trigger child components function from parent component

Exploring the integration of LeafLet into Next JS 13 for interactive mapping

NestJS's "Exclude" decorator in class-transformer does not exclude the property as expected

Turn off ESLint for TypeScript documents

Saving data from rowclicked event in ag-grid with Angular

The tRPC setData hook is limited in its ability to access all data necessary for optimistic UI updates

Turn off integrity verification for local dependencies in package-lock.json

Using TypeScript generics to efficiently differentiate nested objects within a parsed string

Sharing API data between components in Angular 5

Using TypeScript with React: Automatically infer the prop type from a generic parameter

How to determine the number of rows in Ag-Grid using Angular

Using Typescript Type Guard will not modify the variable type if it is set in an indirect manner

Ways to compel string type or disregard type?

I am puzzled by this error in Typescript: "Why does the element have an 'any' type when the Object type lacks an index signature?"

What are the best strategies for utilizing AnimatePresence for smooth and seamless transitions?

What is the best way to incorporate a JavaScript function into an Angular 2 template?

An issue occurred with the DOMException while trying to execute the 'setAttribute' function on the 'Element': '{{' is an invalid attribute identifier

Using NodeJS API gateway to transfer image files to S3 storage