TypeScript快速入门教程(二)、面向对象知识(接口、类、抽象类)

1,477 阅读2分钟

文章快速索引:

1、TypeScript快速入门教程(一)、基础类型和变量声明
2、TypeScript快速入门教程(二)、面向对象知识(接口、类、抽象类)
3、TypeScript快速入门教程(三)、函数、范型使用
4、TypeScript快速入门教程(四)、联合类型 & 交叉类型 & 类型保护

这次的知识点和Javac#语法非常相似,所以直接快速过。

接口

1-1、 接口定义

接口定义语法格式为interface 接口名称 {}

interface Girl {
    name: string;  //定义属性
    age: number;   //同上
    bust: number;  //同上
    waistline?: number;  //可空参数
    [propname: string]: any; //可选参数
    say(): string;  //方法定义
}

这里需要特别注意的有可空参数可选参数

  • 可空参数,实现的时候,可以不用实现,直接使用的话返回undefined ,比如这里的waistline,可以不用实现,编译并不会报错。
	let numOne = {name: "小红", age: 12, bust: 98, say(): string {
        return "欢饮光临!"
    }}
  • 可选参数,可自由设置属性,可直接使用,比如下面的代码,并没有定义hello字段,但是可以直接设置
	let numOne = {name: "小红", age: 12, bust: 98, say(): string {
        return "欢饮光临!"
    }, waistline: 65, hello: 22}

1-2、使用接口作为参数预定义,类似type使用

const screenResume = (girl: Girl) => {
    girl.age < 24 && girl.bust > 90 && console.log(`${girl.name}进入面试`)
    girl.age > 24 || girl.bust < 90 && console.log(`${girl.name}被淘汰`)
}

const getScreenResume = (girl: Girl) => {
    console.log(`${girl.name}的年龄: ${girl.age}, 胸围: ${girl.bust}
    , 腰围: ${girl.waistline ?? "暂无数据"}`, girl.hello)
}

进行参数预定的一个好处,就是可以对多个参数就行抽离使用,简化代码,并且可以起到约束参数作用。

1-3、结合类使用, implements

接口继承

interface ShanghaiGirl extends Girl {
    sayShangHai(): string;
}

类实现接口

class PuTuoGirl implements ShanghaiGirl{
    [propname: string]: any;

    age: number;
    bust: number;
    name: string;

    say(): string {
        return "";
    }

    sayShangHai(): string {
        return "";
    }
}

2-1、类正常定义

ts中类的定义格式为: class 类名 {}

class Lady {
	//定义参数
    content = 'Hi, 帅哥!';  
    //定义方法
    sayHello(){
        return this.content;
    }
    //定义静态参数
    static className: string;
    //定义静态方法
    static speak(){
    	console.log("static method")
    }
    //private参数
    private age: number;
    //set & get方法
    set age(value: number){
		this.age = value;
	}
	get age(): number{
		return this.age;
	}
    //只读参数
    private readonly typeName: string;
    //protected参数
    protected typeValue: string;
    //public参数
    public publicRtc: string;
}

2-2、类继承关系

class Person {
    public name: string;
    protected age: number;
    constructor(age: number) {
        this.age = age;
    }
    public sayHello(){
        console.log("sayHello");
    }
}

class Teacher extends Person{
    get bust(): number {
        return this._bust;
    }

    set bust(value: number) {
        this._bust = value;
    }

    private _bust: number;

    constructor(bust: number) {
        super(24);
        this._bust = bust;
    }
    sayHello() {
        super.sayHello();
        console.log("age: " + this.age, this.bust)
    }

    static className: string;

    static speak(){
        console.log("static method")
    }

    private readonly typeName: string;
}

2-3、类的构造方法

class Person {
    public name: string;
    protected age: number;

	// 定义构造参数
    constructor(age: number) {
        this.age = age;
    }

    public sayHello() {
        console.log("sayHello");
    }
}

定义构造方法之后,使用的话,需要传入构造参数的值

let p = new Person (86);

如果是继承之后,想要使用父类的构造方法,可以直接使用super.xxx

抽象类

ts中抽象类定义为abstract class 类名 {}

abstract class Fruits {
    //普通方法
    sayHello() {
        console.log("hello")
    }

    //抽象参数
    abstract params: string;

    //抽象方法
    abstract sayWorld(): void;
}

class Mango extends Fruits {
    params: string;

    sayWorld(): void {
    }
}

对于抽象方法抽象参数,继承之后必须要实现。