CODEWITHSUNDEEP
javascriptreactjstypescript
JimmyTheCode
JimmyTheCode

Reputation: 5694

React typescript props not showing as possibly defined, even when I use '?' optional operator and '| undefined'

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.

screenshot

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
    }

Upvotes: 0

Views: 942

Answers (1)

Алексей Мартинкевич
Алексей Мартинкевич

Reputation: 2070

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

Upvotes: 1

Related Questions