element隐式具有"any"类型,因为类型"{0}"没有索引签名

Question

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

element隐式具有"any"类型,因为类型"{0}"没有索引签名

我该如何解决这个问题？

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]无效,AND attr[p]也无效.当我说无效时,这是因为调用target[p]并attr[p]返回一个隐式输入的变量any,因为你将标志noImplicitAny设置为truein ,这是无效的tsconfig.json.

您可以通过添加索引签名来修复您的界面[key:string]: any;,但无法修复CanvasRenderingContext2D.

第一解决方案

通过设置noImplicitAny为停用编译器规则false.在tsconfig.json:

{
  "compilerOptions": {
    "noImplicitAny": false
  }
}

二解决方案

将标志设置suppressImplicitAnyIndexErrors为true.在tsconfig.json:

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

第三种方案

明确地设置一切.我的首选解决方案,因为它保留了打字:

function setAttrs(target: CanvasRenderingContext2D, attr: Partial<Attr>) {
    target.fillStyle = attr.fillStyle;
    target.font = attr.font;
    target.globalAlpha = attr.globalAlpha;
    ...
}

这样你获得了完整的类型覆盖,这更好!

参考文献:

• 在编译带有noImplicitAny标志的typescript时,如何防止错误"对象类型的索引签名隐式具有'任何'类型"？