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" )
}
}