Wie kann man "Fehler TS2533: Objekt ist möglicherweise 'null' oder 'undefiniert'" unterdrücken?

Ich habe eine type:

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

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

  maxVisibleListItems?: number
}

Ich deklariere eine globale modulweise Variable:

var $protected : tSelectProtected = {};

Ich weise im function1()Bereich den richtigen Wert zu :

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

Später function2()rufe ich an:

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

Ich erhalte einen TypeScript-Fehler:

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

Ich weiß, dass ich explizite Überprüfungen durchführen kann if ($protected.listEle) {$protected.listEle}, um den Compiler zu beruhigen, aber dies scheint für die meisten nicht trivialen Fälle sehr unhandlich zu sein.

Wie kann oder sollte mit dieser Situation umgegangen werden, ohne die TS-Compilerprüfungen zu deaktivieren?

Diese Funktion wird als "strikte Nullprüfung" bezeichnet, um sicherzustellen, dass das --strictNullChecksCompiler-Flag nicht gesetzt ist.

Die Existenz von nullwurde jedoch als " Der Milliarden-Dollar-Fehler" beschrieben. Daher ist es aufregend zu sehen, wie Sprachen wie TypeScript einen Fix einführen. Ich würde dringend empfehlen, es eingeschaltet zu lassen.

Eine Möglichkeit, dies zu beheben, besteht darin, sicherzustellen, dass die Werte niemals nullvorliegen undefined, oder indem Sie sie beispielsweise im Voraus initialisieren:

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

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

Siehe Ryan Cavanaughs Antwort für eine alternative Option!

Wenn Sie von außen wissen, dass ein Ausdruck nicht nulloder ist undefined, können Sie den Nicht-Null-Assertionsoperator verwenden !, um diese Typen zu erzwingen:

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

Ich benutzte:

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

Alternativ können Sie auch Zwang anwenden:

const objectX = object as string

Bevor Sie sich jedoch für eine der oben genannten Problemumgehungen entscheiden, sollten Sie die angestrebte Architektur und deren Auswirkungen auf das Gesamtbild berücksichtigen.

Keine direkte Antwort auf die Frage des OP, aber in meinem Fall hatte ich das folgende Setup -

Typoskript - v3.6.2
tslint -v5.20.0

Und mit dem folgenden Code

const refToElement = useRef(null);

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

Ich ging weiter, indem ich den Compiler für diese Zeile unterdrückte. Beachten Sie, dass // tslint:disable-next-linedies nicht funktioniert hat , da es sich um einen Compilerfehler und nicht um den Linterfehler handelt . Außerdem sollte dies gemäß der Dokumentation nur selten verwendet werden, wenn dies erforderlich ist -

const refToElement = useRef(null);

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

UPDATE :

Mit Typescript 3.7 können Sie die optionale Verkettung verwenden , um das obige Problem wie folgt zu lösen:

refToElement?.current?.focus();

Diese Lösung hat bei mir funktioniert:

• Gehen Sie zu tsconfig.json und fügen Sie "strictNullChecks" hinzu: false

Wenn Sie wissen, dass der Typ niemals nulloder sein wird undefined, sollten Sie ihn als foo: Barohne den deklarieren ?. Wenn Sie einen Typ mit der ? BarSyntax deklarieren, kann dies möglicherweise undefiniert sein. Dies müssen Sie überprüfen.

Mit anderen Worten, der Compiler macht genau das, was Sie von ihm verlangen. Wenn Sie möchten, dass es optional ist, müssen Sie dies später überprüfen.

Dies ist nicht das Problem des OP, aber ich habe dieselbe Object is possibly 'null'Meldung erhalten, als ich versehentlich einen Parameter als Nulltyp deklariert hatte:

something: null;

anstatt ihm den Wert null zuzuweisen:

something: string = null;

Optional können Sie einen Typ Casting verwenden. Wenn Sie diesen Fehler vom Typoskript haben, bedeutet dies, dass eine Variable einen Typ hat oder undefiniert ist:

let a: string[] | undefined;

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

Stellen Sie sicher, dass dies awirklich in Ihrem Code vorhanden ist.

Ab TypeScript 3.7 ( https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-7.html ) können Sie jetzt den ?.Operator verwenden, um beim Zugriff auf ein Attribut (oder beim Aufrufen einer Methode) undefiniert zu werden ) für ein null oder undefiniertes Objekt:

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

Tipp für RxJS

Ich habe oft Mitgliedsvariablen vom Typ Observable<string>, und ich werde sie erst initialisieren ngOnInit(mit Angular). Der Compiler geht dann davon aus, dass es nicht initialisiert ist, da es nicht "definitiv im Konstruktor zugewiesen" ist - und der Compiler wird es nie verstehen ngOnInit.

Sie können den !Assertion-Operator für die Definition verwenden, um den Fehler zu vermeiden:

favoriteColor!: Observable<string>;

Ein nicht initialisiertes Observable kann alle Arten von Laufzeitschmerzen verursachen, mit Fehlern wie "Sie müssen einen Stream bereitstellen, aber Sie haben null angegeben". Das !ist in Ordnung, wenn Sie definitiv wissen, dass es in so etwas wie gesetzt wird ngOnInit, aber es kann Fälle geben, in denen der Wert auf eine andere, weniger deterministische Weise gesetzt wird.

Eine Alternative, die ich manchmal benutze, ist:

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

Wo uninitializedist global irgendwo definiert als:

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

Wenn Sie diesen Stream dann jemals verwenden, ohne dass er definiert ist, wird sofort ein Laufzeitfehler ausgegeben.

In ReactJS überprüfe ich im Konstruktor, ob die Variablen null sind. Wenn dies der Fall ist, behandle ich sie wie eine Ausnahme und verwalte die Ausnahme entsprechend. Wenn die Variablen nicht null sind, wird der Code fortgesetzt und der Compiler beschwert sich nach diesem Punkt nicht mehr:

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
    }

Ich bin mit React darauf gestoßen, als ich den Status eingestellt und verwendet habe map.

In diesem Fall habe ich einen API-Abruf aufgerufen und der Wert der Antwort war nicht bekannt, sollte aber den Wert "Antwort" haben. Ich habe dafür einen benutzerdefinierten Typ verwendet, aber da der Wert sein könnte null, habe ich trotzdem einen TS-Fehler erhalten. Das Zulassen des Typs nullbehebt das Problem nicht. alternativ könnte man ein verwenden default parameter value, aber das war für meinen Fall chaotisch.

Ich habe es überwunden, indem ich einen Standardwert für den Fall angegeben habe, dass die Antwort leer war, indem ich nur einen ternären Operator verwendet habe:

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

Im Typoskript können Sie Folgendes tun, um Folgendes zu unterdrücken error:

let subString?: string;

subString > !null; - Beachten Sie das hinzugefügte Ausrufezeichen vor null.

Versuchen Sie, ein Objekt wie folgt aufzurufen:

(<any>Object).dosomething

Dieser Fehler ist aufgetreten, weil Sie sie mit als optional deklariert haben ?. Jetzt führt Typescript eine strenge Prüfung durch und erlaubt nichts, was möglich ist undefined. Daher können Sie (<any>yourObject)hier verwenden.