web-dev-qa-db-fra.com

document.getElementById ("id") peut être nul

Edit: j'utilise TypeScript v2.2.1

Je suis nouveau sur TypeScript et je ne sais pas quelle est la façon la plus propre de gérer les éléments DOM qui peuvent ou non exister. Fondamentalement, je veux vérifier si un élément existe, puis si c'est le cas, y ajouter un écouteur d'événements (j'ai --strict_null_checks Activé).

Quand je le fais à la manière de JS:

const myElement = document.getElementById('my-id');
if (myElement) {
  myElement.addEventListener('click', (e:Event) => {
    // Do stuff.
  });
}

J'obtiens l'erreur my_script.ts(3, 3): error TS2531: Object is possibly 'null'.

Je peux contourner cela en utilisant une assertion non nulle:

const maybeMyElement = document.getElementById('my-id');
if (maybeMyElement) {
  const myElement = maybeMyElement!;
  myElement.addEventListener('click', (e:Event) => {
    // Do stuff.
  });
}

Mais je crois comprendre que ce genre d'affirmations est généralement mal vu et, esthétiquement, je n'aime pas créer deux fois plus de variables.

Existe-t-il une façon plus propre de procéder?

typescripttypescript2.0
11
Evan Hefner

Vous devez taper vos variables. Je n'ai pas fait grand chose avec const, mais votre deuxième option semble tout simplement fausse (odeur de code).

Vous devriez pouvoir contourner l'avertissement en tapant strictement la variable. Le compilateur considère actuellement cela comme

const myElement: HTMLElement = document.getElementById('my-id');

Si vous le modifiez également pour être éventuellement nul, les valeurs nulles sont autorisées:

const myElement: HTMLElement | null = document.getElementById('my-id');

Mise à jour

Deuxième option (que je n'ai pas essayée): utilisez le ! à la fin de l'opération potentiellement nulle, par https://stackoverflow.com/a/40640854/2084315

const myElement = document.getElementById('my-id')!;
13
ps2goat

Essayez d'utiliser les éléments suivants:

if (!!myElement) {
    myElement.addEventListener('click', (e:Event) => {
        // Do stuff.
    });
}

Le !! contraint une expression d'objet en un booléen. C'est le ! opérateur deux fois. Pour plus d'informations à ce sujet, voir cette réponse

2
Amy