I have the following KeyMapper type that I need to fix:

type KeyMapper<T extends object> = {
  targetKey: keyof T;
  mapper: {
    [key: string]: T[keyof T];
  };
};

In the following definition, even if I specify the targetKey in the object, no error occurs

type ButtonProps = {
  hierarchy: 'primary' | 'secondary' | 'tertiary';
  styleSemantic: 'info' | 'success' | 'alert' | 'warning';
};

const keyMapperArray: KeyMapper<ButtonProps>[] = [
  {
    targetKey: 'hierarchy',
    mapper: {
      filled: 'primary'
    }
  },
  {
    targetKey: 'styleSemantic',
    mapper: {
      error: 'primary' // This should produce an error in TypeScript
    }
  }
];

The second value in array keyMapperArray should produce an error, because primary is not a valid value for the styleSemantic key.

const keyMapperArray: KeyMapper<ButtonProps>[] = [
  {
    // The 'hierarchy' key defines the available values in the mapper ('primary', 'secondary', 'tertiary')
    targetKey: 'hierarchy',
    mapper: {
      // This should work because 'primary' is a valid value for the 'hierarchy' key
      filled: 'primary'
    }
  },
  {
    // The 'styleSemantic' key defines the available values in the mapper ('info', 'success', 'alert', 'warning')
    targetKey: 'styleSemantic',
    mapper: {
      // This should not work, as 'primary' is not a valid value for the 'styleSemantic' key
      error: 'primary'
    }
  }
];