我有一个类型:

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)。

其他回答

这个特性被称为“strict null checks”,关闭它时要确保没有设置编译器标志——strictNullChecks。

然而,null的存在被描述为“十亿美元的错误”,所以看到像TypeScript这样的语言引入修复是令人兴奋的。我强烈建议你把它开着。

解决这个问题的一种方法是确保值永远不是null或undefined,例如通过预先初始化它们:

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

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

不过,请参阅Ryan Cavanaugh的另一种选择的答案!

从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

RxJS的提示

我经常会有Observable<string>类型的成员变量,直到ngOnInit(使用Angular)我才会初始化它。然后编译器假设它是未初始化的,因为它没有“在构造函数中明确赋值”——并且编译器永远不会理解ngOnInit。

你可以使用!定义上的断言运算符,以避免错误:

favoriteColor!: Observable<string>;

未初始化的可观察对象会导致各种运行时错误,比如“你必须提供一个流,但你提供了null”。!如果你明确知道它将被设置在ngOnInit这样的东西中是可以的,但也可能有一些情况,值以其他不那么确定的方式设置。

所以我有时会使用的替代方法是:

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

其中uninitialized被全局定义为:

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

然后,如果您使用这个流而没有定义它,它将立即抛出一个运行时错误。

import React, { useRef, useState } from 'react'
...
const inputRef = useRef()
....
function chooseFile() {
  const { current } = inputRef
  (current || { click: () => {}}).click()
}
...
<input
   onChange={e => {
     setFile(e.target.files)
    }}
   id="select-file"
   type="file"
   ref={inputRef}
/>
<Button onClick={chooseFile} shadow icon="/upload.svg">
   Choose file
</Button>

使用next.js对我有效的唯一代码

注意:这可能不是一个推荐的操作-也许解决方案是实际解决错误。所有的检查都是有原因的,所以禁用它们并不总是正确的做法,但是……

与上面的一些问题的答案相似,但最后有一点不同。我在多次不同的检查中遇到了问题,帮助我的是在tsconfig.json中设置一个严格的属性为false。似乎是上述特定检查的一种更通用的变体。

  "compilerOptions": {
    "strict": false
  },