Typescript 如何在不重新键入键的情况下使用界面

为了使用auto complete，我使用了一个具有硬编码键和值类型的接口。 它工作正常，但我认为键入两次键（例如界面中的“title”、“header”和真正的typoobj）是很乏味的。是否有更好的方法使用泛型接口

这是我的密码

接口Itypo{
标题：CSSProperties；
标题：CSSProperties；
}
常量输入错误：Itypo={
标题：{
fontFamily：“机器人”，
字体大小：100，
线高：117，
},
标题：{
fontFamily：“机器人”，
尺码：18，
线高：22，
},
};

如果使用具有命名属性的接口，则无法避免这种重复。您需要在

接口

声明中键入属性名称，并且需要在对象文本中键入属性名称以指定其值

您可能只想继续这样做，但还有一种替代方法，即使用元组类型，甚至可能是命名元组：

type Itypo=[标题：CSSProperties，标题：CSSProperties]；
常量输入错误：Itypo=[
{
fontFamily：“机器人”，
字体大小：100，
线高：117，
},
{
fontFamily：“机器人”，
尺码：18，
线高：22，
}
];

现在，

title

和

header

处于位置（

title

位于第一个位置，

header

位于第二个位置）

但是，虽然这样可以省去键入

标题

和

标题

，但在您使用

打字输入时，可能会出现清晰度不高的问题，您还可以使用：

type TypoKeys='title'|'header'；
//或者是这种类型
//键入TypoKeys='title'|'header'|字符串；
常量输入错误：记录={
标题：{
fontFamily：“机器人”，
字体大小：100，
线高：117
},
标题：{
fontFamily：“机器人”，
字体大小：100，
线高：117
}
};
您的意思是不想输入
标题
和
标题
？或
type TypoKeys = 'title' | 'header';

// Or maybe this type
// type TypoKeys = 'title' | 'header' | string;

const typo: Record<TypoKeys, CSSProperties> = {
    title: {
        fontFamily: "Roboto",
        fontSize: 100,
        lineHeight: 117
    },
    header: {
        fontFamily: "Roboto",
        fontSize: 100,
        lineHeight: 117
    }
};