[JavaScript知识库]typescript 的认识2

// 6.静态属性 静态方法
// 6.1es5里面的静态方法
function Person(){
    this.run1 = function(){ //实例方法

    }
}
Person.run2 = function(){   //静态方法
	Person.name = "哈哈哈哈"
}
//调用
var p = new Person();
p.run1();
Person.run2();
Person.name;


// jquery里面的玩法：
function $(element){
    return new Base(element);
}
$.get = function(){

}

function Base(element){
    this.element = 获取当前节点;

    this.css = function(arr, value){
        this.element.style.arr = value
    }
}
//使用
$('#box').css('color', 'red')
$.get('url', function(){

})


// 6.2 ts里面的静态方法
class Person{
    public name:string;
    public age:number = 20;
    //静态属性
    static age1:number = 20;

    constructor(name:string){
        this.name = name;
    }
    // 成员方法
    run(){
        alert(`${this.name}在运动`);
    }
    work(){
        alert(`${this.name}在工作`)
    }

    // 静态方法
    static print() {
        alert('print方法')
        // alert('print方法' + this.age)    //报错，静态方法里面无法调用类里面的属性， 如果想要调用，需要将属性改为静态属性

    }
}
var p = new Person('张三');
p.run();    //调用成员方法
Person.print(); //调用静态方法
Person.age1;    //调用静态属性



// 7.多态： 父类定义一个方法不去实现，让继承他的子类去实现，每一个子类都有不同的表现
// 7.1多态也是属于继承
class Animal{
    name:string;
    constructor(name:string){
        this.name = name;;
    }

    eat(){
        console.log('吃的方法');
    }
}

class Dog extends Animal{
    constructor(name:string){
        super(name)
    }

    eat(){
        return this.name + '吃肉';
    }
}

class Cat extends Animal{
    constructor(name:string){
        super(name)
    }

    eat(){
        return this.name + '吃鱼';
    }
}


// 8.抽象方法 抽象类
// 抽象类和抽象方法用来定义标准，不可以被实例化，子类必须包含eat()方法
abstract class Animal1{
    public name:string;
    constructor(name:string){
        this.name = name;
    }

    // 必须实现， 抽象方法不包含具体实现并且必须在派生类中实现
    abstract eat():any;

    //不一定要实现
    run(){
        console.log('其他方法可以不实现');
    }

}
// var a = new Animal1();  //报错

class Dog1 extends Animal1{
    constructor(name:any){
        super(name)
    }
    eat(){
        console.log(this.name + "吃肉");
    }
}
var d = new Dog('小花花');
d.eat();



// 9.属性接口   对json的约束
// ts中定义方法
function printLabel():void{
    console.log('pringLavel');
}
printLabel();

// ts中定义方法传入参数
function printLabel1(label:string):void{
    console.log('pringLavel1');
}
printLabel1('哈哈'); //这是约束

// ts中自定义方法传入参数 json进行约束
function printLabel2(labelInfo:{label:string}):void{
    console.log('printLabel2');
    
}
// printLabel2('hhhhhhhhh')         //错误写法
// printLabel2({name: '张三'})      //错误写法
printLabel2({label: '哈哈哈'})      //正确写法

// 现在我们想对 批量方法传入参数进行约束
// 接口： 行为和动作的规范， 对批量方法进行约束\

// 就是传入对象的约束
interface FullName{
    firstName:string;   //注意：;结束
    secondName:string;  
}

function printName(name:FullName){
    //必须传入对象 firstName secondName
    console.log(name.firstName + '----------' + name.secondName);
}
//调用
// printName('1233')   //错误
printName({
    // age: 20,         //错误
    firstName: '漳卅',  //正确
    secondName: "风水地"
})
//上面age是报错的，如果我们是这样子写，就不会报错
var obj = {
    age:20,
    firstName: '张',
    secondName: '三'
}
printName(obj)          //正确写法

// 9.2 接口： 可选属性
interface FullName1{
    firstName:string;
    secondName?:string;     //？表示接口的可选属性
}

function getName(name:FullName1) {
    console.log(name);
}
getName({
    // 参数： 两者的顺序是没关系的
    secondName: '三',
    firstName:'张'
})
getName({
    firstName:'张'
})