Le contrôle de type pour getElementById ne fonctionne qu'avec un chaînage optionnel, pas avec un contrôle de type.

Question

En essayant d'ajouter un dégradé à un graphique linéaire, j'avais besoin d'obtenir son canevas. Avant de procéder avec le canevas, j'ai ajouté une vérification de type, mais Vetur a remarqué que "l'objet est peut-être 'null'.Vetur(2531)".

  mounted() {
    const canv = document.getElementById("line-chart") as HTMLCanvasElement;
    if (canv !== null && canv !== undefined) {
      const gradient = canv
        .getContext("2d")
        .createLinearGradient(0, 0, 0, canv.height);

Après avoir fait des recherches, j'ai essayé d'utiliser l'opérateur de chaînage facultatif pour vérifier la saisie. Cette approche fonctionne, car aucune erreur n'est signalée.

  mounted() {
    const canv = document.getElementById("line-chart") as HTMLCanvasElement;
    const gradient = canv
      ?.getContext("2d")
      ?.createLinearGradient(0, 0, 0, canv.height);

Je ne comprends pas pourquoi la première approche ne fonctionne pas, puisque canv est une constante et ne peut donc pas changer. Une vérification du type devrait suffire.

Pourquoi seul le chaînage optionnel fonctionne-t-il dans ce cas ?

Answer 1

Le problème n'est pas canv . Le compilateur sait que canv elle-même n'est pas null mais si vous regardez le type de retour de la fonction canv.getContext("2d") , que est éventuellement null :

HTMLCanvasElement.getContext(
  contextId: "2d", 
  options?: CanvasRenderingContext2DSettings | undefined
): CanvasRenderingContext2D | null

C'est ce dont se plaint l'erreur "Object is possibly null". Vous pouvez corriger cela avec un chaînage optionnel après cet appel, tel que :

if (canv !== null && canv !== undefined) {
    const gradient = canv.getContext("2d")?.createLinearGradient(0, 0, 0, canv.height)
}

Ou bien vous pouvez faire une vérification de type plus explicite :

if (canv !== null && canv !== undefined) {
    const context = canv.getContext("2d");
    if (context) {
        const gradient = context.createLinearGradient(0, 0, 0, canv.height)
    }
}

Ou n'importe quoi d'autre qui convainc le compilateur que canv.getContext("2d") ne sera pas null :

if (canv !== null && canv !== undefined) {
    const gradient = (canv.getContext("2d") || { createLinearGradient: () => undefined })
        .createLinearGradient(0, 0, 0, canv.height);
}

Lien du terrain de jeu vers le code