我有一个类型:

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


当前回答

我在使用Angular (11.x)时遇到了这个问题。在前一天,我移动了一段HTML/组件到一个单独的-较小的-组件。第二天,我的电脑关机了,我的项目无法构建。 结果是.html组件出了问题。如前所述,这是零安全。

以下(节选):

<div class="code mat-body-strong">{{machine. "productCode}} < / div >

:

<div class="code mat-body-strong">{{machine?。productCode}} < / div >

其他回答

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

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

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

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

如果您从外部知道表达式不是空或未定义的,则可以使用非空断言操作符!为了赶走这些类型:

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

在angular中,我使用:

// eslint-disable-next-line @typescript-eslint/ban-ts-ignore
// @ts-ignore
const sum = row
    .filter(p => p.priceInCents !== undefined)
    .reduce((sum, current) => sum + current.priceInCents, 0);

因为只是使用@ts-ignore, eslint会抱怨它禁用了编译错误,这就是为什么我添加了eslint-disable-next-line。

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

let subString?: string;

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