My linter seems to have stopped flagging possibly undefined properties passed into my React components. For example:
interface BooleanTypeObject {
prop1: true
}
interface MyComponentProps {
disabledObject?: BooleanTypeObject | undefined;
}
export function MyComponent({
disabledObject
}: MyComponentProps): ReactElement {
...
}
If I try to access prop1 within my component, I get no linter errors. But I do when the code is compiled if the disabledObject is undefined. I'm sure it used to work fine when I used the ? operator, or specified with | undefined.
I would have expected to see (parameter) disabledObject: BooleanTeeTypeObj | undefined here instead.
All of my other linting seems to be working for typescript still. Can anyone think what's happening?
tsconfig.json
{
"compilerOptions": {
"target": "ES2018",
"module": "commonjs",
"checkJs": false,
"jsx": "react",
"sourceMap": true,
"strict": false,
"noImplicitAny": false,
"noUnusedLocals": false,
"noUnusedParameters": false,
"allowSyntheticDefaultImports": true,
"esModuleInterop": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true
}
This is because you have strictNullChecks: false. When it is set to false typescript ignores null and undefined entirely and BooleanTypeObject | undefined is equivalent to BooleanTypeObject.
If you want typescript to shown an error, you need to set it to strictNullChecks: true
https://www.typescriptlang.org/tsconfig#strictNullChecks