Ограничить тип при сохранении исходного типа? - PullRequest
1 голос
/ 13 марта 2020
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.

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

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

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

1 Ответ

2 голосов
/ 13 марта 2020

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

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; 

Playground Link

...