Typescript basic operations

Interface

TS Interface, as I understand it, is a specification in object-oriented programming , After defining the interface, don't worry about the internal state data of the function , It only stipulates that certain methods must be provided in this batch of classes , Meet the specified development needs like this .

Property type interface

interface Iperson{
    
    //? Represents an optional parameter 
    firstname?:string;
    lastname:string
}
function showFullName(person:Iperson){
    
    return person.firstname+person.lastname
}
let person = {
    
    firstname:'ren',
    lastname:'jialei',
    age:8
}
console.log(showFullName(person))
console.log(showFullName({
    lastname:'jialei'}))

Function type interface

interface encrypt{
    
    (key:string,value:string):string
}
var md5:encrypt = function(key:string,keyvalue:string):string{
    
   return key+keyvalue
}
console.log(md5('ren','jialei'));

Class type interface Constraints on classes , Similar to abstract classes

interface Animail{
    
   name:string;
   eat(foot:string):void
}
// Class type interfaces can also implement inheritance 
interface Person extends Animail{
    
    work():void
}
//Dog This class should implement Animail Interface 
class Dog implements Animail{
    
    name:string
    constructor(name:string){
    
        this.name=name
    }
    eat(){
    
        console.log(this.name+' Eating rats ')
    }
}
//LEIGE This class should implement Person This interface 
class LEIGE implements Person{
    
    name:string = 'renjialei'
    work(){
    
        console.log(this.name+' Like to write code ')
    }
    eat(){
    
        console.log(this.name+' I like to eat fruit ')
    }
}
let dog = new Dog(' kitten ');
let leige = new LEIGE();
dog.eat();
leige.eat();
leige.work();

Decorator

Decorators are one way , It can be injected into classes , Method , Expand their functions on attribute parameters

Class decorator

Class decorators apply constructors , That is, the parameters we get target Is the constructor of the class .

function logclass(params:string){
    
     return function(target:any){
    
        // It is equivalent to defining methods on the prototype of a class 
         target.prototype.eat=()=>{
    
                 console.log(' Brother Lei likes eating watermelon ');
         }
     }
 class HttpClient{
    
    @logUrl('xxxxxx')
    url='www.baidu.com'
    constructor(){
    
    }
    @logMethod('www.baidu.com')
    getItem(){
    
    }
    setItem(@logArg('xxx') uuid:any){
            
    }
}
var http:any = new HttpClient();

Attribute decorator

Property decorator expressions are called at run time as functions , Respectively pass in the following 2 Parameters ：
The first parameter is the constructor of the class for static members , For instance members are prototype objects of a class .
The second parameter is the name of the member .

function logUrl(params:string){
    
       return function(target:any,attr:any){
    
              target[attr]=params;
              console.log(target,attr);
       }
}

Method decorator

The function takes three arguments , Namely ：
The first parameter is the constructor of the class for static members , For instance members are prototype objects of a class .
Member's name
The property descriptor of the member

function logMethod(params:string){
    
    return function(target:any,attr:any,desc:any){
    
            target.run = ()=>{
    
                // console.log('i am running');
            }
    }
}

Method parameter decorator

Receive three parameters
The first parameter is the constructor of the class for static members , For instance members are prototype objects of a class .
Parameter name
The index of the parameter in the function parameter list

function logArg(params:string){
    
    return function(target:any,attr:any,index:number){
    
           console.log(target)
           console.log(attr)
           console.log(index)
    }
}