This is the 13th day of my participation in the November Gwen Challenge. Check out the event details: The last Gwen Challenge 2021

New extension type

TS as a superset of JS, in addition to supporting JS types, but also provides some additional extension types, such as tuples, enumeration, etc., the addition of these extension types enriches the TS data types, using these extension types, we can improve the code legibility, as well as robustness.

If that sounds cool, let’s take a look at the extension types for TS

Data – Special function return value

never

Add the never type to TypeScript: github.com/Microsoft/T…

In the link above, the author adds the never type to TypeScript. There are two specific scenarios:

  • As the return value type of a function that does not return
  • Never is a variable type that never changes under type protection

As the return value type of a function that does not return

In the following scenario, the return value of the function is never.

// A function that returns never must have a unreachable endpoint
function error(message: string) :never {
    throw new Error(message);
}

// Return value never as inferred from the type
function fail() {
    return error("Something failed");
}

// A function that returns never must have a unreachable endpoint
function infiniteLoop() :never {
    while (true) {}}Copy the code

Never is the type of variable that is never observed under type protection mechanism

In TS, null and undefined are valid values of any type, so they cannot be correctly detected if they are being used incorrectly. Therefore, TS introduces strictNullChecks. Due to strictNullChecks, null and undefined can be detected in this mode. So TS needs a new bottom type. So we introduce never.

“Never is a variable type that never changes under type protection.”

// Compiled with --strictNullChecks
function fn(x: number | string) {
  if (typeof x === 'number') {
    // x: number type
  } else if (typeof x === 'string') {
    // x: string
  } else {
    // x: never
    StrictNullChecks: the code will not be executed and x cannot be observed}}Copy the code

void

Void means there is no type. When a function returns no value, TS assumes that its return value is of type void. Such as:

function foo() :void {
    alert('foo');
}
Copy the code

When we declare a variable of type void, it can only be assigned null and undefined;

let unusable: void = undefined;
Copy the code

Difference between never and void

  • Void can be assigned to the type null and undefined. Never is a type that contains no value.
  • Functions that have a void return value type work fine. A function that returns a value of type never will not return properly, will not terminate, or will throw an exception.

String, number, Boolean literal

Next, we learn about literals, which include strings, numbers, and Boolean literals.

Let’s start with the error message we’ve seen before

let seven: number = 7;

seven = 'Seven'; // Error: can't assign type "Seven" to type "number"
// Why type "Seven"? Shouldn't this thing be a string? In fact, the "Seven" is a literal string type.
Copy the code

String literals

We typically define multiple string literals using union types.

type FavoriteNumber = 'One' | 'Two' | 'Seven';

let seven: FavoriteNumber = 'Seven';
Type "Six" cannot be assigned to type "FavoriteNumber".
// Also, when we use it, the code will tell us that we can only choose one of the three.
let seven: FavoriteNumber = 'Six';
Copy the code

Numeric literals, like string literals, can be constrained directly by numbers. Number must be one of 1,2, or 7. If it is not, an error will be reported.

type FavoriteNumber = 1 | 2 | 7;

let seven: FavoriteNumber = 7;
Copy the code

Both numeric literals and string literals can be intermixed using union types.

In this case, seven is either this string or this number.

type FavoriteNumber = 1 | 'Seven';

let seven: FavoriteNumber = 'Seven';
Copy the code

Boolean value literals

type FavoriteNumber = 1 | 'Seven' | true;

let seven: FavoriteNumber = false;
Copy the code

String literals vs union types

So let’s look at the definition of both

String literals

The string literal type is used to constrain the value to one of several strings.

type EventNames = 'click' | 'scroll' | 'mousemove';

function handleEvent(ele: Element, event: EventNames) {};

handleEvent(document.getElementById('hello'), 'scroll');  / / no problem

handleEvent(document.getElementById('world'), 'dbclick'); // Error: event cannot be 'dbclick'

// error TS2345: Argument of type '"dbclick"' is not assignable to parameter of type 'EventNames'.
Copy the code

The joint type

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

let myFavoriteNumber: string | number;
myFavoriteNumber = 'seven';
myFavoriteNumber = 7;

myFavoriteNumber = true;

// error TS2322: Type 'boolean' is not assignable to type 'string | number'.
Copy the code

The difference between the two

After understanding the definition of the two, we can see the difference between the two more intuitively.

  • A string literal restricts the place where the literal is used to accept only specific values
  • Union types are not qualified on values, only the types of qualified values need to be consistent