Make writing a habit together! This is the NTH day of my participation in the “Gold Digging Day New Plan · April More text Challenge”. Click here for more details.
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