TypeScript基本操作

接口

TS接口我的理解就是面向对象编程中的一种规范，定义接口后不用担心函数内部状态数据，它只规定这批类里面必须提供某些方法，满足规定的开发需要这样。

属性类型接口

interface Iperson{
    
    //?代表可选参数
    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'}))

函数类型接口

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

类类型接口 对类的约束，和抽象类比较相似

interface Animail{
    
   name:string;
   eat(foot:string):void
}
//类类型接口也可实现继承
interface Person extends Animail{
    
    work():void
}
//Dog这个类应该实现Animail接口
class Dog implements Animail{
    
    name:string
    constructor(name:string){
    
        this.name=name
    }
    eat(){
    
        console.log(this.name+'吃老鼠')
    }
}
//LEIGE这个类应该实现Person这个接口
class LEIGE implements Person{
    
    name:string = 'renjialei'
    work(){
    
        console.log(this.name+'喜欢写代码')
    }
    eat(){
    
        console.log(this.name+'喜欢吃水果')
    }
}
let dog = new Dog('小猫');
let leige = new LEIGE();
dog.eat();
leige.eat();
leige.work();

装饰器

装饰器就是一个方法，它可以注入到类,方法，属性参数上扩展他们的功能

类装饰器

类装饰器应用的是构造函数，也就是我们拿到的参数target就是类的构造函数。

function logclass(params:string){
    
     return function(target:any){
    
        //相当于在类的原型上定义方法
         target.prototype.eat=()=>{
    
                 console.log('磊哥喜欢吃西瓜');
         }
     }
 class HttpClient{
    
    @logUrl('xxxxxx')
    url='www.baidu.com'
    constructor(){
    
    }
    @logMethod('www.baidu.com')
    getItem(){
    
    }
    setItem(@logArg('xxx') uuid:any){
            
    }
}
var http:any = new HttpClient();

属性装饰器

属性装饰器表达式会在运行时当作函数被调用，分别传入下列2个参数：
第一个参数是对于静态成员来说是类的构造函数，对于实例成员是类的原型对象。
第二个参数是成员的名字。

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

方法装饰器

函数接收三个参数，分别是：
第一个参数是对于静态成员来说是类的构造函数，对于实例成员是类的原型对象。
成员的名字
成员的属性描述符

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

方法参数装饰器

接收三个参数
第一个参数是对于静态成员来说是类的构造函数，对于实例成员是类的原型对象。
参数的名字
参数在函数参数列表中的索引

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