Typescript record (I)

1- return type

function add(first:number, second:number): number {
    return first + second
} 
const total = add(1,2)
 Copy code 

2-void type , The return value is null , I hope not return value

function say(): void {
    console.log("122")
}
 Copy code 

3-never type , It can never be carried out to the end

function error(): never {
    throw new Error()
    console.log("1111")
}
 Copy code 

4- Deconstruction syntax definition type

function add({first, second}: {first:number, second:number}): number {
    return first + second
}
add({first:1,second:2})
 Copy code 

5- The base type boolean,number,string,void,undfined,symbol,null

let count: number;
count = 100
 Copy code 

6- object type ,{},Class, function, []

const func = (str:string): number => {
    return parseInt(str, 10)
}
const func:(str: string) => number = (str) => {
    return parseInt(str, 10)
}

interface Person {
    name: string
}
const q = "{"name": "jack"}";
const b: Person = JSON.parse(q);
 Copy code 

7- Or type |

let temp: number | string = 124;
temp = "1212"
 Copy code 

8- Array

const arr: (number | string)[] = [1,'2',3]
const strArr: string[] = ['d','f','g']
const undefinedArr: undefined[] = [undefined]

const objectArr: {name: string, age: number}[] = [{
    name：'jack',
    age:  26
}]
 Copy code 

9- Type the alias type

type User = {name: string, age: number}
const objectArr: User[] = [{
    name：'jack',
    age:  26
}]
 Copy code 

10- Tuples

const info: [string, string, number] = ['jack', 'ben', 100]
 Copy code 

11-interface

interface Person {
    readonly tag: string     // readonly Indicates that the property is read-only , You can't overwrite it 
    name: string,
    age?: number    // ? Indicates that the attribute is optional 
    [propName: string]: any   //  I can also have extra   Other attributes , As long as the specifications are met 
    say(): string
}
const setName = (person: Person, name): void => {
    person.name = name;
}
setName({name: "jack"}, "duke")
const a = {
    name: "jack",
    say(){
        return "kao "
    } 
}

// [propName: string]: any
setName({ name: "jack",sex: "niu"}, "duke")

 It's better to pass parameters with variables than with literal parameters , Direct assignment with self surface quantity is passed to the participant for strong verification , If you use variables to pass values slowly, it won't be so strict 
 Copy code 

12- One class Class wants to apply a interface Interface

class User implements Person {
    name: "dragon",
    say() {
        return "gan"
    }
}
 Copy code 

13- Interfaces can inherit from each other

 In addition to Person Attribute outside , There has to be more Teacher In the properties of the , If you are ：Teacher

interface Teacher extends Person {
    teach(): string
}
 Copy code 

14- Define function interface types

interface SayHi {
    (word: string): string
}

const say: SayHi = (word: string) => {
    return word
}
 Copy code 

15- Class definition and inheritance super usage

super The method used to call the parent class 

class Person {
    name: 'jack',
    getName() {
        return this.name
    }
}

class Teacher extends Person {
    getTeach() {
        return "teach"
    }
    getName() {
        return super.getName() + 'duke!!!'
    }
}
 Copy code 

16- private, protected, public Access type

 The default is public type  , Allow to be called inside and outside the class 
private type ,  Allow to be used within a class 
protected type , It is allowed to use... Within a class and in inherited subclasses 

class Person {
    private name: string,
    // protected name: string,
    public sayHi() {
        this.name;
        console.log("name~~~")
    }
}

 class Teacher extends Person {
     public sayBye() {
         this.name
     }
 }

const person = new Person();
person.name = "ben";
console.log(person.name)
person.sayHi()
 Copy code 

17- constructor Instantiation

 When instantiating  constructor()  This method will be executed automatically in an instant , It can receive the transmitted parameters 

//  The traditional way of writing 
class Person {
    public name: string,
    constructor(name: string){
        this.name = name
    }
}
//  Simplify writing 
class Person {
    constructor(public name: string){ }
}
 
const person = new Person('jack')
 Copy code 

18- . If the parent class has constructor Constructors ( And it's worth it ), When subclasses also declare constructors , You must manually call the constructor of the parent class in the subclass

• super Refers to the parent class
• super() It refers to calling the constructor of the parent class

class Person {
    constructor(public name: string){ }
}
class Teacher extends Person {
    constructor(public age: number) {
        super('jack')
    }
}

const teacher = new Teacher(1000);
 Copy code 

19- . If the parent class does not write constructor Constructors ( No value ), You must manually call the constructor of the parent class in the subclass super() empty

class Person { }

class Teacher extends Person {
    constructor(public age: number) {
        super()
    }
}

const teacher = new Teacher(1000);
 Copy code 

20- Static attribute (getter obtain , setter assignment )

• private Represents a private property
• _ Add... Before attribute _ It also means private property

class Person {
    constructor(private _name: string){ }
    get name() {
        return this._name + " ben"
    }
    set name(name: string) {
        const realName = name.split(" ")[0]
        this._name = realName
    }
}
const person = new Person("duke")
person.set = 'duke ben'
 Copy code 

21- The singleton pattern ( That is, only one instance can be generated forever )

• static Just mount this method directly on the class , Instead of an instance of a class

class Demo {
    private static instance: Demo;
    private constructor(public name: string) {}     //  If you declare it private , You can't use new External call  
    static getInstance() {
        if(!this.instance){
            this.instance = new Demo("jack");
        }
        return this.instance;
    }
}

//  Logically speaking  demo1 and demo2 Are all the same instances 
const demo1 = Demo.getInstance();
const demo2 = Demo.getInstance();
 Copy code 

22- readonly You can only read but not change

class Person {
    public readonly name: string
    constructor(name: string){
        this.name = name
    }
}

const person = new Person("jack")
person.name = "dragon"  //  Report errors , Because it's set up readonly
 Copy code 

23- abstract class ( Pull out the common things , You can set abstract methods , Or actual methods and properties )

• If an abstract class has abstract methods ,extends Inheritance time , To achieve it, or there will be a red error

abstract class Geom {
    width: number;
    getType() {
        return "Geom"
    }
    abstract getArea(): number
}

class Circle extends Geom {
    getArea() {
        return 100
    }
}
 Copy code 

Conclusion

front end react QQ Group ：788023830 ---- React/Redux - Old underground hero

Front end communication QQ Group ：249620372 ---- FRONT-END-JS front end

（ Our purpose is , To work overtime , For baldness ……, Look up to the big guy ）, I hope my friends can study together