'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

'TypeScript optional properties not accepting undefined value

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]