如何抑制“错误TS2533：对象可能为'null'或'undefined'”？

我有一个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已经被描述为十亿美元的错误，所以这是令人兴奋地看到语言如打字稿引入一个修复。我强烈建议您保持打开状态。

解决此问题的一种方法是确保值从不为null或undefined（例如，通过预先初始化）：

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

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

不过，请参阅Ryan Cavanaugh的答案以寻求替代选择！

如果您从外部方法中知道某个表达式不是nullor undefined，则可以使用非null断言运算符!强制转换这些类型：

// 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

尽管在选择上述解决方法之一之前，请先考虑您要使用的体系结构，它会影响整体。

不是直接回答OP的问题，但就我而言，我有以下设置-

打字稿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)
}

我继续禁止该行的编译器。请注意，由于这是编译器错误，而不是linter错误，// tslint:disable-next-line因此无法正常工作。此外，根据文档，应仅在必要时很少使用它 -

const refToElement = useRef(null);

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

更新：

使用Typescript 3.7，您可以使用可选的chaining来解决上述问题，方法是-

refToElement?.current?.focus();

此解决方案为我工作：

• 转到tsconfig.json并添加“ strictNullChecks”：false

如果您知道类型永远不会是null或undefined，则应将其声明为foo: Bar不带?。使用? Bar语法声明类型意味着可能未定义它，这是您需要检查的事情。

换句话说，编译器完全按照您的要求进行操作。如果希望它是可选的，则稍后需要进行检查。

这不是OP的问题，但是Object is possibly 'null'偶然地将参数声明为null类型时，我得到了相同的消息：

something: null;

而不是为其分配null值：

something: string = null;

作为一种选择，您可以使用类型转换。如果您从打字稿中收到此错误，则意味着某些变量具有类型或未定义：

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>;

未初始化的observable会引起各种运行时痛苦，并出现诸如“您必须提供流但提供null”之类的错误。该!是好的，如果你肯定知道它会在什么样要设置ngOnInit，但可能存在该值在其他一些不太确定的方式设置的情况。

因此，我有时会使用的替代方法是：

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

在何处uninitialized全局定义为：

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

然后，如果您在未定义此流的情况下使用此流，它将立即引发运行时错误。

在ReactJS中，我检查构造函数中的变量是否为null，是否将它们视为异常，并适当地管理该异常。如果变量不为空，则代码继续进行，并且编译器在此之后不再发出任何抱怨：

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提取调用，并且响应的值未知，但应具有“ Answer”值。我为此使用了自定义类型，但是由于该值可能是null，所以无论如何我都会遇到TS错误。允许输入类型null并不能解决问题；或者，您可以使用default parameter value，但这对我来说很麻烦。

我通过使用三元运算符在响应为空的情况下提供默认值来克服它：

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

在打字稿中，您可以执行以下操作来消除error：

let subString?: string;

subString > !null; -注意在null之前添加的感叹号。

尝试这样调用对象：

(<any>Object).dosomething

发生此错误是因为您已使用声明了它们为可选?。现在Typescript进行严格检查，不允许做任何可能的事情undefined。因此，您可以(<any>yourObject)在这里使用。