Typescript throws no error when calling nullable function

Question

I have the following code in my react app:

As you can see onCheck can be undefined . but typescript shows no error and I'm getting a runtime error.

I have to add this prop has no default value.

My tsconfig:

{
    "compileOnSave": false,
    "compilerOptions": {
        "sourceMap": true,
        "target": "es5",
        "module": "esnext",
        "declaration": false,
        "noImplicitAny": false,
        "experimentalDecorators": true,
        "noLib": false,
        "jsx": "react",
        "noEmitOnError": true,
        "moduleResolution": "node",
        "lib": [
            "DOM",
            "ES5",
            "ScriptHost",
            "ES2015",
            "ES2018.Promise"
        ],
        "allowSyntheticDefaultImports": true
    },
    "exclude": [
        "node_modules"
    ]
}

Answer 1

Under compilerOptions , add "strict": true in your tsconfig.json .

From the docs:

The strict flag enables a wide range of type checking behavior that results in stronger guarantees of program correctness. Turning this on is equivalent to enabling all of the strict mode family options, which are outlined below.

• alwaysStrict
• strictNullChecks
• strictBindCallApply
• strictFunctionTypes
• strictPropertyInitialization
• noImplicitAny
• noImplicitThis

If you only care about the nullable variables, then just use the "strictNullChecks" flag .

Answer 2

You don't have the according compiler option set in your tsconfig.json

Either add

"strictNullChecks": true

to just enable the null checks, or (recommended) add

"strict": true

to add a wide range of checks.

Be aware that using "strict": true may break your build when you upgrade the typescript version. Because new strict... flags will be switched on with that flag automatically.