TypeScript 3.9 与 HTML5 Canvas — 错误 on.strokeStyle

Question

Not sure how to resolve the issue, but I am facing an error that won't let color the strokes of the line:

const canvas = document.querySelector('canvas')! as HTMLCanvasElement;

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

const c = canvas.getContext('2d');

c?.fillRect(100, 100, 100, 100)

c?.beginPath();
c?.moveTo(50, 300)
c?.lineTo(300, 100)
c?.lineTo(400, 300)
c?.strokeStyle = "red" //<=== error occuring
c?.stroke()

The error is: TS2779: The left-hand side of an assignment expression may not be an optional property access.

Looking deeply in the library, I see that its interface, CanvasFillStrokeStyles is correctly identifying fillStyle :

interface CanvasFillStrokeStyles {
    fillStyle: string | CanvasGradient | CanvasPattern;
    strokeStyle: string | CanvasGradient | CanvasPattern;
    createLinearGradient(x0: number, y0: number, x1: number, y1: number): CanvasGradient;
    createPattern(image: CanvasImageSource, repetition: string | null): CanvasPattern | null;
    createRadialGradient(x0: number, y0: number, r0: number, x1: number, y1: number, r1: number): CanvasGradient;
}

Answer 1

The optional chaining operator ?. in JavaScript (and therefore in TypeScript) permits reading the value of a property located deep within a chain of connected objects without having to expressly validate that each reference in the chain is valid. It does not allow you to assign properties . This functionality was considered but deferred to a possible future proposal .

For now, if you want to assign a property to something that might turn out to be null or undefined , you will have to write that code yourself without using ?. :

if (c !== null) c.strokeStyle = "red"; // okay

---

In fact, given that you keep using ?. on the same object makes me think you'd be happier just checking that object for nullishness once and then using regular property access after that:

if (!c) throw new Error("Where's my 2d context?!");
c.fillRect(100, 100, 100, 100)
c.beginPath();
c.moveTo(50, 300)
c.lineTo(300, 100)
c.lineTo(400, 300)
c.strokeStyle = "red"
c.stroke();

---

Okay, hope that helps; good luck!

Playground link to code