Fatal编程技术网
  • reactjs/
  • Reactjs React-TypeScript:Type'；空'；不可分配给类型'；CanvasRenderingContext2D'；

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。我已经编辑了答案，它现在有效吗？哦，对了，我不确定，我认为应该有效。这是一个奇怪的问题，但我没有得到