interface Pet {
  // allows any property value of type string
  // what if we want more control over possible properties
  [key: string]: string
}

const myPet: Pet = {
  // all valid values
  // what if we have a general rule about our props naming convention?
  foo: 'foo',
  bar: 'bar',
  kbgyb: '??'
}

interface Pet {
  // by adding the prefix 'content-' we can lock down part of the props name
  [key: `content-${string}`]: string
}

const myPet: Pet = {
  'content-type': 'foo', // valid property name
  two: 'bar' // invalid property name as it is not prefixed with 'content-'
}

type StringProps = 'type' | 'name' | 'breed';
type StringPet { [key in StringProps]: string }

// same as this 
interface StringPet {
  type: string;
  name: string;
  breed: string;
}

const myPet: Pet = {
  type: 'foo', // valid property name
  two: 'bar' // invalid property name
}

type StringProps = 'type' | 'name' | 'breed' | 'eyeColor';
type StringPet { [key in StringProps]: string }

type IntProps = 'age' | 'weight' | 'legs';
type IntPet { [key in IntProps]: number }

type BoolProps = 'wings' | 'claws' | 'fur';
type BoolPet { [key in BoolProps]: boolean }

// here we intersect two types together into one
// note: types are intersected, not extended like interfaces are
type WholePet = IntPet & StringPet & BoolPet;

// WholePet in the more verbose view looks like this
interface WholePet {
  type: string;
  name: string;
  breed: string;
  eyeColor: string;
  age: number;
  weight: number;
  legs: number;
  wings: boolean;
  claws: boolean;
  fur: boolean;
}