时间戳

首页 > 解决方案 > 如何理解 Typescript 错误消息？

typescript - 如何理解 Typescript 错误消息？

问题描述

我是 Typescript 的新手，并试图了解 typescript 吐出的错误消息。我花了几个小时试图搜索以下内容的含义：

ERROR in [at-loader] ./src/Radio/styles.tsx:142:3
    TS2322: Type 'StyledComponent<"input", WireframeTheme, {}, never>' is not assignable to type 'StyledComponent<"input", WireframeTheme, RadioStyleProps, never>'.
  Type 'StyledComponent<"input", WireframeTheme, {}, never>' is not assignable to type 'StyledComponentBase<"input", WireframeTheme, RadioStyleProps, never>'.
    Types of property 'defaultProps' are incompatible.
      Type 'Partial<Pick<Pick<Pick<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "children" | ... 284 more ... | "step"> & { ...; }, "children" | ... 285 more ... | "step"> & Partial<...>, "children" | ... 285 more ... | "step"> & { ...; }> | undefined' is not assignable to type 'Partial<Pick<Pick<Pick<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "children" | ... 284 more ... | "step"> & { ...; } & RadioStyleProps, "children" | ... 287 more ... | "hasIcon"> & Partial<...>, "children" | ... 287 more ... | "hasIcon"> & { ...; }> | undefined'.
        Type 'Partial<Pick<Pick<Pick<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "children" | ... 284 more ... | "step"> & { ...; }, "children" | ... 285 more ... | "step"> & Partial<...>, "children" | ... 285 more ... | "step"> & { ...; }>' is not assignable to type 'Partial<Pick<Pick<Pick<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "children" | ... 284 more ... | "step"> & { ...; } & RadioStyleProps, "children" | ... 287 more ... | "hasIcon"> & Partial<...>, "children" | ... 287 more ... | "hasIcon"> & { ...; }>'.
          Types of property 'size' are incompatible.
            Type 'number | undefined' is not assignable to type 'undefined'.
              Type 'number' is not assignable to type 'undefined'.

据我了解，似乎存在类型不匹配。但我不知道哪个组件。

任何帮助，将不胜感激。

谢谢

标签： typescript

解决方案

因此，在某处，您正在设置一个名为sizetype的属性number | undefined。然后某处的其他东西正在尝试使用该属性，但它未能实现指定size只能是number.

无论您在其中设置该属性的任何对象，然后都会在其他地方使用，或者在其他地方使用，依此类推。这就是为什么您会看到这么长的这些类型错误列表。

考虑这个抛出类型错误的简单示例。

interface SomeType {
  size: number,
}

const MyComponent: React.FC = () => {
  let someSetting = "small";

  const getSize = () => {
    if (someSetting === "large") {
      return 100;
    }
  }

  let myVar: SomeType = {
    size: getSize(), // This line has a type error.
  };

  return null;
}

该类型SomeType表示 size 必须始终是一个数字，而不是其他任何东西。我的组件正在尝试创建一个必须实现 SomeType 接口myVar的变量。所以要设置，我调用的函数在一种情况下会返回 100，但在另一种情况下是未定义的。这会导致类型错误。为什么当我像这样向 getSize 函数添加类型时，它变得更明显了：sizegetSize

const getSize = (): number | undefined => {
  if (someSetting === "large") {
    return 100;
  }
}

现在您可以清楚地看到该函数返回number | undefined. 打字稿报告错误：

Type 'number | undefined' is not assignable to type 'number'.
  Type 'undefined' is not assignable to type 'number'.ts(2322)
App.tsx(17, 3): The expected type comes from property 'size' which is declared here on type 'SomeType'

要解决此问题，我只需要跟踪我将属性设置为错误类型的位置，然后确保始终正确设置类型。以下是我如何修复 getSize() 方法，使其始终返回一个数字：

const getSize = () => {
  if (someSetting === "large") {
    return 100;
  } else {
    return 50;
  }
}

现在该getSize()函数无法返回除数字以外的任何内容，并且我已经解决了类型错误。

推荐阅读