1. Non-null assertion operator (!)
When we cannot determine the type, we can use the postfix expression operator ！to determine whether the operation object is a non nullor non undefinedtype.
Specifically, for example, the expression: x!, the result will exclude null and undefined from the x value range.
(1). Ignore null and undefined when assigning values.
function test(name: string | undefined | null) {
// Type 'string | null | undefined' is not assignable to type 'string'.
// Type 'undefined' is not assignable to type 'string'.
const onlyStringName: string = name; // error
const ignoreUndefinedAndNullName: string = name!; // Ok
}
(2) Ignore null and undefined when calling functions
type CallBackString = () => string;
function test(call: CallBackString |null| undefined) {
// Object is possibly 'undefined'.
// Cannot invoke an object which is possibly 'undefined'.
const onlyStringName = call(); // Error
const ignoreUndefinedAndNullName = call!(); //OK
}
2. Optional chain operator (?.)
?.The operator function .is similar to the chain operator. The difference is that it will not cause an error when the reference is empty ( nullor undefined). If the given value does not exist, it will be returned directly undefined.
For example:
const obj = {
project: {
dir: {
file: "name",
},
},
};
const file = obj?.project?.dir?.file; // name
const test = obj?.other?.dir; // undefined
3. Null value merging operator (??) and logical OR operator (||)
When the left operand is nullor undefined, the right operand is returned, otherwise the left operand is returned.
The null coalescing operator differs from the logical OR || operator, which returns the right operand if the left operand is falsea value.
For example:
const file = null ?? 'dir'; // dir
const num = 0 ?? 20; // 0
const num1 = 0 || 20; // 20
4. Optional attribute operator (?:)
Use the interface keyword to declare an interface:
interface Student {
name: string;
age: number;
gender:number;
}
Define the interface at this time. If there are missing parameters, an error will be reported:
let student: Student = {
name: "name1"
age:12
}; //Error
At this time, use optional attributes and define them again:
interface Student {
name: string;
age: number;
gender?:number;
}
let student: Student = {
name: "name1"
age:12
}; //ok
5. Operator (&)
Multiple types can be superimposed and merged into one type through the & operator.
as follows:
type Pointx = {
x: number; };
type Ponity = {
y: number; };
type Point = Pointx & Ponity;
let point: Point = {
x: 1, y: 1 }
6. Operator (|)
In TypeScript, a union type indicates that the value can be one of multiple types. Union types are usually used together with null or undefined.
The operator (|) is often used to separate each type when declaring a union type.
const fun = (info:string | null | undefined) => {
}
7. Number separator (_)
Numbers can be grouped using underscores as separators.
const number1 = 1234_5678
// 等价
const number2 = 12345678;