Reactjs React-TypeScript:Type'；空'；不可分配给类型'；CanvasRenderingContext2D'；_Reactjs_Typescript_Canvas

Reactjs React-TypeScript:Type'；空'；不可分配给类型'；CanvasRenderingContext2D'；

reactjs typescript canvas

Reactjs React-TypeScript:Type'；空'；不可分配给类型'；CanvasRenderingContext2D'；,reactjs,typescript,canvas,Reactjs,Typescript,Canvas,我似乎能够创建画布，但当我了解上下文时 const resizeImage = async (maxSize: number) => { const image = originalImage; const id = positionId; const resizeCanvas = document.createElement('canvas'); resizeCanvas.width = maxSize; resizeCanvas.height

我似乎能够创建画布，但当我了解上下文时

  const resizeImage = async (maxSize: number) => {
    const image = originalImage;
    const id = positionId;
    const resizeCanvas = document.createElement('canvas');
    resizeCanvas.width = maxSize;
    resizeCanvas.height = maxSize;
    const ctx: CanvasRenderingContext2D = resizeCanvas.getContext('2D');
//         ^ Error
    ...

错误是

Type 'CanvasRenderingContext2D | ImageBitmapRenderingContext | WebGLRenderingContext | WebGL2RenderingContext | null' is not assignable to type 'CanvasRenderingContext2D'.
  Type 'null' is not assignable to type 'CanvasRenderingContext2D'.ts(2322)

该错误意味着

resizeCanvas.getContext（'2D'）

可以返回null，但您正在将其分配给类型为

canvasrendingcontext2d

的变量（即，该变量不能为null）。因此，在赋值之前，需要确保结果不为null。另外，我想您应该确保它是

canvasrendingcontext2d

类型，而不是

ImageBitmapRenderingContext

等。您可以执行以下操作：

const resizeImage=async（maxSize:number）=>{
常量图像=原始图像；
const id=位置id；
const resizeCanvas=document.createElement（'canvas'）；
resizeCanvas.width=maxSize；
resizeCanvas.height=maxSize；
const res=resizeCanvas.getContext（'2D'）；
如果（！res | |！（画布渲染上下文2D的res实例））{
抛出新错误（'获取2D上下文失败'）；
}
const ctx:canvasrendingcontext2d=res；

该错误意味着

resizeCanvas.getContext（'2D'）

可以返回null，但您正在将其分配给类型为

CanvasRenderingContext2D

的变量（即，该变量不能为null）。因此，在分配它之前，您需要确保结果不为null。此外，我猜您希望确保它的类型为

CanvasRenderingContext2D

，而不是

ImageBitmapRenderingContext

等。您可以执行以下操作：

const resizeImage=async（maxSize:number）=>{
常量图像=原始图像；
const id=位置id；
const resizeCanvas=document.createElement（'canvas'）；
resizeCanvas.width=maxSize；
resizeCanvas.height=maxSize；
const res=resizeCanvas.getContext（'2D'）；
如果（！res | |！（画布渲染上下文2D的res实例））{
抛出新错误（'获取2D上下文失败'）；
}
const ctx:canvasrendingcontext2d=res；

以下操作将起作用

const resizeImage = async (maxSize: number) => {
const image = originalImage;
const id = positionId;
const resizeCanvas = document.createElement('canvas');
resizeCanvas.width = maxSize;
resizeCanvas.height = maxSize;
const ctx = resizeCanvas.getContext('2D') as unknown as CanvasRenderingContext2D;

以下方法将起作用

const resizeImage = async (maxSize: number) => {
const image = originalImage;
const id = positionId;
const resizeCanvas = document.createElement('canvas');
resizeCanvas.width = maxSize;
resizeCanvas.height = maxSize;
const ctx = resizeCanvas.getContext('2D') as unknown as CanvasRenderingContext2D;

打字错误：它是

getContext（“2d”）

而不是

“2d”

，与案例有关

当传递无效参数时，此方法将返回

null

const canvas=document.createElement（'canvas'）；
const upperCased=canvas.getContext（'2D'）；
const lowerCased=canvas.getContext（'2d'）；
console.log（'upper-cased'，upperCased）//null
console.log（'lower cased'，小写）/{“drawImage”：…

TYPO: 它是

getContext（“2d”）

而不是

“2d”

，与案例有关

当传递无效参数时，此方法将返回

null

const canvas=document.createElement（'canvas'）；
const upperCased=canvas.getContext（'2D'）；
const lowerCased=canvas.getContext（'2d'）；
console.log（'upper-cased'，upperCased）//null
console.log（'lower cased'，lowerCased）/{“drawImage”：…

不声明属性并在之后分配它，只需将其设置为本地，然后将其导出。当您在外部声明时，需要先将其置空，而canvas不接受它

因此，改变这一点：

/**画布2d上下文*/
私有上下文：CanvasRenderingContext2D；
ngAfterViewInit（）{
this.context=（this.canvas.nativeElement作为HTMLCanvasElement.getContext（'2d'）；
...
}

与其声明属性并在之后分配属性，不如将其设置为本地，然后将其导出。当您在外部声明时，需要先将其置零，而canvas不接受它

因此，改变这一点：

/**画布2d上下文*/
私有上下文：CanvasRenderingContext2D；
ngAfterViewInit（）{
this.context=（this.canvas.nativeElement作为HTMLCanvasElement.getContext（'2d'）；
...
}

这意味着

resizeCanvas.getContext（'2D'）

可以返回null，但您正在将其分配给类型为

canvasrendingcontext2d

的变量（即不能为null）。因此，在分配它之前，您需要确保结果不为null。如果结果为null，则抛出错误。我认为您的建议有助于我使用

const ctx:canvasrendingcontext2d=resizeCanvas.getContext（'2d'）！；

Mmm是的，您可以这样做，但是只有在您绝对确定

resizeCanvas.getContext（'2D'）的情况下，才应该真正使用非空断言运算符

在运行时将永远不会返回null。如果您确定，则可以，但如果不最好先检查null，则在分配给

ctx

之前处理它。否则，您的程序可能会在运行时崩溃。您是否愿意提交一个带有示例的答案，我将接受它？这意味着

resizeCanvas.getContext（'2D'））

可以返回null，但您正在将其分配给类型为

CanvasRenderingContext2D

的变量（即不能为null）。因此，在分配它之前，您需要确保结果不为null。如果结果为null，则抛出错误。我认为您的建议有助于我使用

const ctx:canvasrendingcontext2d=resizeCanvas.getContext（'2d'）！；

Mmm是的，您可以这样做，但是只有在您绝对确定

resizeCanvas.getContext（'2D'）的情况下，才应该真正使用非空断言运算符

在运行时将永远不会返回null。如果您确定，则可以，但如果不最好先检查null，则在分配给

ctx

之前处理它。否则，您的程序可能会在运行时崩溃。您是否愿意提交一个带有示例的答案，我将接受Initive刚才尝试了您的答案，我得到

键入“CanvasRenderingCo”ntext2D | ImageBitmapRenderingContext | WebGLRenderingContext | WebGL2RenderingContext | null |不可分配给类型“CanvasRenderingContext2D”。类型“null”不可分配给类型“CanvasRenderingContext2D”。ts（2322）

哦，对了，TS不能将instanceof条件视为排除null。我已经编辑了答案，它现在有效吗？哦，对了，我不确定，我认为应该有效。这是一个奇怪的问题，但我没有得到

[typescript]相关文章推荐

随机文章推荐