Ограничить тип при сохранении исходного типа?

import { CSSProperties } from 'react';
type StyleRulesType = Partial<CSSProperties>

type StylesDefinition = { [key: string]: StyleRulesType };


const styles: StylesDefinition = {
    list: {
        position: 'relative',
    },
    listCount: {
        fontStyle: 'italic'
    }
}

type StyleKeys = keyof typeof styles;

Я пытаюсь ограничить стили, чтобы они содержали только дочерние элементы меток и значений CSSProperties, это работает через ограничение StylesDefinition.

Я пытаюсь включить «список» ключей | listitem, это работает, когда стили не ограничены StylesDefinition.

Я хочу ограничиться, чтобы помочь заполнить переменные стиля и значения, в то же время я хочу иметь возможность получать проверку типа при ссылке на объект стилей, чтобы я мог использовать только styles.list и styles.listCount

Рад представить другие типы и методы для достижения моей цели.


reactjs typescript jss
person Dashu    schedule 13.03.2020    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Вы не можете одновременно ограничить тип переменной и сделать вывод о ее типе. Обычный способ сделать это - использовать функцию, которая может иметь параметр типа, который является как ограниченным, так и предполагаемым:

import { CSSProperties } from 'react';
type StyleRulesType = Partial<CSSProperties>

type StylesDefinition = { [key: string]: StyleRulesType };
function createStyleDefinition<T extends StylesDefinition>(o: T) {
    return o;
}

const styles = createStyleDefinition({
    list: {
        position: 'relative',
    },
    listCount: {
        fontStyle: 'italic'
    }
})

type StyleKeys = keyof typeof styles;

площадка Link

person Titian Cernicova-Dragomir    schedule 13.03.2020