在保留原始类型的同时限制类型？

Question

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 限制来实现的。

我正在尝试让 Keys 成为 'list' | 'listitem'，这适用于样式不受 StylesDefinition 约束的情况。

我想约束以帮助填充样式变量和值，同时我希望能够在引用样式对象时进行类型检查，以便我只能使用 styles.list 和 styles.list计数

很高兴介绍更多类型和方法来实现我的目标。

Answer 1

您不能既限制变量的类型又推断其类型。通常的做法是使用一个函数，它可以有一个类型参数，既是约束又是推断：

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

在保留原始类型的同时限制类型？

Constrain type while still preserving original type?

typescript

reactjs

jss