如何解决 React 应用程序上的打字稿错误答案

【问题标题】：how to resolve typescript error on React app如何解决 React 应用程序上的打字稿错误
【发布时间】：2020-05-12 14:37:26
【问题描述】：

我似乎无法修复我在 react 应用上遇到的一些打字错误。

代码：

const [fetchJobTitlesCall, { data }] = useLazyQuery<Jobtitles, JobtitlesVariables>(JobTitlesQuery)
useEffect(() => {
    fetchJobTitlesCall({ variables: { keyword: 'Dev' } })
}, [fetchJobTitlesCall, data])

return (
            <Autocomplete
              onChange={(event, value) => dispatchJobTitlesFilter(value)}
              multiple
              id="tags-outlined"
              options={data?.jobTitles} // this line throwing error
              getOptionLabel={option => option.name + ` (${option.totalApplicants})`} // this line throwing error
              filterSelectedOptions
              renderInput={params => (
                <TextField
                  {...params}
                  onChange={event => fetchJobTitles(event.target.value)}
                  variant="outlined"
                  label="Search Job Title"
                  placeholder="Search Job Title"
                />
              )}
            />
)

错误：

键入“职位名称_职位名称 | undefined' 不可分配给类型 '未知[]'。类型 'undefined' 不能分配给类型 'unknown[]'。

知道如何解决这个问题吗？

【问题讨论】：

I 事物应用程序无法获取 jobTItle 或 jobTitle 不是数组类型

标签： reactjs typescript

【解决方案1】：

没有看到Autocomplete 的类型定义很难准确判断，但看起来options 属性需要一个数组（类型未知）。例如：

type Options = unknown[];

这要求它始终是一个数组，甚至是一个空数组。以下代码将不起作用：

let options: Options;
const data = { jobTitles: undefined };
options = data.jobTitles; // same error

如果jobTitles 未知，您可以通过默认为空数组来解决此问题，例如：

options={data?.jobTitles || []}

不过，此行为可能未定义 - 您可能必须参考自动完成库本身才能了解如何正确处理此问题。

【讨论】：

【解决方案2】：

Autocomplete 组件上的 options 属性期望 prop 的类型为 unknown[]。您需要处理data?.jobTitles 为undefined 的情况。如果值未定义，您应该可以将其默认为空数组。

options={data?.jobTitles || []}

【讨论】：

谢谢你这也有效，尽管其他答案更容易解释！