TypeScript 可选属性不接受未定义的值
TypeScript optional properties not accepting undefined value
<MyCustomField
type={props.type}
MyCustomField 的 type
类型定义:
type?: string;
props.type
的类型定义:
type?: string;
出于某种原因,我收到此错误:
感觉好像不小心打开了某个设置。我的 tsconfig:
{
"compilerOptions": {
"target": "es5",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": false,
"skipLibCheck": true,
"noImplicitAny": false,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx",
},
"include": [
"src"
]
}
编辑: 此外,它编译得很好:
只是VSCode智能感知不喜欢
编辑 2:
if (!clone[index].options) throw Error(`Data at index ${index}, ${optionIndex} doesn\'t have options`);
if (type === FieldDataTypeEnum.RadioButton) {
clone[index].options.forEach(o => o.checked = false);
} else {
clone[index].options[optionIndex].checked = true;
}
这也给我一个错误,指出 clone[index].options 可能未定义,即使 if 语句应该忽略:
但仍然可以编译。
我认为这看起来非常相似:
根据链接的答案,我认为您必须指定 undefined
作为道具的可能类型,因此 type?: string | undefined
用于道具类型定义。
他们提供的另一个选项是通过将 "strictNullChecks": false
添加到 compilerOptions
来禁用 tsconfig.json 中的严格空值检查。
如评论中所述:
It looks like your VSCode and your scripts use different typescript versions. You could select TS version in VSCode in the bottom right corner, while having a .TS file opened
对我来说,VSCode 使用的是 Typescript 的最新测试版,而不是我在工作区中声明的版本。
他们新测试版的这个 PR 引入了一些潜在的重大变化,这就是为什么你会看到你现在的错误。
https://github.com/microsoft/TypeScript/pull/43947
它引入了一种新的严格模式 --strictOptionalProperties。如果您的 tsconfig 中有 "strict": true
,则默认启用此新模式。
有人在这里提出了可能有助于使这一点更清楚的建议。
https://github.com/microsoft/TypeScript/issues/44403
总而言之,您在 VSCode 中看到了 Intellisense 问题,因为 VSCode 使用的是引入重大更改的新版本 Typescript。如果您更改 VSCode Typescript 版本以匹配您的工作区,您应该没问题。
<MyCustomField
type={props.type}
MyCustomField 的 type
类型定义:
type?: string;
props.type
的类型定义:
type?: string;
出于某种原因,我收到此错误:
感觉好像不小心打开了某个设置。我的 tsconfig:
{
"compilerOptions": {
"target": "es5",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": false,
"skipLibCheck": true,
"noImplicitAny": false,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx",
},
"include": [
"src"
]
}
编辑: 此外,它编译得很好:
只是VSCode智能感知不喜欢
编辑 2:
if (!clone[index].options) throw Error(`Data at index ${index}, ${optionIndex} doesn\'t have options`);
if (type === FieldDataTypeEnum.RadioButton) {
clone[index].options.forEach(o => o.checked = false);
} else {
clone[index].options[optionIndex].checked = true;
}
这也给我一个错误,指出 clone[index].options 可能未定义,即使 if 语句应该忽略:
但仍然可以编译。
我认为这看起来非常相似:
根据链接的答案,我认为您必须指定 undefined
作为道具的可能类型,因此 type?: string | undefined
用于道具类型定义。
他们提供的另一个选项是通过将 "strictNullChecks": false
添加到 compilerOptions
来禁用 tsconfig.json 中的严格空值检查。
如评论中所述:
It looks like your VSCode and your scripts use different typescript versions. You could select TS version in VSCode in the bottom right corner, while having a .TS file opened
对我来说,VSCode 使用的是 Typescript 的最新测试版,而不是我在工作区中声明的版本。
他们新测试版的这个 PR 引入了一些潜在的重大变化,这就是为什么你会看到你现在的错误。 https://github.com/microsoft/TypeScript/pull/43947
它引入了一种新的严格模式 --strictOptionalProperties。如果您的 tsconfig 中有 "strict": true
,则默认启用此新模式。
有人在这里提出了可能有助于使这一点更清楚的建议。 https://github.com/microsoft/TypeScript/issues/44403
总而言之,您在 VSCode 中看到了 Intellisense 问题,因为 VSCode 使用的是引入重大更改的新版本 Typescript。如果您更改 VSCode Typescript 版本以匹配您的工作区,您应该没问题。