如何在接口中引用动态TypeScript属性？

9njqaruj 于 2023-03-24 发布在 TypeScript

关注(0)|答案(1)|浏览(101)

我试图键入一个主题对象，将与Tailwind一起使用，我试图实现的是在主题签名中动态提供类型：

export interface Theme {
  screens: {
    [key: string]: string;
  };
  bps: keyof this['screens'][]; // breakpoints
};

我试图实现的是提供一个接口来配置主题，但编译器一直在抱怨。理想情况下，接口的实现如下所示：

// good example
const t: Theme = {
    screens: {
        sm: "200px",
        md: "400px"
    },
    bps:["md"] // md exists in screens
}

// bad example
const tt: Theme = {
    screens: {
        sm: "200px",
        md: "400px"
    },
    bps:["foo"] // foo is not a key of screens
}

typescript

来源：https://stackoverflow.com/questions/75822358/how-to-reference-dynamic-typescript-properties-within-an-interface

1条答案

按热度按时间

gcuhipw91#

据我所知，唯一的方法是使Theme通用，这样我们就可以推断出键的类型，并且为了避免显式指定该类型，我们必须在创建主题时使用一个不做任何事情的函数。
它看起来像这样：

export interface Theme<Screens extends Record<string, string>> {
    screens: Screens;
    bps: (keyof Screens)[]; // breakpoints
}

function buildTheme<Screens extends Record<string, string>>(
    theme: Theme<Screens>
) {
    return theme;
}

// good example
const t = buildTheme({
    screens: {
        sm: "200px",
        md: "400px",
    },
    bps: ["md"], // Okay
});

// bad example
const tt = buildTheme({
    screens: {
        sm: "200px",
        md: "400px",
    },
    bps: ["foo"], // Error as desired:
    //    ^^^^^−−−−−Type '"foo"' is not assignable to type '"sm" | "md"'.ts(2322)
});

Playground链接

赞(0）回复(0）举报 2023-03-24

我来回答

如何在接口中引用动态TypeScript属性？

1条答案

相关问题

热门标签

最新问答