Comment supprimer "error TS2533 : Object is possibly 'null' or 'undefined'" ?

Question

J'ai un type :

type tSelectProtected = {
  handleSelector?: string,
  data?: tSelectDataItem[],

  wrapperEle?: HTMLElement,
  inputEle?: HTMLElement,
  listEle?: HTMLElement,
  resultEle?: HTMLElement,

  maxVisibleListItems?: number
}

Je déclare une variable globale de type module :

var $protected : tSelectProtected = {};

J'attribue la valeur appropriée dans function1() l'étendue :

$protected.listEle = document.createElement('DIV');

Plus tard dans function2() scope, j'appelle :

$protected.listEle.classList.add('visible');

Je reçois une erreur TypeScript :

error TS2533: Object is possibly 'null' or 'undefined'

Je sais que je peux faire une vérification explicite en utilisant if ($protected.listEle) {$protected.listEle} pour calmer le compilateur mais cela semble être très peu pratique pour la plupart des cas non triviaux.

Comment cette situation peut-elle ou doit-elle être traitée sans désactiver les contrôles du compilateur TS ?

Answer 1

Si vous savez par des moyens externes qu'une expression n'est pas null o undefined vous pouvez utiliser l'opérateur d'assertion non nul. ! pour éloigner ces types :

// Error, some.expr may be null or undefined
let x = some.expr.thing;
// OK
let y = some.expr!.thing;

Answer 2

Cette fonctionnalité est appelée "contrôles stricts des nullités". Pour la désactiver, il faut s'assurer que l'adresse de l'utilisateur est la suivante --strictNullChecks n'est pas activé.

Cependant, l'existence de null a a été décrit comme L'erreur du milliard de dollars Il est donc intéressant de voir des langages tels que TypeScript introduire un correctif. Je recommande vivement de garder cette option activée.

Une façon de résoudre ce problème est de s'assurer que les valeurs ne sont jamais null o undefined par exemple en les initialisant dès le départ :

interface SelectProtected {
    readonly wrapperElement: HTMLDivElement;
    readonly inputElement: HTMLInputElement;
}

const selectProtected: SelectProtected = {
    wrapperElement: document.createElement("div"),
    inputElement: document.createElement("input")
};

Voir La réponse de Ryan Cavanaugh pour une option alternative, cependant !

Answer 3

Cette solution a fonctionné pour moi :

• aller à tsconfig.json et ajouter "strictNullChecks":false

Answer 4

Mise à jour : Chaînage d'objets est un moyen d'accéder aux propriétés d'une référence éventuellement nulle ou indéfinie.

object?.objectProperty?.nextProperty

Précédemment

if (object !== undefined) {
    // continue - error suppressed when used in this way.
}

Précédemment

const objectX = object as string

Toutefois, avant d'opter pour l'une des solutions ci-dessus, réfléchissez à l'architecture que vous visez et à son impact sur l'ensemble du projet.

Answer 5

Si vous savez que le type ne sera jamais null o undefined vous devez le déclarer comme foo: Bar sans le ? . Déclarer un type avec l'option ? Bar signifie qu'il peut être indéfini, ce que vous devez vérifier.

En d'autres termes, le compilateur fait exactement ce que vous lui demandez. Si vous voulez qu'il soit optionnel, vous devrez le vérifier plus tard.