IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> 写给移动客户端开发者的TypeScript快速入门教程(二)、面向对象知识(接口、类、抽象类) -> 正文阅读

[JavaScript知识库]写给移动客户端开发者的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 {
    }
}

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

  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2021-09-01 11:49:53  更:2021-09-01 11:50:06 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/23 13:17:10-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码