“Hata TS2533: Nesne muhtemelen 'null' veya 'undefined'” nasıl bastırılır?

Bende type:

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

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

  maxVisibleListItems?: number
}

Global bir modül bilge değişkeni beyan ederim:

var $protected : tSelectProtected = {};

function1()Kapsamda uygun bir değer ataıyorum:

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

Daha sonra function2()kapsamda arıyorum:

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

TypeScript hatası alıyorum:

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

if ($protected.listEle) {$protected.listEle}Derleyiciyi sakinleştirmek için açık kontrol yapabileceğimi biliyorum, ancak bu önemsiz vakaların çoğu için çok kullanışlı görünmüyor.

TS derleyici kontrolleri devre dışı bırakılmadan bu durum nasıl ele alınmalı veya nasıl ele alınmalıdır?

--strictNullChecksDerleyici bayrağının ayarlanmadığından emin olmak için bu özelliğe "katı boş denetimler" denir .

Ancak, varlığı nullvardır tanımlanmıştır olarak Milyar Dolar Mistake , nedenle böyle typescript bir düzeltme tanıtan gibi dilleri görmek heyecan verici. Açık tutmanızı şiddetle tavsiye ederim.

Bunu düzeltmenin bir yolu, değerlerin hiçbir zaman olmamasını nullveya undefinedörneğin önyükleme yaparak olmasını sağlamaktır :

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

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

Yine de Ryan Cavanaugh'un alternatif bir seçenek için cevabına bakın!

Harici yollardan bir ifadenin olmadığını nullveya olmadığını belirtirseniz undefined, !bu türleri zorlamak için null olmayan onaylama işlecini kullanabilirsiniz:

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

Kullandım:

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

Alternatif olarak, zorlama türü kullanabilirsiniz:

const objectX = object as string

Bununla birlikte, yukarıdaki geçici çözümlerden birini seçmeden önce, lütfen hedeflediğiniz mimariyi ve daha büyük resmin etkisini göz önünde bulundurun.

OP'nin sorusuna doğrudan bir cevap değil, ama benim durumumda, aşağıdaki kurulumu yaptım -

Typescript - v3.6.2
tslint -v5.20.0

Ve aşağıdaki kodu kullanarak

const refToElement = useRef(null);

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

Bu satır için derleyiciyi bastırarak devam ettim. Linter hatası değil bir derleyici hatası olmadığından, // tslint:disable-next-lineişe yaramadığını unutmayın. Ayrıca, belgelere göre, bu sadece gerektiğinde nadiren kullanılmalıdır -

const refToElement = useRef(null);

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

GÜNCELLEME :

Typescript 3.7 ile, yukarıdaki sorunu çözmek için isteğe bağlı zincirleme kullanabilirsiniz -

refToElement?.current?.focus();

Bu çözüm benim için çalıştı:

• tsconfig.json adresine gidin ve "strictNullChecks" ifadesini ekleyin : false

Eğer tipin asla olmayacağını biliyorsanız nullya undefinedda foo: Barolmadan, ilan etmelisiniz ?. ? BarSözdizimi ile bir tür bildirilmesi, potansiyel olarak tanımlanamayacağı anlamına gelir, bu da kontrol etmeniz gereken bir şeydir.

Başka bir deyişle, derleyici tam olarak sorduğunuz şeyi yapıyor. İsteğe bağlı olmasını istiyorsanız, daha sonra kontrol etmeniz gerekir.

Bu OP sorunu değil, ama Object is possibly 'null'yanlışlıkla null türü olarak bir parametre bildirmişti aynı mesajı aldım :

something: null;

null değerini atamak yerine:

something: string = null;

Seçenek olarak, bir tür döküm kullanabilirsiniz. Herhangi bir değişkenin türü olduğu veya tanımsız olduğu anlamına gelen typescript'ten bu hatayla karşılaşırsanız:

let a: string[] | undefined;

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

aKodunuzda gerçekten var olduğundan emin olun .

TypeScript 3.7'den ( https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-7.html ), artık ?.bir özelliğe erişirken (veya bir yöntemi çağırırken) tanımsız almak için operatörü kullanabilirsiniz ) null veya undefined bir nesnede:

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

RxJS için tavsiye

Sık sık üye değişkenlerim olur Observable<string>ve ngOnInit(Açısal kullanarak) kadar başlatır olmaz . Derleyici daha sonra 'kesinlikle kurucuya atanmamış' olduğundan başlatılmamış olduğunu varsayar ve derleyici asla anlamayacaktır ngOnInit.

!Hatayı önlemek için tanımdaki onaylama işlecini kullanabilirsiniz :

favoriteColor!: Observable<string>;

Başlatılmamış bir gözlemlenebilir, 'bir akış sağlamalısınız ancak null sağladınız' gibi hatalarla her türlü çalışma zamanı ağrısına neden olabilir. !Eğer varsa gayet kesinlikle bu gibi bir şey ayarlanabilir olacak biliyorum ngOnInit, ama değer, başka daha az deterministik bir şekilde ayarlanır durumlar olabilir.

Yani bazen kullanacağım bir alternatif:

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

Nerede uninitializedbir yere global olarak tanımlanır:

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

Bu akışı tanımlanmadan kullanırsanız, hemen bir çalışma zamanı hatası atar.

ReactJS'de, yapıcıda değişkenlerin null olup olmadığını kontrol ederim, eğer bunlar bir istisna gibi davranır ve istisnayı uygun şekilde yönetirim. Değişkenler null değilse, kod devam eder ve derleyici bundan sonra şikayet etmez:

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
    }

Durum ayarlarken ve kullanırken bunu React ile çalıştırdım map.

Bu durumda bir API getirme çağrısı yapıyordum ve yanıtın değeri bilinmiyordu, ama bir "Cevap" değerine sahip olmalı . Bunun için özel bir tür kullandım, ancak değer olabileceğinden null, yine de bir TS hatası aldım. Türün olmasına izin verilmesi nullsorunu gidermez; alternatif olarak bir kullanabilirsiniz default parameter value, ama bu benim durumum için dağınık oldu.

Sadece üçlü bir işleç kullanarak yanıtın boş olması durumunda varsayılan bir değer sağlayarak üstesinden geldim:

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

Daktiloda bastırmak için aşağıdakileri yapabilirsiniz error:

let subString?: string;

subString > !null; - Boşluktan önce eklenen ünlem işaretini not edin.

Nesneyi şöyle çağırmayı deneyin:

(<any>Object).dosomething

Bu hata, bunları isteğe bağlı kullanarak bildirdiğiniz için geldi ?. Şimdi Typescript sıkı kontrol yapıyor ve olabilecek herhangi bir şey yapmaya izin vermiyor undefined. Bu nedenle, (<any>yourObject)burada kullanabilirsiniz .