Referencing a TypeScript type in Angular 2

Question

this might be a basic question but maybe my knowledge of c# is misleading me. I'm currently trying to reference a custom type in Typescript and it only allows it when I actually provide the string value instead of the type reference. This is what I have:

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

export class MyCustomeTypeUtils {}

In my component I have declared variables of my custom type:

var1 : MyCustomeType;

The only way I get var1 to have a value is if I do:

var1 = 'text1'

If I do

var1 = MyCustomeType.0

or

var1 = MyCustomeType.text1

it throws an error that it couldn't find the name MyCustomeType. Any help is greatly appreciated.

Paul Samsotha · Accepted Answer · 2016-10-25 18:00:44Z

6

That's how it works. This is what TypeScript calls String Literal Types

String literal types allow you to specify the exact value a string must have. In practice string literal types combine nicely with union types, type guards, and type aliases. You can use these features together to get 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 pass any of the three allowed strings, but any other string will give the error

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

Note: If you want to use real enums TypeScript supports that

answered Oct 25, 2016 at 18:00

Paul Samsotha

210k39 gold badges503 silver badges756 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

joeCarpenter Over a year ago

So in order to assign a value to one of these types I have to give it only one of the allowed string instead of how enums are used? Maybe I was confusing the two :)

Dan Def · Accepted Answer · 2016-10-25 18:56:16Z

0

I fell into a similar trap. What you can do is on your utils class create a static that returns a type of MyCustomType with the string text1.

public static readonly Text1:MyCustomType = 'text1';

Then you can do

let myVar:MyCustomType = UtilClass.Text1;

edited Oct 25, 2016 at 18:56

answered Oct 25, 2016 at 17:52

Dan Def

1,9832 gold badges26 silver badges43 bronze badges

3 Comments

joeCarpenter Over a year ago

Thank you Dan! However this approach didn't work for me :(

Dan Def Over a year ago

@eagleEye sorry, had my C# hat on. Does my change to the static help?

joeCarpenter Over a year ago

Hi Dan, sorry didn't see your message until now, I hear you I mix languages all the time :D. I'll try and let you know.

Collectives™ on Stack Overflow

Referencing a TypeScript type in Angular 2

2 Answers 2

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related