Typescript advanced

This is my participation 8 The fourth of the yuegengwen challenge 22 God , Check out the activity details ：8 Yuegengwen challenge

Preface

“ The color of August is made of gold , Bright and precious ; The color of August is brewed by sunshine , Fragrant and brilliant .”

The days ahead , May you adjust yourself to your best , Work slowly , Slowly getting better Y(^o^)Y

Type the alias

Type aliases are used to give a type a new name , Commonly used for union types

type Name = string;
type NameResolver = () => string;
type NameOrResolver = Name | NameResolver;
function getName(n: NameOrResolver): Name {
    if (typeof n === 'string') {
        return n;
    } else {
        return n();
    }
}
 Copy code 

String literal type

String literal type is used to restrict that the value can only be one of several strings

type EventNames = 'click' | 'scroll';
function handleEvent(ele: Element, event: EventNames) {
    // todo
}

handleEvent(document.getElementById('hello'), 'scroll');  //  That's all right. 
handleEvent(document.getElementById('world'), 'dblclick'); //  Report errors ,event  Not for  'dblclick'

// index.ts(7,47): error TS2345: Argument of type '"dblclick"' is not assignable to parameter of type 'EventNames'.
 Copy code 

Type alias and string literal type are both used type Define

Tuples

Tuples （Tuple） Merging different types of objects

Define a pair of values as string and number tuples .= let tom: [string, number] = ['Tom', 25]; This definition limits the type of each element in the array , in other words tom[0] It has to be for string,tom[1] It has to be for number.

If you add a new out of bounds element to the array , The data type of the new element can be any type of the time ancestor

 tom.push('jarry');

 tom.push(true); 
// Argument of type 'true' is not assignable to parameter of type 'string | number'.
 Copy code 

enumeration

enumeration （Enum） Type is used for scenarios where the value is limited to a certain range , For example, a week can only have seven days , The color is limited to red, green and blue . Enumerations are usually used to define some keywords .

enum Days {Sun, Mon, Tue, Wed, Thu, Fri, Sat};
 Copy code 

Interface inherits interface

Interface （Interfaces） It can be used for 「 The shape of the object （Shape）」 Describe

Interfaces can be inherited between interfaces

interface Alarm {
    alert(): void;
}

interface LightableAlarm extends Alarm {
    lightOn(): void;
    lightOff(): void;
}

LightableAlarm  Inherited  Alarm, Besides having  alert  Out of the way , There are also two new methods  lightOn  and  lightOff
 Copy code 

Generic

Generic （Generics） It means defining functions 、 Interface or class , Do not specify specific types in advance , And when you use it, you specify a feature of type

function createArray<T>(length: number, value: T): Array<T> {
    let result: T[] = [];
    for (let i = 0; i < length; i++) {
        result[i] = value;
    }
    return result;
}

  You can specify its specific type as  string
createArray<string>(3, 'x'); // ['x', 'x', 'x']

  You can not specify it manually , And let the type inference work out automatically 
createArray(3, 'x'); // ['x', 'x', 'x']
 Copy code 

We added... After the function name <T>, among T Used to refer to any type of input , Input at the back value: T And the output Array<T> You can use

Conclusion

If this article helps you , Welcome to praise and concern ️.

If there are mistakes in the article , Hope to correct in the comment area .