Data structures

Array

string[]
number[]

Or the longer:

Array<string>
Array<number>

Tuple

[string, number]

Example:

type Foo = [string, number]

Inside an interface.

interface Foo {
  value: [string, number]
}

Dictionary

let foo: { [s: string]: string } = {}

type Name = string | string[]

Enum

See the Enum section in the TS docs. This can get complicated for dynamic lookup. In particular see the const enums section.

enum COLOR {
  Red,
  Green,
  Blue = 4
}

Lookup with attribute.

const a: COLOR = COLOR.Green;

Lookup with literal.

const b: COLOR = COLOR['Green'];

Lookup by variable. Only works if the enum declaration is not done with const.

A const enum member can only be accessed using a string literal.

const x = 'Green'
const c: COLOR = COLOR[x]

When the input variable is dynamic like controlled by the UI, I had to change the approach to casting.

Using VAR as TYPE. Or <TYPE> VAR. From StackOverflow.

export type Fruit = "Orange" | "Apple" | "Banana";
let myString: string = "Banana";

let myFruit: Fruit = myString as Fruit;

// Newer syntax.
let fruit = "Banana" as const;

Here in my Vue case, where this.color is setup in data method.

export enum Color {
  Red = 'red',
  Green = 'green'
}

const key = this.color as keyof typeof Color;
const color = Color[key];

This is more effective and less code than alternatives below.

This doesn’t work when key is dynamic.

enum COLOR {
  Red = 'red',
  Green = 'green'
}

const key = 'Green';
const bar = (<any>COLOR)[key];

I’ve also come across using a wrapper function.

enum COLOR {
  Red = 'red',
  Green = 'green'
}

type ColorStrings = keyof typeof COLOR;

function describeColor(key: ColorStrings) {
  return COLOR[key];
}
// OR
export function describeCode(key: string) {
  return DESCRIPTION[key as DescriptionKeys];
}


const key = 'Red';
const bar = describeColor(key);

Getting the type of an enum. From the docs.

enum LogLevel {
  ERROR,
  WARN,
  INFO,
  DEBUG,
}

type LogLevelStrings = keyof typeof LogLevel;
// 'ERROR' | 'WARN' | 'INFO' | 'DEBUG';


function printImportant(key: LogLevelStrings, message: string) {
  const num = LogLevel[key];
  if (num <= LogLevel.WARN) {
    console.log("Log level key is:", key);
    console.log("Log level value is:", num);
    console.log("Log level message is:", message);
  }
}
printImportant("ERROR", "This is a message");

Reverse mapping based on the docs. From the docs.

enum COLOR {
  Red,
}

const c = Enum.Red;
const nameOfRed = Enum[c]; // "Red"