TypeScript | Known and Unknown Keys

(Last edited: October 29, 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.