TypeScript | Known and Unknown Keys

July 15, 2019 (Last edited: July 16, 2019)

interface IMyColor {
  hex: string
  rgb: string
  [key: string]: any
}

const iColor: IMyColor = {
  hex: '#bada55',
  rgb: 'rgb(1, 2, 3)',
  unknownColor: 42, // valid
}

const whatColorInterface = iColor.whatIsThis // any

type MyColorType = {
  [key: string]: any
} & {
  hex: string
  rgb: string
}

const colorType: MyColorType = {
  hex: '#bada55',
  rgb: 'rgb(1, 2, 3)',
  unknownColor: 42, // valid
}

const whatColorType = colorType['is this a valid key'] // any

There are cases where we have known and unknown keys in an object. Having at least the known keys will help with TypeScript code assistance. But, it’s generally better to avoid these kinds of types because it’s harder to guarantee type safety.

Playground example.