Ограничение ключей в рекурсивно вложенном типе Typescript

Question

Я пытаюсь создать рекурсивное определение типа Typescript, которое не позволяет родительскому объекту с определенными ключами иметь вложенные дочерние объекты с любым из этих же ключей.

Для контекста, я играю с CSS библиотека стилей, в которой я хотел бы поддерживать строго типизированные 'отзывчивые стили', например:

const basicResponsive = { height: { xs: 100, sm: 200, md: 300, lg: 400, xl: 500 } }

Однако она должна , а не поддерживать объекты, в которых "отзывчивые" клавиши вложены, вот так:

const invalidNestedResponsive = styleFn({
  xs: {
    height: 100,
    // Should error:
    // Can't nest a responsive style within a responsive style
    xs: {width: 50},
    sm: {width: 51},
    md: {width: 52},
    lg: {width: 53},
    xl: {width: 54},
  },
  sm: {height: 100},
  md: {height: 100},
  lg: {height: 100},
  xl: {height: 100},
})

Вот ссылка на игровую площадку Typescript с тем, что я пробовал до сих пор. Я попробовал несколько разных условных типов, но не смог найти тот, который работал. На игровой площадке также есть куча тестов.

Заранее благодарен за любую помощь или предложения!