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

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

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

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

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

要解决这个问题，你可以简单地使用感叹号，如果你确定对象在访问它的属性时不是空的:

list!.values

乍一看，有些人可能会把它与angular中的安全导航操作符混淆，但事实并非如此!

list?.values

!后修复表达式将告诉TS编译器变量不是空，如果不是这样，它将在运行时崩溃

useRef

像这样使用useRef钩子

const value = inputRef?.current?.value

尝试像这样调用object:

(<any>Object).dosomething

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

作为一个选项，您可以使用类型强制转换。如果你从typescript中得到这个错误，这意味着某些变量有类型或未定义:

let a: string[] | undefined;

let b: number = a.length; // [ts] Object is possibly 'undefined'
let c: number = (a as string[]).length; // ok

确保代码中确实存在a。