Type Assertion is a manually specified value Type. Let’s see what we can do

Introduction to syntax

Forms a

< type > valueCopy the code

Style 2

valueastypeCopy the code

This is recommended because it is only recognized in TSX syntax. React JSX TSX react JSX TSX TSX react JSX

Take the union type example from the previous chapter as a textbook

// unionGetLength.ts
const unionGetLength = (something: string | number) :number= > {
    return something.length;
}

/ / 0.0.4 unionGetLength. Ts: 2:22 - error TS2339: Property 'length' does not exist on the type 'string | number'.
    // Property 'length' does not exist on type 'number'.
    // 2 return something.length;
Copy the code

If I have the length attribute, I will return something. Length. If I have no length attribute, I will return something.

// unionGetLength2.ts
const unionGetLength2 = (something: string | number) :number= > {
    if(something.length){
        return something.length;
    } else {
        returnsomething.toString().length; }}/ / 0.0.4 unionGetLength2. Ts: moreover - error TS2339: Property 'length' does not exist on the type 'string | number'.
    // Property 'length' does not exist on type 'number'.
    // 3 return something.length;
Copy the code

Uniongetlength2.ts is the same problem as unionGetLength.ts. Here, however, we go one step further (that is, adding type assertions), as in

// assertionGetLength.ts
const assertionGetLength = (something: string | number) :number= > {
    if((something as string).length){
        return (something as string).length;
    } else {
        returnsomething.toString().length; }}/ / or
const assertionGetLengthOther = (something: string | number) :number= > {
    if((<string>something).length){
        return (<string>something).length;
    } else {
        returnsomething.toString().length; }}Copy the code

The compiled

// assertionGetLength.js
var assertionGetLength = function (something) {
    if (something.length) {
        return something.length;
    }
    else {
        returnsomething.toString().length; }};/ / or
var assertionGetLengthOther = function (something) {
    if (something.length) {
        return something.length;
    }
    else {
        returnsomething.toString().length; }};Copy the code

Summary: The use of a Type assertion is to change the variable xx of the assertion to (xx as Type) or (

xx).

Divergent thinking

Last joint type case, defined as string | number, if the type assertion is not what happens in between?

// assertionGetLength2.ts
const assertionGetLength2 = (something: string | number) :boolean= > {
    return (something as boolean);
}

const assertionGetLength21 = (something: string | boolean) :string= > {
    return (something as string);
}

const assertionGetLength22 = (something: string | boolean) :boolean= > {
    return (something as boolean);
}

const assertionGetLength23 = (something: string | boolean) :number= > {
    return (something as number);
}

/ / 0.0.4 assertionGetLength2. Ts: so - error TS2352: Conversion of type 'string | number' to type 'boolean' may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, convert the expression to 'unknown' first.
    // Type 'number' is not comparable to type 'boolean'.
    // 2 return (something as boolean);

/ / 0.0.4 assertionGetLength2. Ts: 14:13 - error TS2352: Conversion of type 'string | boolean' to type 'number' may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, convert the expression to 'unknown' first.
    // Type 'true' is not comparable to type 'number'.

    // 14 return (something as number);
Copy the code

As you can see, type assertions must combine one of the types. Type assertions do type selection, not casting.

This code Github

You can…

Typescript associative types

Next: Typescript object types – interfaces

Contents: A primer to Typescript’s short book