我有一个类型:

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进行显式检查。listEle}使编译器平静下来,但这似乎对于大多数非平凡的情况非常不方便。

在不禁用TS编译器检查的情况下如何处理这种情况?


当前回答

从TypeScript 3.7 (https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-7.html)开始,你现在可以使用?。当访问null或未定义对象上的属性(或调用方法)时获得未定义的操作符:

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

其他回答

如果需要,您可以通过添加注释来抑制(下面请注意)

// @ts-ignore:对象可能是空的。

不是对OP的问题的直接回答,但在我的React应用程序与 Typescript - 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)
}

我通过抑制这一行的编译器继续前进

const refToElement = useRef(null);

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

谨慎

注意,由于这是一个编译器错误而不是linter错误,// tslint:disable-next-line不起作用。此外,根据文档,这应该很少使用,只在必要时使用

更新

在Typescript 3.7之后,你可以使用可选的链接,来解决上面的问题

refToElement?.current?.focus();

此外,有时可能只是在使用useRef时将适当的类型传递给泛型参数的问题。 在输入元素的情况下-

const refToElement = useRef<HTMLInputElement>(null);

像这样绑定变量variabalName?它肯定会起作用的。

这个解决方案对我很有效:

转到tsconfig。. json并添加"strictNullChecks":false

在设置状态和使用map时,我用React遇到了这个问题。

在这种情况下,我正在做一个API获取调用和响应的值是不知道的,但应该有一个值“答案”。我为此使用了一个自定义类型,但因为该值可能为空,所以我得到了一个TS错误。允许类型为null并不能解决这个问题;或者,您也可以使用默认参数值,但这对我的情况来说很混乱。

我克服了它,通过提供一个默认值,在事件响应是空的,只需使用三元操作符:

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

在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
    }