时间戳

首页 > 解决方案 > 强制 TypeScript 逐字输入对象

typescript - 强制 TypeScript 逐字输入对象

问题描述

我有一个大的常量 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 尽可能地自动键入对象？

标签： typescripttypescript-typings

解决方案

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

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

操场

  • 没有扩大文字类型
  • 对象文字获得只读属性
  • 数组文字变成只读元组

推荐阅读