Question

我想用给定的Object设置CanvasRenderingContext2D上下文属性。但它总是抛出：

元素隐含有一个＆＃39; any＆＃39;输入因为类型＆＃39; {0}＆＃39;没有索引签名

如何解决此问题？

interface Attr {
  fillStyle: string | CanvasGradient | CanvasPattern;
  font: string;
  globalAlpha: number;
  lineCap: string;
  lineWidth: number;
  lineJoin: string;
  miterLimit: number;
  shadowBlur: number;
  shadowColor: string;
  strokeStyle: string;
  textAlign: string;
  textBaseline: string;
  lineDash: string;
}

const element: HTMLCanvasElement = <HTMLCanvasElement>document.querySelector('#c');
const ctx: CanvasRenderingContext2D = element.getContext('2d');

let attr:Partial<Attr> = {
  fillStyle: 'red',
  globalAlpha: 0.8
}

function setAttrs(target: CanvasRenderingContext2D, attr: Partial<Attr>) {
  for (let p in attr) {
    target[p] = attr[p];
  }
}

VS截图

Answer 1

对于Typescript，您无法通过索引访问CanvasRenderingContext2D的属性。您的对象Attr也无法通过索引访问，因此实际上您有2个错误：target[p]无效，而attr[p]也无效。当我说无效时，这是因为调用target[p]和attr[p]会将隐式输入的变量返回为any，这是无效的，因为您将标记noImplicitAny设置为{{1}在true。

您可以通过添加索引签名tsconfig.json来修复界面，但无法修复[key:string]: any;。

第一个解决方案

通过将CanvasRenderingContext2D设置为noImplicitAny来停用编译器规则。在false：

tsconfig.json

第二个解决方案

将标记{ "compilerOptions": { "noImplicitAny": false } }设置为suppressImplicitAnyIndexErrors。在true：

tsconfig.json

第三种解决方案

明确设置所有内容。我首选的解决方案，因为它保留了打字：

{
  "compilerOptions": {
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true
  }
}

这样你就可以获得完整的类型覆盖，这更好！

<强>参考文献：

How do I prevent the error “Index signature of object type implicitly has an 'any' type” when compiling typescript with noImplicitAny flag enabled?

element隐含地有一个＆＃39; any＆＃39;输入因为类型＆＃39; {0}＆＃39;没有索引签名

1 个答案: