04 Typescript中的类 类中的静态属性 静态方法 抽象类 多态

es5中的静态属性、静态方法

// es5中的静态属性，静态方法
function Person(){
    this.run=function(){
    }
}
Person.name='哈哈哈';// 静态属性
Person.run1=function(){// 静态方法
}

ts中定义静态属性和静态方法

class Person{
    name:string;
    constructor(name:string) {   
        this.name=name;     
    }
    run(){
        console.log(`${this.name}在跑步`);        
    }
    work(){
        console.log(`${this.name}在工作`);        
    }    
    static address:string='丽江';
    static print(){
        console.log('静态方法');   
        console.log(`${Person.address} 静态方法调用实例属性`);             
    }
}
let p=new Person('张三');
p.run();
p.work();
console.log(Person.address);// 使用静态属性
Person.print()// 调用静态方法

多态：父类定义一个方法不去实现，让继承他的子类去实现，每一个子类都有不同的表现形式

多态属于继承

class Animal {
    name: string;
    constructor(name: string) {
        this.name = name;
    }
    eat() {           
    }
}
class Dog extends Animal{// 继承Animal
    constructor(name:string) {
        super(name);        
    }
    eat(){
        console.log(`${this.name}吃粮食`);        
    }
}
class Cat extends Animal{
    constructor(name:string) {
        super(name);        
    }
    eat(){
        console.log(`${this.name}吃老鼠`);        
    }
}

抽象类

ts中抽象类：他是提供其他类继承的基类，不能直接实例化

用abstract关键字定义抽象类和抽象方法，抽象类中的抽象方法不包含具体实现并且必须在派生类中实现

abstract抽象方法只能放在抽象类里面

抽象类和抽象方法用于定义标准

abstract class Animal {
    name: string;
    constructor(name: string) {
        this.name = name;
    }
    abstract eat(): any;
}
class Dog extends Animal {
    constructor(name: string) {
        super(name);
    }
    // 抽象类的子类必须实现抽象类里面的抽象方法
    eat() {
        console.log(`${this.name}吃粮食`);
    }
}
let d=new Dog('小黑');
d.eat(); 

接口

接口的作用：在面向对象的编程中，接口是一种规范的定义，它定义了行为和动作的规范，在程序设计里面，接口起到一种限制和规范作用。

接口定义了某一批类所需要遵守的规范，接口不关心这些类的内部状态数据，也不关心这些类里方法的实现细节，他只规定这批类里必须提供某些方法，提供这些方法的类就可以满足实际需要。

ts中的接口类似于java，同时还增加了更灵活的接口类型，包括属性、函数、可索引和类等。

1.属性类型接口 ：对json的约束

interface FullName {
    firstName: string;
    secondName: string;
}
function printName(name: FullName) {
    // 必须传入对象 firstName secondName
    console.log(`${name.firstName}-${name.secondName}`);
}
//printName('hahah');// 错误调用
let obj = {
    firstName: '张',
    secondName: '三',
    age: 18
}
printName(obj);

接口可选属性加个？

 interface FullName{
    firstName:string;
    secondName?:string;
}
function getName(name:FullName){
    console.log(name);    
}
getName({
    firstName:'涨',
}) 

案例：定义Ajax请求数据接口ts封装ajax

/* $.ajax({
    type:"get",
    url:'test.json',
    data:{username:$('#username').val(),content:$('#content').val()},
    dataType:'json'
}) */

interface Config {
    type: string;
    url: string;
    data?: string;
    dataType: string;
}

function ajax(config: Config) {
    let xht = new XMLHttpRequest();
    xht.open(config.type, config.url, true);
    xht.send(config.data);
    xht.onreadystatechange = function () {
        if (xht.readyState == 4 && xht.status == 200) {
            console.log('成功');
            if (config.dataType == 'json') {
                JSON.parse(xht.responseText)
            } else {
                console.log(xht.responseText);
            }
        }
    }
}
//调用
ajax({
    type: 'get',
    url: 'http://xxx',
    dataType: 'json'
})

2.函数类型接口：对方法传入的参数以及返回值进行约束

可以进行批量约束

案例：函数类型型接口

interface encrypt {
    (key: string, value: string): string;
}
let md5: encrypt = function (k: string, v: string): string {
    // 模拟操作
    return k + v;
}
let str = md5('name', 'zhangsan');
console.log(str);
let sha1: encrypt = function (k: string, v: string): string {
    return k + '-' + v;
}
console.log(sha1('aaa','bbb'));

3.可索引接口：对数组、对象的约束(不常用)

 // ts中定义数组的方式
let a1:number[]=[1,2,3];
let a2:Array<string>=['zws','cctv'];
// 对数组约束的接口
interface UserArry{
    [index:number]:string
}
let b1:UserArry=['zws','cctv'];
// 对对象的约束
interface UserObj{
    [index:string]:string
}
let obj:UserObj={
    name:'张三',
    sex:'男'
} 

4.类类型接口：对类的约束，和抽象类抽象方法有点相似

interface Animal {
    name: string;
    eat(food: string): void;
}
class Dog implements Animal {
    name: string;
    constructor(n: string) {
        this.name = n;
    }
    eat(food: string){
        console.log(`${this.name}吃${food}`);
    }
}
let d=new Dog('小黑');
d.eat('骨头'); 

5.接口的扩展：接口可以继承接口

interface Animal {
    eat(): void;
}
interface Person extends Animal {
    work(): void;
}
class Programmer {
    name: string;
    constructor(name: string) {
        this.name = name;
    }
    coding(code: string) {
        console.log(`${this.name}写${code}`);

    }
}
// 继承Programmer类实现Person接口
class Web extends Programmer implements Person {
    constructor(name: string) {
        super(name);
    }
    work(): void {
        console.log(`${this.name}在工作！`);
    }
    eat(): void {
        console.log(`${this.name}喜欢吃馒头！`);
    }
}
let w = new Web('张万山');
w.work();
w.eat();
w.coding('ts代码');