typescript - Typescript 错误：扩展推断类型可防止 TS Linting 错误（提供 Playground 示例）

问题描述

我有一个名为的函数myStyles，它接受一个参数。这个参数是一个包含一个baseStyles对象和一个对象的styleVariants对象。它只是返回styleVariants对象。

function myStyles<StyleVariants extends StyleVariantsStructure>(params: {
  baseStyles: AllowedStyles;
  styleVariants: StyleVariants;
}): StyleVariants {
  return params.styleVariants;
}

它是这样调用的：

myStyles({
  baseStyles: {
    color: 'red',
    backgroundColor: 'red',
  },
  styleVariants: {
    color: {
      red: {
        color: 'red',
        backgroundColor: 'red',
      },
    },
  },
});

该baseStyles对象具有 type AllowedStyles，它确定我们允许哪些 css 属性和值。这非常有效，如果调用函数时 CSS 属性或值拼写错误，我们会得到正确的 TS 错误，myStyles例如

type AllowedStyles = {
  color?: 'red';
  backgroundColor?: 'red';
};

该styleVariants对象具有类型StyleVariantsStructure。这实质上决定了它应该接受一个或多个包含AllowedStyles例如的嵌套对象

type StyleVariantsStructure = {
  [k: string]: {
    [k: string]: AllowedStyles;
  };
};

在函数中，我们对param 对象myStyles使用类型推断。styleVariants这意味着，我们会自动获取styleVariants传入myStyles函数的确切类型。然后我们使用该styleVariants类型作为函数的返回类型。这对我们来说是必需的，因为我们需要知道myStyles. 这是我们的函数：

function myStyles<StyleVariants extends StyleVariantsStructure>(params: {
  baseStyles: AllowedStyles;
  styleVariants: StyleVariants;
}): StyleVariants {
  return params.styleVariants;
}

这是类型推断返回类型的示例，取自我用来演示此问题的 Typescript 游乐场：

问题

正如你所看到的，我需要限制在styleVariants对象中传递的东西，使用StyleVariantsStructure我们必须只接受的类型AllowedStyles。但是，我们还需要将推断类型 fromstyleVariants用于函数的返回类型myStyles。我试图通过使用来解决这个问题StyleVariants extends StyleVariantsStructure。这有点工作，但styleVariants在调用myStyles.

例如，如果color拼写错误，我们不会收到 TS 错误：

但是，我确实得到了类型建议：

而且，如果值拼写错误，我会收到错误：

本质上，对我来说，似乎我需要找到一种替代方法来对styleVariants对象使用类型推断，同时还要使用类型来限制它StyleVariantsStructure。对此的任何帮助将不胜感激。

Typescript 游乐场中问题的最小演示

标签： typescriptgenericstype-inferencetypescript-generics

typescript - Typescript 错误：扩展推断类型可防止 TS Linting 错误（提供 Playground 示例）

问题描述

解决方案

推荐阅读