Dynamically build TypeScript string literal type

                    Photo by Kevin Jarrett on Unsplash

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.

🚀 Intro

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.

	const doms = {
	a: "",
	div: "",
	p: ""
	};

view raw doms.js hosted with ❤ by GitHub

Left out rest of DOM types for brevity.

If you create a type like type DOMS = typeof doms;, then a variable of such type will have a div, and 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 keyof operator.

type DOMType = keyof typeof doms;

view raw domtype.js hosted with ❤ by GitHub

DOMType declaration

Example of leaving out “keyof”.

You can see that a has a, div, and p as properties while b is recognized as a string.

👾 Example Usage

Suppose that you have a function that accepts a variable of type DOMType.

	function printDOM(dom: DOMType) {
	console.log(`DOM value: ${dom}`);
	}

view raw printDOM.js hosted with ❤ by GitHub

printDOM

When you pass values other than a, div, p, you get an error message during compiler time.

🤔 Why no array?

You might have declared a list of values as an array.

const doms = ['a', 'div', 'p']

view raw doms_array.js hosted with ❤ by GitHub

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.

“printDOMType” accepts any string

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.

🏔 Resources

• Official TypeScript Documentation
  • String Literal Types
  • keyof operator
• Four days of self-note in Spectrum
• CodeSandbox Demo
• Stack Overflow Question – array to stringliteral type