This article is published in “TypeScript Enables strict null Checking” by Penxia, a developer of the front end.

In TS, there are corresponding JS base types null and undefined.

In TypeScript, the basic JS data types undefined and NULL have their own types called undefined and NULL, respectively.

let u: undefined = undefined;
let n: null = null;
Copy the code

By default null and undefined are subtypes of all types. This means that you can assign null and undefined to variables of type number.

The following code, for example, is perfectly executable in TS.

let userName: string; UserName = ""; // OK userName = null; // OK userName = undefined; // OK let age: number; age = 18; // OK age = null; // OK age = undefined; // OK let isBoy: boolean; isBoy = true; // OK isBoy = false; // OK isBoy = null; // OK isBoy = undefined; // OKCopy the code

Null Pointers are one of the most common bugs in programming, but in TypeScript we can’t use specific types to indicate that certain variables can’t be null! Fortunately, TypeScript 2.0 solves this problem!

strictNullChecks

TypeScript 2.0 adds support for non-null types. There is a new strict null-checking mode, which provides strictNullChecks

To limit the checking of null values. StrictNullChecks can be started by adding the –strictNullChecks parameter on the command line. You can also enable the strictNullChecks compiler option in the tsconfig.json file of your project.

In TS, strictNullChecks defaults to false for versioning compatibility

{ "compilerOptions": { "strictNullChecks": true // ... }}Copy the code

Check strictNullChecks to enable strictNullChecks in TS official walkthroughs!

Note 1

In strict null-checking mode, null and undefined cannot be assigned to other types of variables.

StrictNullChecks =true

let userName: string; UserName = ""; // OK userName = null; // OK userName = undefined; // OKCopy the code

Note 2

Strict null-checking does not mean that variable types cannot be set to NULL and undefined

StrictNullChecks =true

let userName: null;
userName = null;  

let age: undefined;
age = undefined;  
Copy the code

How can a variable be null

In normal programming, we do not directly set a variable’s type to null or undefined, such as username, we usually set it to string.

What do we do if we want username to accept a null value?

1. Use union types

Union Types indicate that the value can be one of many Types.

For the following code, userName can accept a value of type NULL. The value of undefined cannot be accepted.

let userName: string | null; UserName = ""; // OK userName = null; // OK userName = undefined; // ErrorCopy the code

2. a?The default undefined

Associative types can be used in Object:

type User = {
  name: string ;
  age:number | undefined
};
Copy the code

Here we set the age type to number and undefined.

Both of the following uses are correct.

Let user1: User = {name: "", age: undefined}; Let user2: User = {name: "", age: 18};Copy the code

If we want the following effect, we do not need to assign age manually.

Let user2: User = {name: "user2 "};Copy the code

And that’s where we need to use **, right? ** makes the attribute optional so we can omit the definition of the age attribute entirely.

type User = { name: string ; age? :number };Copy the code

Note that in this case, undefined is automatically added to the union type. Therefore, all of the following assignments are correct:

Let user1: User = {name: "", age: undefined}; Let user2: User = {name: "", age: 18}; Let user3: User = {name: ""};Copy the code

The security check

Variables can be null for security check

If the variable’s type contains nullor undefined, accessing any attribute will generate a compile-time error:

function UserNameLength(userName: string | null) {
  return userName.length;
}
Copy the code

So before you can access the property, you must first determine whether the value of the variable is null!

function UserNameLength(userName: string | null) {
  if (userName === null) {
    return 0;
  }

  return userName.length;
}
Copy the code

Nullable function call

Callback functions are supported in JS, so function arguments can be function types,

function fn(callback? : () => void) { callback(); }Copy the code

If the parameter is an optional function type, TS adds undefined to the parameter.

So the function of our call when the function will report an error!

Similar to checking objects before accessing properties, we need to first check if the function has a non-null value:

function fn(callback?: () => void) {
  if (callback) {
    callback();
  }
}
Copy the code

Click to follow, the first time to learn about Huawei cloud fresh technology ~