TypeScript has String Literal Types, which lets you specify what string value is allowed for a variable.
You can specify the allowed literal values during type declaration.
When you have dozens of strings to allow with possibility to grow, adding it isn’t maintainable and error prone.
TypeScript provides keyof operator to extract keys of a type to restrict assignable values.
Let me show you how it can be used and a limitation thereof.
I’ve had an issue where I wanted to restrict an allowable value for a function to accept only DOM type values in an array.
This post is a workaround found after days of frustration.
I will show you how to create a type to allow only DOM type values.
🌠 Getting Started
You need to create an object (not an array), which contains object keys you want to restrict a type with.
I will show you why later why an array would not work.
Suppose that you have an object with DOM as keys.
If you create a type like
type DOMS = typeof doms;, then a variable of such type will have
p as properties.
You don’t want to restrict the value, not the property.
So you need to extract keys from the
doms to restrict allowable values, using
You can see that
p as properties while
b is recognized as a string.
👾 Example Usage
Suppose that you have a function that accepts a variable of type
When you pass values other than
p, you get an error message during compiler time.
🤔 Why no array?
You might have declared a list of values as an array.
But the current version of TypeScript (3.3.1) doesn’t know how to infer types from an array passed as a variable.
Refer to this Stack Overflow answer.
In the demo below, you can see that `printDOMType” accepts any string without any errors.
A change is underway to enable array value to be inferred to be used as string literals in version 3.4.
For now, you’d have to stick with an object.
🎉 Parting Words
I’ve started diving into the world of TypeScript and figuring this out took me roughly four days.
TypeScript has been both good and bad and I consider this a part of learning process.
I hope you don’t go thru the same trouble with this issue.