0

у меня есть объект и интерфейс

interface Themes {
  [key:string]: {[key:string]: string} | string
}

const themes: Themes = {
    blue: {
      static: '#4687ed',
      hover: '#589bfe',
      active: '#1e4bb8',
      color: '#fff'
    },
    confirmed: '#e3f2d9'
}

в случае если я обращаюсь к свойству объекта ТС ругается

themes.blue.color -- color не существует в типе string

как правильно описать интерфейс?

1 ответ 1

0
interface ElementStyle {
    color?: string
    hover?: string
    active?: string
    static?: string
}

interface Themes {
    blue?: ElementStyle
    confirmed?: string
}

const themes: Themes = { }

Если сделать проверку типов более строгой использовав опцию strictNullChecks и использовать Type Guards, то можно получить больше гарантий в коде:

// Type Guard
function isString(arg: any): arg is string {
    return typeof arg === 'string'
}

Для строгой проверки на null и undefined в tsconfig.json нужно добавить:

{
    "compilerOptions": {
        "strictNullChecks": true
    }
}

Проверка и пример использования:

const themes: Themes = {
    blue: {
        static: '#4687ed',
        hover: '#589bfe',
        active: '#1e4bb8',
        color: '#fff'
    },
    confirmed: '#e3f2d9'
}

let maybeBlue = themes.blue // => ElementStyle | undefined
if (maybeBlue) { // => ElementStyle
    console.log(maybeBlue.active || "active is not set")
}

let maybeConfirmed = themes.confirmed // => string | undefined
if (maybeConfirmed) { // => string
    console.log(maybeConfirmed.toLocaleUpperCase())
}

const key = (function () { return "blue" }()) as keyof Themes // => "blue" | "confirmed"

let selectedTheme = themes[key] // => string | ElementStyle | undefined
if (selectedTheme) { // => string | ElementStyle
    if (isString(selectedTheme)) { // => string
        console.log(selectedTheme.toLocaleLowerCase())
    } else { // => selectedTheme != string => ElementStyle
        console.log(selectedTheme.color || "color is not set" )
    }
}
4
  • тогда возникает проблема если я обращаюсь к свойству theme не напрямую, а например themes[props.something].color, получаю еррор, элемент неявно имеет тип any т.к. тип Themes не содержит сигнатуру индекса, кроме того, а что если у меня свойств типа blue = 100
    – 4knort
    24 мар 2019 в 9:38
  • Я проверил, транслятор TS на themes[selectedTheme].nothing ошибок не показывает, конечно тут будет возвращен undefined, потому как однозначно узнать тип объекта находящийся по themes[key] в момент трансляции нельзя, это высинится в момент исполнения. Лучше я решения не знаю. Кроме того, если у тебя свойств типа blue много, то всех их нужно перечислить, ведь это статическая информация о типах, можешь глянуть например lib.es5.d.ts, там полно всяких ResolvedDateTimeFormatOptions и т.д. 24 мар 2019 в 10:25
  • Я для себя открыл опцию strictNullChecks, после чего появился еще один вариант описать типизацию. 24 мар 2019 в 11:18
  • @4knort Я переосмыслил решение, убрал лишнее. 25 мар 2019 в 6:55

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.