Как убрать «Property does not exist on type» в рекурсивном интерфейсе?

Question

[Артем Прохоров]

Песочница

Это сам обьект

css: {
                    default: {
                        color: '#676767',
                        border: '1px solid',
                        border_color: '#C4C4C4',
                        border_radius: '110px',

                        padding: '16px 21px',
                    }
                }

А это его интерфейс:

interface CSS {
  [k: string]: string | number | CSS
}

Подобный интерфейс для рекурсивности, хочу иметь произвольную глубину без определенных ключей.

При попытке сделать обычный console.log(css.default.color), значение для цвета в консоли выводится, но при этом typescript ругается на последний по глубине ключ color, говоря:

Property 'color' does not exist on type 'string | number | CSS

.
Как это поправить?

Answer 1

[Aetae]

На каждом уровне проверять, что значение не string и не number. Иначе никак, ты сам задал такой тип, и ts не даст тебе совершить ошибку.

Если у тебя только 2 уровня, то не надо рекурсии:

interface CSS {
    [k: string]: {
        [k: string]: string | number 
    }
}

Если ты хочешь сузить тип при создании констатны, можно сделать так:

const css = {
    default: {
        color: '#676767',
        border: '1px solid',
        border_color: '#C4C4C4',
        border_radius: '110px',

        padding: '16px 21px',
    }
} satisfies CSS;