我有一个类型:

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编译器检查的情况下如何处理这种情况?


当前回答

尝试像这样调用object:

(<any>Object).dosomething

出现此错误是因为您使用?将它们声明为可选。Typescript会做严格的检查,它不允许做任何未定义的事情。因此,您可以在这里使用(<any> youobject)。

其他回答

如果你知道该类型永远不会为null或未定义,你应该声明为foo: Bar,不带?类型声明?条形语法意味着它可能是未定义的,这是您需要检查的。

换句话说,编译器正在做你要求它做的事情。如果您希望它是可选的,您稍后需要检查。

很惊讶没有人回答这个问题,你所要做的就是在访问它之前检查对象是否存在,这很直接。否则,请确保在访问对象之前初始化了您的值。

if($protected.listEle.classList) {
   $protected.listEle.classList.add('visible');
}

在typescript中,您可以执行以下操作来抑制错误:

let subString?: string;

subString > !—注意在null前增加了感叹号。

这是相当啰嗦的,我不喜欢它,但它是唯一对我有用的东西:

if (inputFile && inputFile.current) {
        ((inputFile.current as never) as HTMLInputElement).click()
}

only

if (inputFile && inputFile.current) {
        inputFile.current.click() // also with ! or ? didn't work
}

对我没用。Typesript版本:3.9.7,带有eslint和推荐规则。

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

// @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);