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

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

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

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

不是OPs问题，但我通过添加一个空检查来解决这个问题

我改变了:

*ngIf="username.invalid &&  username.errors.required"

To

*ngIf="username.invalid && username.errors != null && username.errors.required"

更新:对象链接是一种访问可能为空或未定义引用的属性的方法

object?.objectProperty?.nextProperty

以前

if (object !== undefined) {
    // continue - error suppressed when used in this way.
}

以前

const objectX = object as string

不过，在选择上述解决方案之前，请考虑您的目标体系结构及其对大局的影响。

这不是OP的答案，但我看到很多人在评论中对如何避免这个错误感到困惑。这是通过编译器检查的一种简单方法

if (typeof(object) !== 'undefined') {
    // your code
}

注意: 这行不通

if (object !== undefined) {
        // your code
    }

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对我有效的唯一代码

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