Jak ukryć „błąd TS2533: Obiekt jest prawdopodobnie„ zerowy ”lub„ niezdefiniowany ””?

Mam type:

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

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

  maxVisibleListItems?: number
}

Deklaruję globalną zmienną modułową:

var $protected : tSelectProtected = {};

Przypisuję odpowiednią wartość w function1()zakresie:

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

Później function2()wzywam:

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

Otrzymuję błąd TypeScript:

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

Wiem, że mogę wykonać jawne sprawdzenie, if ($protected.listEle) {$protected.listEle}aby uspokoić kompilator, ale wydaje się to bardzo nieprzydatne w większości nie trywialnych przypadkach.

Jak tę sytuację można lub należy rozwiązać bez wyłączania sprawdzania kompilatora TS?

Ta funkcja nazywa się „ścisłymi kontrolami zerowymi”, aby ją wyłączyć, upewnij się, że --strictNullChecksflaga kompilatora nie jest ustawiona.

Jednak istnienie nullnie zostało opisane jako The Billion Dollar Mistake , więc jest to ekscytujące, aby zobaczyć języków takich jak maszynopis wprowadzając poprawki. Zdecydowanie zalecam włączenie go.

Jednym ze sposobów rozwiązania tego jest upewnienie się, że wartości nigdy nie są nulllub undefined, na przykład, inicjowanie ich z góry:

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

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

Zobacz odpowiedź Ryana Cavanaugha na alternatywną opcję!

Jeśli wiesz z zewnętrznych środków, że wyrażenie nie jest nulllub undefined, możesz użyć operatora asercji niepustej! aby wymusić następujące typy:

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

Użyłem:

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

Alternatywnie możesz użyć przymusu typu:

const objectX = object as string

Chociaż przed wybraniem jednego z powyższych obejść należy rozważyć architekturę, której szukasz, i ma to wpływ na szerszy obraz.

Nie jest to bezpośrednia odpowiedź na pytanie PO, ale w moim przypadku miałem następującą konfigurację -

Maszynopis - v3.6.2
tslint -v5.20.0

I używając następującego kodu

const refToElement = useRef(null);

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

Przeszedłem przez tłumienie kompilatora dla tej linii. Zauważ, że ponieważ jest to błąd kompilatora, a nie błąd linijki, // tslint:disable-next-linenie działał. Ponadto, zgodnie z dokumentacją, należy tego używać rzadko, tylko w razie potrzeby -

const refToElement = useRef(null);

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

AKTUALIZACJA :

W Typescript 3.7 możesz użyć opcjonalnego łańcucha , aby rozwiązać powyższy problem, ponieważ -

refToElement?.current?.focus();

To rozwiązanie działało dla mnie:

• przejdź do tsconfig.json i dodaj „strictNullChecks”: false

Jeśli wiesz, że typ nigdy nie będzie nulllub undefined, powinieneś zadeklarować go jako foo: Barbez ?. Zadeklarowanie typu za pomocą ? Barskładni oznacza, że ​​może on być potencjalnie niezdefiniowany, co należy sprawdzić.

Innymi słowy, kompilator robi dokładnie to, o co go prosisz. Jeśli chcesz, aby była opcjonalna, musisz sprawdzić później.

To nie jest problem PO, ale dostałem ten sam Object is possibly 'null'komunikat, gdy przez przypadek zadeklarowałem parametr jako typ zerowy:

something: null;

zamiast przypisywać mu wartość null:

something: string = null;

Opcjonalnie możesz użyć rzutowania typu. Jeśli występuje ten błąd z maszynopisu, oznacza to, że jakaś zmienna ma typ lub jest niezdefiniowana:

let a: string[] | undefined;

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

Upewnij się, że anaprawdę istnieją w twoim kodzie.

Począwszy od TypeScript 3.7 ( https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-7.html ), możesz teraz używać ?.operatora, aby uzyskać niezdefiniowany dostęp do atrybutu (lub wywołanie metody ) na pustym lub niezdefiniowanym obiekcie:

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

Wskazówka dla RxJS

Często będę mieć zmienne składowe typu Observable<string>i nie będę inicjalizował tego dopóki ngOnInit(używając Angulara). Kompilator następnie zakłada, że ​​jest niezainicjowany, ponieważ nie jest „definitywnie przypisany w konstruktorze” - i kompilator nigdy nie zrozumie ngOnInit.

Możesz użyć !operatora asercji w definicji, aby uniknąć błędu:

favoriteColor!: Observable<string>;

Niezainicjowana obserwowalna może powodować wszelkiego rodzaju bóle w środowisku wykonawczym z błędami takimi jak „musisz podać strumień, ale podałeś zero”. Jest !to w porządku, jeśli na pewno wiesz, że zostanie ustawione w podobny sposób ngOnInit, ale mogą zdarzyć się przypadki, w których wartość zostanie ustawiona w inny mniej deterministyczny sposób.

Alternatywą, której czasami używam, jest:

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

Gdzie uninitializedjest gdzieś zdefiniowane globalnie jako:

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

Jeśli kiedykolwiek użyjesz tego strumienia bez jego zdefiniowania, natychmiast wyrzuci on błąd czasu wykonywania.

W ReactJS sprawdzam w konstruktorze, czy zmienne są puste, jeśli tak, traktuję to jak wyjątek i odpowiednio zarządzam wyjątkiem. Jeśli zmienne nie mają wartości NULL, kod jest kontynuowany, a po tym momencie kompilator nie narzeka:

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
    }

Natknąłem się na to z React podczas ustawiania stanu i używania map.

W tym przypadku wykonałem wywołanie API i wartość odpowiedzi nie była znana, ale powinna mieć wartość „Odpowiedź”. Użyłem do tego niestandardowego typu, ale ponieważ wartość może być null, i tak dostałem błąd TS. Dopuszczenie typu nullnie rozwiązuje go; alternatywnie możesz użyć default parameter value, ale to było bałagan w moim przypadku.

Pokonałem go, podając wartość domyślną w przypadku, gdy odpowiedź była pusta, po prostu za pomocą operatora trójskładnikowego:

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

W maszynopisie możesz wykonać następujące czynności, aby ukryć error:

let subString?: string;

subString > !null; - Zwróć uwagę na dodany wykrzyknik przed wartością zerową.

Spróbuj wywołać obiekt w ten sposób:

(<any>Object).dosomething

Ten błąd nadszedł, ponieważ zadeklarowałeś je jako opcjonalne za pomocą ?. Teraz Maszynopis sprawdza dokładnie i nie pozwoli na nic, co może być undefined. Dlatego możesz użyć (<any>yourObject)tutaj.