Como suprimir o "erro TS2533: o objeto é possivelmente 'nulo' ou 'indefinido'"?

Eu tenho um type:

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

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

  maxVisibleListItems?: number
}

Declaro uma variável global em módulo:

var $protected : tSelectProtected = {};

Estou atribuindo valor adequado no function1()escopo:

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

Mais tarde no function2()escopo, estou chamando:

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

Estou recebendo erro do TypeScript:

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

Eu sei que posso fazer uma verificação explícita usando if ($protected.listEle) {$protected.listEle}para acalmar o compilador, mas isso parece ser pouco prático para a maioria dos casos não triviais.

Como essa situação pode ou deve ser tratada sem desativar as verificações do compilador TS?

Esse recurso é chamado de "verificações nulas rigorosas", para desativá-lo e garantir que o --strictNullCheckssinalizador do compilador não esteja definido.

No entanto, a existência de nulltem sido descrito como The Billion Dollar Mistake , por isso é emocionante ver línguas como o original datilografado introduzir uma correção. Eu recomendo fortemente mantê-lo ligado.

Uma maneira de corrigir isso é garantir que os valores nunca sejam nullou undefined, por exemplo, inicializando-os com antecedência:

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

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

Veja a resposta de Ryan Cavanaugh para uma opção alternativa!

Se, por meio externo, você souber que uma expressão não é nullou undefined, poderá usar o operador de asserção não nulo !para coagir esses tipos:

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

Eu usei:

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

Como alternativa, você pode usar coerção de tipo:

const objectX = object as string

Embora, antes de escolher uma das soluções alternativas acima, considere a arquitetura que você está almejando e o impacto para a imagem maior.

Não é uma resposta direta à pergunta do OP, mas no meu caso, eu tinha a seguinte configuração -

Texto v3.6.2
datilografado - tslint -v5.20.0

E usando o seguinte código

const refToElement = useRef(null);

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

Eu segui em frente suprimindo o compilador para essa linha. Observe que, como é um erro do compilador e não o erro do linter, // tslint:disable-next-linenão funcionou. Além disso, de acordo com a documentação, isso deve ser usado raramente, somente quando necessário -

const refToElement = useRef(null);

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

ATUALIZAÇÃO :

Com o Typecript 3.7, você pode usar o encadeamento opcional para resolver o problema acima como -

refToElement?.current?.focus();

Esta solução funcionou para mim:

• vá para tsconfig.json e adicione "strictNullChecks": false

Se você souber que o tipo nunca será nullou undefined, deverá declará-lo como foo: Barsem o ?. Declarar um tipo com a ? Barsintaxe significa que ele pode estar indefinido, o que é algo que você precisa verificar.

Em outras palavras, o compilador está fazendo exatamente o que você está pedindo. Se você quiser que seja opcional, precisará fazer a verificação mais tarde.

Este não é o problema do OP, mas recebi a mesma Object is possibly 'null'mensagem quando declarei um parâmetro como o tipo nulo por acidente:

something: null;

em vez de atribuir o valor nulo:

something: string = null;

Como opção, você pode usar uma conversão de tipo. Se você tiver esse erro do texto datilografado, isso significa que alguma variável tem tipo ou é indefinida:

let a: string[] | undefined;

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

Verifique se arealmente existe no seu código.

A partir do TypeScript 3.7 ( https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-7.html ), agora você pode usar o ?.operador para ficar indefinido ao acessar um atributo (ou chamar um método ) em um objeto nulo ou indefinido:

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

Dica para RxJS

Muitas vezes terei variáveis ​​de membro do tipo Observable<string>e não a inicializarei até ngOnInit(usando Angular). O compilador então assume que ele não foi inicializado, pois não está 'definitivamente designado no construtor' - e o compilador nunca vai entender ngOnInit.

Você pode usar o !operador de asserção na definição para evitar o erro:

favoriteColor!: Observable<string>;

Um observável não inicializado pode causar todos os tipos de problemas de tempo de execução com erros como 'você deve fornecer um fluxo, mas você forneceu nulo'. Tudo !bem se você definitivamente sabe que será definido de alguma forma ngOnInit, mas pode haver casos em que o valor é definido de alguma outra maneira menos determinística.

Portanto, uma alternativa que usarei às vezes é:

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

Onde uninitializedé definido globalmente em algum lugar como:

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

Então, se você usar esse fluxo sem que seja definido, lançará imediatamente um erro de tempo de execução.

No ReactJS, verifico no construtor se as variáveis ​​são nulas, se tratam isso como uma exceção e gerencio a exceção adequadamente. Se as variáveis ​​não forem nulas, o código continua e o compilador não reclama mais depois desse ponto:

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
    }

Corri para isso com o React ao definir o estado e o uso map.

Nesse caso, eu estava fazendo uma chamada de busca da API e o valor da resposta não era conhecido, mas deveria ter o valor "Resposta". Usei um tipo personalizado para isso, mas como o valor poderia ser null, recebi um erro de TS de qualquer maneira. Permitir que o tipo seja nullnão o corrige; alternativamente, você pode usar um default parameter value, mas isso foi confuso para o meu caso.

Eu o superei fornecendo um valor padrão no caso de a resposta estar vazia usando apenas um operador ternário:

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

No texto datilografado, você pode fazer o seguinte para suprimir error:

let subString?: string;

subString > !null; - Observe o ponto de exclamação adicionado antes de nulo.

Tente chamar um objeto como este:

(<any>Object).dosomething

Este erro ocorreu porque você os declarou como opcional ?. Agora, o Typecript faz uma verificação rigorosa e não permite fazer nada que possa ser undefined. Portanto, você pode usar (<any>yourObject)aqui.