Як придушити "помилку TS2533: Об'єкт, можливо," нульовий "або" невизначений "?

У мене є type:

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

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

  maxVisibleListItems?: number
}

Я оголошую глобальну змінну модуль:

var $protected : tSelectProtected = {};

Я присвоюю належне значення за function1()обсягом:

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

Пізніше за function2()обсягом я закликаю:

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

Я отримую помилку TypeScript:

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

Я знаю, що я можу зробити явну перевірку за допомогою, if ($protected.listEle) {$protected.listEle}щоб заспокоїти компілятор, але це здається дуже непристойним для більшості нетривіальних випадків.

Як цю ситуацію можна чи потрібно вирішити, не вимикаючи перевірки компілятора TS?

Ця функція називається "сувора перевірка нуля", щоб її вимкнути, переконайтеся, що --strictNullChecksпрапор компілятора не встановлений.

Тим НЕ менше, існування nullвже було описано , як мільярд доларів Mistake , так що приємно бачити такі мови, як машинопис введення скрутною. Настійно рекомендую тримати його увімкнено.

Один із способів виправити це - забезпечити, щоб значення ніколи не були, nullабо undefined, наприклад, ініціалізуючи їх на передній панелі:

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

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

Дивіться відповідь Райана Кавано на альтернативний варіант!

Якщо ви знаєте із зовнішніх засобів, що вираз не є, nullабо undefinedви можете скористатися оператором твердження, що не застосовується до нуля, !щоб примусити видалити ці типи:

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

Я використав:

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

Крім того, ви можете використовувати тип примусу:

const objectX = object as string

Хоча, перш ніж вибрати одне з перерахованих вище способів, будь ласка, врахуйте архітектуру, до якої ви прагнете, і це вплине на загальну картину.

Це не пряма відповідь на питання ОП, але в моєму випадку у мене було таке налаштування -

Машинопис - v3.6.2
tslint -v5.20.0

І за допомогою наступного коду

const refToElement = useRef(null);

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

Я продовжив, придушивши компілятор для цього рядка. Зауважте, що оскільки це помилка компілятора, а не помилка лінійки, // tslint:disable-next-lineне працювало. Крім того, згідно з документацією, це слід використовувати рідко, лише при необхідності -

const refToElement = useRef(null);

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

ОНОВЛЕННЯ :

З Typescript 3.7 ви можете використовувати необов'язкові ланцюжки , щоб вирішити вказану вище проблему як -

refToElement?.current?.focus();

Це рішення працювало для мене:

• перейдіть до tsconfig.json та додайте "строгийNullChecks": false

Якщо ви знаєте, що тип ніколи не буде nullабо undefined, вам слід оголосити його як foo: Barбез ?. Оголошення типу за допомогою ? Barсинтаксису означає, що він потенційно може бути невизначений, що потрібно перевірити.

Іншими словами, компілятор робить саме те, про що ви просите. Якщо ви хочете, щоб це було необов’язково, вам потрібно буде перевірити пізніше.

Це не проблема ОП, але я отримав те саме Object is possibly 'null'повідомлення, коли випадково оголосив параметр, як нульовий тип:

something: null;

замість того, щоб присвоїти йому значення null:

something: string = null;

Як варіант, ви можете використовувати типовий кастинг. Якщо у вас є помилка у typecript, це означає, що деяка змінна має тип або не визначена:

let a: string[] | undefined;

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

Будьте впевнені, що вони aдійсно існують у вашому коді.

Що стосується TypeScript 3.7 ( https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-7.html ), тепер ви можете використовувати ?.оператор, щоб отримати невизначений під час доступу до атрибута (або виклику методу ) на нульовому або невизначеному об'єкті:

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

Порада для RxJS

У мене часто є тип змінних членів Observable<string>, і я не буду його ініціалізувати поки ngOnInit(використовуючи Angular). Потім компілятор припускає, що це неініціалізовано, оскільки це не «визначено конфігуратором» - і компілятор ніколи не зрозуміє ngOnInit.

Ви можете використовувати !оператор твердження для визначення, щоб уникнути помилки:

favoriteColor!: Observable<string>;

Неініціалізований спостережуваний може викликати всі види болю під час виконання з помилками типу "Ви повинні надати потік, але ви вказали нуль". !Прекрасно , якщо ви точно знаєте , що це збирається бути встановлений в чому - то начебто ngOnInit, але можуть бути випадки , коли значення встановлено в деяких інших менш детермінованою чином.

Тому альтернативою, яку я іноді використовую, є:

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

Де uninitializedвизначається десь у всьому світі як:

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

Тоді якщо ви коли-небудь будете використовувати цей потік без його визначення, він негайно видасть помилку виконання.

У ReactJS я перевіряю в конструкторі, чи змінні є нульовими, якщо вони є, я трактую це як виняток і керую виняток належним чином. Якщо змінні не є нульовими, код продовжує діяти, і компілятор після цього моменту більше не скаржиться:

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
    }

Я наткнувся на це з React під час встановлення стану та використання map.

У цьому випадку я робив виклик API API, і значення відповіді було невідомо, але повинно мати значення "Відповісти". Я використовував для цього власний тип, але оскільки значення може бути null, я все одно отримав помилку TS. Дозволити тип nullне виправляє; Ви також можете використовувати default parameter value, але це було безладно для мого випадку.

Я подолав це, надавши значення за замовчуванням у випадку, якщо відповідь була порожньою, просто використовуючи потрійний оператор:

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

У машинописі ви можете зробити наступне, щоб придушити error:

let subString?: string;

subString > !null; - Зверніть увагу на доданий знак оклику перед нулем.

Спробуйте назвати такий об'єкт:

(<any>Object).dosomething

Ця помилка сталася через те, що ви оголосили їх як необов’язкове використання ?. Тепер Typescript суворо перевіряє, і це не дозволить робити щось, що може бути undefined. Тому тут можна скористатися (<any>yourObject).