'TypeScript optional properties not accepting undefined value
<MyCustomField
type={props.type}
MyCustomField's type
type definition:
type?: string;
props.type
's type definition:
type?: string;
For some reason, I get this error:
It feels like I accidentally turned on some setting. My 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"
]
}
Edit: In addition, it compiles fine:
It's just that VSCode Intellisense doesn't like it.
Edit 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;
}
This also gives me an error saying that clone[index].options is possibly undefined, even though the if statement should neglect that:
But still compiles fine.
Solution 1:[1]
For me, VSCode was using the newest beta version of Typescript, and not the version I had declared in the workspace.
This PR for their new beta version introduced some potential breaking changes, which is why you're seeing the errors you are. https://github.com/microsoft/TypeScript/pull/43947
It introduces a new strict mode, --strictOptionalProperties. If you have "strict": true
in your tsconfig, this new mode is enabled by default.
Someone made a suggestion here that will likely help make this more clear. https://github.com/microsoft/TypeScript/issues/44403
To sum it up, you are seeing an Intellisense issue in VSCode because VSCode is using a new version of Typescript that introduced breaking changes. If you change your VSCode Typescript version to match your workspace, you should be okay.
Solution 2:[2]
As mentioned in the comment:
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
Solution 3:[3]
I think this looks very similar: https://stackoverflow.com/a/64765671/12431728
Based on the linked answer, I think you have to specify undefined
as a possible type for the prop, so type?: string | undefined
for the prop type definition.
The other option they gave is disabling strict null checking in tsconfig.json by adding "strictNullChecks": false
to compilerOptions
.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
Solution | Source |
---|---|
Solution 1 | nrraphael |
Solution 2 | artur grzesiak |
Solution 3 | Matt U |