How to require a specific string in TypeScript interface

Typescript

Typescript Problem Overview


I'm creating a TypeScript definition file for a 3rd party js library. One of the methods allows for an options object, and one of the properties of the options object accepts a string from the list: "collapse", "expand", "end-expand", and "none".

I have an interface for the options object:

interface IOptions {
  indent_size?: number;
  indent_char?: string;
  brace_style?: // "collapse" | "expand" | "end-expand" | "none"
}

Can the interface enforce this, so if you include an IOptions object with the brace_style property, it will only allow a string that is in the acceptable list?

Typescript Solutions


Solution 1 - Typescript

This was released in version 1.8 as "string literal types"

What's New in Typescript - String Literal Types

Example from the page:

interface AnimationOptions {
  deltaX: number;
  deltaY: number;
  easing: "ease-in" | "ease-out" | "ease-in-out";
}

Solution 2 - Typescript

Try this

export type ReadingTypes = 'some'|'variants'|'of'|'strings';

export interface IReadings {
   param:ReadingTypes
}

Edit: Many thanks for upvotes, but, as time passed and me evolved as a developer :), now in most of the cases I wouldn't recommend this approach anymore. Yes it still valid but the point is the construction above is very similar to enum structure so why not use enum instead (advantages below):

export enum ReadingTypes {
    Some = 'some',
    Variants = 'variants',
    Of = 'of',
    Strings = 'strings',
}
export interface IReadings {
   param: ReadingTypes
}

Advantages: (Yes, might be it is more like IMHO, I understand, but, nonetheless)

  1. It is more readable when you see it in the code, for example
if(item.reading === 'some') {
...
}
// vs 
if(item.reading === ReadingTypes.Some) {
...
}

In first case when you read the code you could not catch, from the first glance, that .reading field can only contain few certain params, and not like, any string value.

  1. When you write the code you will have better assistance of your editor if you use enums - it is enough to remember name of enum and write it and it will show you all variants of enum. Yeah, with the first type ('some' | 'variants' ... ) it can do so too, but it does it less.. um.. eagerly

Solution 3 - Typescript

TS offers a typing to specific string values, which are called String literal types.

Here is an example of how to use them:

type style =  "collapse" | "expand" | "end-expand" | "none";

interface IOptions {
  indent_size?: number;
  indent_char?: string;
  brace_style1?:  "collapse" | "expand" | "end-expand" | "none";
  brace_style2?:  style;
}

// Ok
let obj1: IOptions = {brace_style1: 'collapse'};

// Compile time error:
// Type '"collapsessss"' is not assignable to type '"collapse" | "expand" | "end-expand" | "none" | undefined'.
let obj2: IOptions = {brace_style1: 'collapsessss'};

Solution 4 - Typescript

In TypeScript 2.4 onward you can use String Enums

I favour this approach because it avoids the need to have the same hard coded string in more than one place.

Its possible to make an enum where the values are strings

export enum VISIBILITY {
  PUBLISH = "publish",
  DRAFT = "draft"
}

This enum can then be used as a type on an interface or class

export interface UserOptions  {
  visibility:  VISIBILITY 
}

Solution 5 - Typescript

Maybe not exactly what you wanted, but Enums seem like a perfect solution for you.

enum BraceStyle {Collapse, Expand, EndExpand, None}

interface IOptions {
  indent_size?: number;
  indent_char?: string;
  brace_style?: BraceStyle
}

Enums are, however, number-based. It means that during runtime a real value for e.g. BraceStyle.Collapse will be 0 in this case. But you can use them with other, even non-typescript scripts, since they compile to objects. This is how BraceStyle will look after compile&run:

{
    0: "Collapse",
    1: "Expand",
    2: "EndExpand",
    3: "None",
    Collapse: 0,
    Expand: 1,
    EndExpand: 2,
    None: 3
}

If you want strings instead, you can use a class with static members, as described here

Solution 6 - Typescript

function keysOf<T>(obj: T, key: keyof T) { return obj[key]; }
interface SomeInterface {
   a: string;
}
const instance: SomeInterface = { a: 'some value'};
let value = keysOf<SomeInterface>(instance, 'b'); // invalid
value =  keysOf<SomeInterface>(instance, 'a'); // valid

Solution 7 - Typescript

enum is probably the best solution, but if you have your values as keys of a const object and you can't change that, the syntax would be

brace_style?: typeof BRACE_STYLES[keyof typeof BRACE_STYLES];

where BRACE_STYLES is the name of the const object

Solution 8 - Typescript

You can create a custom type as stated by others.
I would add to that, that you can also infer that created type from an object const:

export const braceStyles = {
  collapse: "collapse",
  expand: "expand",
  end-expand: "end-expand",
  none: "none"
}

export type braceStyle = typeof braceStyles[keyof typeof braceStyles]

export interface IOptions {
  indent_size?: number;
  indent_char?: string;
  brace_style?: bracestyle;
}

That way you don't have to use enum and you can also use the object properties everywhere you need them, where they will be of type string, not type enum.member

objects vs enums

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionthetallweeksView Question on Stackoverflow
Solution 1 - TypescriptRyan QView Answer on Stackoverflow
Solution 2 - TypescriptDenis KhayView Answer on Stackoverflow
Solution 3 - TypescriptWillem van der VeenView Answer on Stackoverflow
Solution 4 - TypescriptMax CarrollView Answer on Stackoverflow
Solution 5 - TypescriptKuba JagodaView Answer on Stackoverflow
Solution 6 - TypescriptSamehView Answer on Stackoverflow
Solution 7 - TypescriptBlueRaja - Danny PflughoeftView Answer on Stackoverflow
Solution 8 - TypescriptTombalabombaView Answer on Stackoverflow