TypeScript strictNullChecks on Type

TypeScript's strictNullChecks feature enforces type safety by treating null and undefined as distinct types. When enabled, it ensures variables cannot be assigned these values unless explicitly allowed, preventing runtime errors and enhancing code reliability and readability.

Enabling strictNullChecks

You can enable strictNullChecks in the tsconfig.json file of your TypeScript project. The tsconfig.json file is a JSON format file that allows you to specify the root-level files and various compiler options required to compile a TypeScript project. The presence of this file indicates that the directory is the root of a TypeScript project.

Example: tsconfig.json

{ 
"compileOnSave": true, 
"compilerOptions": { 
        "module": "system", 
        "noImplicitAny": true, 
        "removeComments": true, 
        "allowUnreachableCode": false, 
        "strictNullChecks": true, 
        "outFile": "../JS/TypeScript/HelloWorld.js", 
        "sourceMap": true
}, 
    "files": [ 
        "program.ts", 
        "sys.ts"
    ], 
    "include": [ 
        "src/**/*"
    ], 
    "exclude": [ 
        "node_modules", 
        "src/**/*.spec.ts"
    ] 
}

Impact of strictNullChecks

When strictNullChecks is false, null and undefined are effectively ignored by the language, which can lead to unexpected errors at runtime. When strictNullChecks is true, null and undefined have their own distinct types, and you'll get a type error if you try to use them where a concrete value is expected.

Example 1: Handling null Values

In this example, we will create a function and and pass a null value here. We need to test for this value for null before using methods or properties on that value

function processValue(value: string | null): void {
    if (value !== null) {
        console.log(value.toUpperCase());
    } else {
        console.log('Value is null');
    }
}


processValue('Hello');  // Output: HELLO
processValue(null);     // Output: Value is null

Output:

Hello
Value is null

Example 2: Handling undefined Values

In this example, we check for undefined before using a value, ensuring safety when strictNullChecks is enabled.

function greet(name?: string): void {
    if (name !== undefined) {
        console.log(`Hello, ${name}`);
    } else {
        console.log('Name is undefined');
    }
}

// Example usage
greet('Alice');  // Output: Hello, Alice
greet();         // Output: Name is undefined

Output:

Hello,Alice
Name is undefined

Conclusion

In this article, we explored the strictNullChecks feature in TypeScript and how to enable it in the tsconfig.json file. Enabling strictNullChecks increases code readability, decreases runtime issues, and helps in fixing type checking bugs. By treating null and undefined as distinct types, TypeScript ensures that your code handles these values explicitly, leading to more robust and error-free applications.