Comment supprimer «erreur TS2533: l'objet est peut-être« nul »ou« non défini »»?

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 par module:

var $protected : tSelectProtected = {};

J'attribue une valeur appropriée dans la function1()portée:

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

Plus tard dans la function2()portée, 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 ou doit être gérée sans désactiver les vérifications du compilateur TS?

Cette fonctionnalité est appelée "contrôles null stricts", pour la désactiver, assurez-vous que l' --strictNullChecksindicateur du compilateur n'est pas défini.

Cependant, l'existence de nulla été décrite comme The Billion Dollar Mistake , il est donc passionnant de voir des langages tels que TypeScript introduire un correctif. Je recommande fortement de le garder allumé.

Une façon de résoudre ce problème consiste à s'assurer que les valeurs ne sont jamais nullou undefined, par exemple en les initialisant à l'avance:

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!

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

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

J'ai utilisé:

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

Alternativement, vous pouvez utiliser la contrainte de type:

const objectX = object as string

Bien que, avant de choisir l'une des solutions de contournement ci-dessus, veuillez considérer l'architecture que vous visez et son impact sur la vue d'ensemble.

Pas une réponse directe à la question du PO, mais dans mon cas, j'avais la configuration suivante -

Tapuscrit - v3.6.2
tslint -v5.20.0

Et en utilisant le code suivant

const refToElement = useRef(null);

if (refToElement && refToElement.current) {
     refToElement.current.focus(); // Object is possibly 'null' (for refToElement.current)
}

J'ai continué en supprimant le compilateur pour cette ligne. Notez que comme il s'agit d'une erreur de compilation et non d'une erreur de linter, cela // tslint:disable-next-linen'a pas fonctionné. En outre, selon la documentation, cela devrait être utilisé rarement, uniquement lorsque cela est nécessaire -

const refToElement = useRef(null);

if (refToElement && refToElement.current) {
     // @ts-ignore: Object is possibly 'null'.
     refToElement.current.focus(); 
}

MISE À JOUR :

Avec Typescript 3.7, vous pouvez utiliser le chaînage facultatif , pour résoudre le problème ci-dessus comme -

refToElement?.current?.focus();

Cette solution a fonctionné pour moi:

• allez sur tsconfig.json et ajoutez "strictNullChecks": false

Si vous savez que le type ne sera jamais nullou undefined, vous devez le déclarer comme foo: Barsans ?. Déclarer un type avec le? Bar syntaxe signifie qu'il pourrait potentiellement ê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 que ce soit facultatif, vous devrez le vérifier plus tard.

Ce n'est pas le problème de l'OP, mais j'ai reçu le même Object is possibly 'null'message lorsque j'avais déclaré un paramètre comme type nul par accident:

something: null;

au lieu de lui attribuer la valeur null:

something: string = null;

En option, vous pouvez utiliser un transtypage de type. Si vous avez cette erreur de typescript, cela signifie qu'une variable a un type ou n'est pas définie:

let a: string[] | undefined;

let b: number = a.length; // [ts] Object is possibly 'undefined'
let c: number = (a as string[]).length; // ok

Assurez-vous que acela existe vraiment dans votre code.

Depuis TypeScript 3.7 ( https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-7.html ), vous pouvez désormais utiliser l' ?.opérateur pour obtenir undefined lors de l'accès à un attribut (ou de l'appel d'une méthode ) sur un objet nul ou non défini:

inputEl?.current?.focus(); // skips the call when inputEl or inputEl.current is null or undefined

Astuce pour RxJS

J'ai souvent des variables membres de type Observable<string>, et je ne l'initialiserai pas avant ngOnInit(en utilisant Angular). Le compilateur suppose alors qu'il n'est pas initialisé car il n'est pas «définitivement attribué dans le constructeur» - et le compilateur ne comprendra jamais ngOnInit.

Vous pouvez utiliser l' !opérateur d'assertion sur la définition pour éviter l'erreur:

favoriteColor!: Observable<string>;

Un observable non initialisé peut provoquer toutes sortes de problèmes d'exécution avec des erreurs comme «vous devez fournir un flux mais vous avez fourni null». C'est !bien si vous savez vraiment que cela va être réglé de quelque manière que ce soit ngOnInit, mais il peut y avoir des cas où la valeur est définie d'une autre manière moins déterministe.

Une alternative que je vais parfois utiliser est donc:

public loaded$: Observable<boolean> = uninitialized('loaded');

Où uninitializedest défini globalement quelque part comme:

export const uninitialized = (name: string) => throwError(name + ' not initialized');

Ensuite, si vous utilisez ce flux sans qu'il soit défini, il générera immédiatement une erreur d'exécution.

Dans ReactJS, je vérifie dans le constructeur si les variables sont nulles, si elles le sont, je le traite comme une exception et gère l'exception de manière appropriée. Si les variables ne sont pas nulles, le code continue et le compilateur ne se plaint plus après ce point:

private variable1: any;
private variable2: any;

constructor(props: IProps) {
    super(props);

    // i.e. here I am trying to access an HTML element
    // which might be null if there is a typo in the name
    this.variable1 = document.querySelector('element1');
    this.variable2 = document.querySelector('element2');

    // check if objects are null
    if(!this.variable1 || !this.variable2) {
        // Manage the 'exception', show the user a message, etc.
    } else {
        // Interpreter should not complain from this point on
        // in any part of the file
        this.variable1.disabled = true; // i.e. this line should not show the error
    }

J'ai rencontré cela avec React lors de la définition de l'état et de l'utilisation map .

Dans ce cas, je faisais un appel de récupération d'API et la valeur de la réponse n'était pas connue, mais devrait avoir une valeur "Answer". J'ai utilisé un type personnalisé pour cela, mais comme la valeur pourrait être null, j'ai quand même eu une erreur TS. Permettre au type d'être nullne le résout pas; vous pouvez également utiliser undefault parameter value , mais c'était désordonné pour mon cas.

Je l'ai surmonté en fournissant une valeur par défaut dans le cas où la réponse était vide en utilisant simplement un opérateur ternaire:

this.setState({ record: (response.Answer) ? response.Answer : [{ default: 'default' }] });

En dactylographie, vous pouvez effectuer les opérations suivantes pour supprimer error:

let subString?: string;

subString > !null; - Notez le point d'exclamation ajouté avant null.

Essayez d'appeler un objet comme ceci:

(<any>Object).dosomething

Cette erreur est survenue car vous les avez déclarés comme facultatifs à l'aide de ?. Désormais, Typescript effectue une vérification stricte et ne permet plus rien undefined. Par conséquent, vous pouvez utiliser (<any>yourObject)ici.