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学习-类class -> 正文阅读

[JavaScript知识库]TypeScript学习-类class

TypeScript学习-类class

公共属性的修饰符:

  • public:公共,私有与受保护的修饰符,默认修饰符,外部和内部都能使用
  • private:私有的,只能内部类用,外部不能读写
  • protected:派生类(子类)可访问
  • readonly:外部只能读不能写
  • static:静态属性或静态方法

1、类的定义

  • 关键字: class
class 类名{
   属性(静态属性,动态属性)
   方法(静态方法,动态方法)
 }

class Person {

    name: string = 'zhangsan'
     // 定义实例属性 (只有实例化后才能调用)
    //  const per = new Person() 
    // console.log(per.name)

    static age: number = 18 
    // 定义类属性(静态属性),前加一个static关键字(直接通过类调用)
    // console.log(Person.name)

    readonly sex: string = '男'
    // readonly修饰属性表示不可以修改,只能读

    eat() {
        console.log('我在吃东西')
    }
    // 定义实例方法,(只有实例化后才能调用)
    //  const per = new Person() 
    // console.log(per.name)

   static sleep() {
        console.log('我在吃东西')
    }
   // 定义类静态方法,前加一个static关键字(直接通过类调用)
   // console.log(Person.sleep)
}

2、构造函数和this

  • 构造函数: 构造函数会在对象创建的时被调用
  • this:表示当前的实例,在方法中可以通过this来表示当前调用对象的方法
 class Dog {
    name: string
    age: number

    constructor(name: string, age: number) {
        this.name = name
        this.age = age
    }

    eat() {
        console.log('我在吃东西')
        console.log(this.name)
    }

    sleep() {
        console.log('我在吃东西')
    }
}
const dog1 = new Dog('小二哈', 5) 
const dog2 = new Dog('哈皮狗', 10) 

3、继承

  • 两个关键字:extends,super
  • extends:用来声明类的继承关系,表示是的关系
  • super:调用父类的构造函数或方法
  继承
  通过继承可以将多个类中共有的代码写在一个父类中,
  这样就只需要写一次即可让所有的子类都同时拥有父类中的属性和方法
  如果子类和父类名字相同,则会覆盖掉父类方法(方法重写)
  class 父类名{
    属性(静态属性,动态属性)
    方法(静态方法,动态方法)
  }
  class 子类名 extends 父类名{
    ...自己的单独拥有的属性和方法
 }
class Animal {
    name: string
    age: number

    constructor(name: string, age: number) {
        this.name = name
        this.age = age
    }

    eat() {
        console.log('我在吃东西')
        console.log(this.name)
    }

    sleep() {
        console.log('我会睡觉觉')
    }
}

// 定义一个狗类 
// 使Dog类继承Animal类
// 父类: Animal, 子类:Dog
class Dog extends Animal {
    sex: string
    constructor(name: string, age: number, sex: string) {
        super(name,age)
        this.sex = sex
    }
    run() {
        console.log('我在跑动')
    }
}

class Cat extends Animal {
    catch() {
        console.log('我在抓老鼠')
    }
}

const dog = new Dog('小狗', 5,'女') 
console.log(dog.run())

const cat = new Cat('猫咪', 10) 
console.log( cat.catch())

4、抽象

  • 关键字: abstract
  • 抽象类和普通类区别:不能用来创建对象,专门用来被继承的类
  • 可以定义抽象方法,子类必须对此抽象方法进行重写
  • 抽象方法:必须只能在抽象类中用
abstract class Animal {
    name: string
    age: number

    constructor(name: string, age: number) {
        this.name = name
        this.age = age
    }

    abstract eat():void
}

class Dog extends Animal {
    sex: string
    constructor(name: string, age: number, sex:string) {
        super(name,age)
        this.sex = sex
    }
    eat() {
        console.log('我喜欢吃骨头')
    }
}
class Cat extends Animal {
    eat() {
        console.log('我喜欢吃大鱼')
    }
}

5、接口

  • 两个关键字:interface 、implements
  • interface :用来声明类为接口
  • implements :类去实现接口
  • 接口: 用来定义一个类的结构,用来定义一个类中应该包含那些属性,同时接口也可以当成类型声明去使用,可以被多次使用,但一个类只能一个接口
  • 接口只是定义结构,不能有实际的值,方法都是抽象方法
// 接口: 关键字 interface 
 interface 接口类名 {
     属性
     方法
 }
// 实现 :关键字 implements 
class 类名 implements 接口名{
    接口类中所有的属性和方法必须都得实现
}
 interface myInterface{
     name: string
     age: number
 }


 interface myInterface{
    sex: string
    run():void // 方法
}

// 实现接口
class myClass implements myInterface{
    name: string
    age: number
    sex: string
    constructor(name:string,age:number,sex:string){
        this.name = name
        this.age = age
        this.sex = sex
    }
    run(): void {
        throw new Error("Method not implemented.")
    }
}

6、泛型

  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2022-02-26 11:22:00  更:2022-02-26 11:22:31 
 
开发: 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/28 3:05:58-

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