强制 TypeScript 按字面意思键入对象

Question

我有一个很大的常量 JavaScript 对象。像这样：

const commonStyles = {
    fullContainer: {
        flex: 1,
        alignItems: 'stretch',
        justifyContent: 'flex-start',
    },
    justifyEvenly: {
        justifyContent: 'space-evenly',
    },
    widthBound: {
        width: '100%',
        maxWidth: breakpoints.default,
        alignSelf: 'center',
    }
    (...there is more)
}

TypeScript 自动将所有 CSS 属性文本（“flex-start”、“space-evenly”等）键入为字符串，但我希望它们是键入文字。

// What I get
{
    fullContainer: {
        flex: number,
        alignItems: string,
        justifyContent: string,
    },
    ...
}
// What I want
{
    fullContainer: {
        flex: number,
        alignItems: 'stretch',
        justifyContent: 'flex-start',
    },
    ...
}

当然，我可以手动注释类型。但是这里的对象非常大（>50个条目并且还在增长），所以写完整的类型注释会非常繁琐。

我的问题：有没有办法让 TypeScript 尽可能按字面意思自动键入对象？

Answer 1

const assertion 可用于防止文字类型扩大：

const commonStyles = {
    fullContainer: {
        flex: 1,
        alignItems: 'stretch',
        justifyContent: 'flex-start',
    },
    justifyEvenly: {
        justifyContent: 'space-evenly',
    },
    //...
} as const;

Playground

no literal types widened

object literals get readonly properties

array literals become readonly tuples

强制 TypeScript 按字面意思键入对象

Force TypeScript to type object literally

typescript

typescript-typings