ts的class类的使用与继承, es6新增的class类

这篇具有很好参考价值的文章主要介绍了ts的class类的使用与继承, es6新增的class类。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

前言:

        ts的class类的使用与继承, es6新增的class类。

一、es6新增的 class 类

        在ES6中为了更好的把js设计成面向对象的语言的语法特征,提出了class 类,class的本质是函数,类不可重复声明,类定义不会被提升,让js更像面向对象编程的语法。

        类名建议大写,在严格要求下必须大写。

        声明类:class 类名 {}   

        匿名类: var fn = class {}

        类的实例为对象,对象三大特性:封装、继承与多态

1、封装

class Animal{
    constructor(name){ //接收参数
        this.name = name
    }
    run(){
        console.log( this.name+'可以跑起来!')
    }
}
 
console.log(111);
const dog = new Animal('小黑')
dog.run()

2、继承

1、使用extends关键字实现继承

2、子类可以继承父类中所有的方法和属性

3、子类只能继承一个父类(单继承),一个父类可以有多个子类

4、子类的构造方法中必须有super()来指定调用父类的构造方法,并且位于子类构造方法中的第一行

5、子类中如果有与父类相同的方法和属性,将会优先使用子类的(覆盖)

class Dog extends Animal{
    bark(){
        return `${this.name} 是一只狗`
    }
}
console.log(222);
const mazi = new Dog('王麻子')
mazi.run()
console.log(mazi.bark)

3、多态

class JinMao extends Dog{
    static categories = ['manmal']  //static-修饰符,静态属性
 
    constructor(name){                    
        super(name)  //子类构造函数中必须用super()
        consoe.log(this.name)
    }
 
    run(){
        return 'memow'+super.run()  //调用父类的run函数
    }
} 
 
console.log(333);
const maomao = new JinMao('maomao')
maomao.run()

//static 定义的变量和方法,可以直接用  方法名+点+变量/方法名()   调用
console.log(  JinMao.categories  );

打印效果:

ts 继承,ts,javascript,前端,es6,ts

二、ts新增的 class的方法

ts中的class又增加了三种修饰符,用来给类中的属性与方法设置权限,更易管理。

  • public:修饰的属性与方法是共有的,默认;
  • private:修饰的属性和方法是私有的,只能在class里使用,通过该类new出来的实例、继承的子类也不能使用;
  • protected:修饰的属性与方法是受保护的,继承的子类可以使用。

1、public

class Animal {
  public name;
  public constructor(name) {
    this.name = name;
  }
}

let a = new Animal('Jack');
console.log(a.name); // Jack
a.name = 'Tom';
console.log(a.name); // Tom

2、private

class Animal{
    private run(){
        return `${this.name} is running`
    }
}
 
const snake = new Animal()
console.log(snake.run())            //报错,run已变成私有方法,不能被使用

3、protected   继承的子类可以使用

class Animal {
  protected name;
}

class Cat extends Animal {
  constructor(name) {
    super(name);
    console.log(this.name);
  }
}

4、readonly 只读属性,

注意如果 readonly 和其他访问修饰符同时存在的话,需要写在其后面。

class Animal {
  readonly name;
}

let a = new Animal();
console.log(a.name); // Jack
a.name = 'Tom';   //无法修改

三、ts中的 interface接口

我们使用接口(Interfaces)来定义对象的类型,  接口(Interfaces)是一个很重要的概念,它是对行为的抽象,而具体如何行动需要由类(classes)去实现(implement)

接口声明只存在于编译阶段,在编译后生成的 JS 代码中不包含任何接口代码

普通接口的实现:

interface Person {
  name: String  //必传
  age?: Number  // ?:可传可不传
}

//调用1:格式必须和接口的格式一致,多属性,少属性都不行
let tom: Person = {
    name: 'Tom'
};

//调用2:
let tom: Person = {
    name: 'Tom',
    age: 25
};

接口的任意属性:[propName: string]

*一旦定义了任意属性,那么确定属性可选属性的类型都必须是它的类型的子集

interface Person {
    name: string  //确定属性,之前就是必传
    age?: number  //可传属性,之前就是不必传,使用任意属性以后,必传
    [propName: string]: string | number  //任意属性,加上以后,对象里面可以有任意多对象
    //[propName: string]: string  如果这样写会报错,因为 age的值是number
}

//调用1:格式必须和接口的格式一致,多属性,少属性都不行
let tom: Person = {
    name: 'Tom',
    age: 25,
    gender: 'male'
}
//调用2
let tom: Person = {
    name: 'Tom',
    age: 25,
    gender: 'male',
    aaa: '123'
}

接口的只读属性

注意,只读的约束存在于第一次给对象赋值的时候

interface Person {
    readonly id: number
    name: string
    age?: number
    [propName: string]: any
}

let tom: Person = { 
    id: 89757, // 初始化 对象赋值,是成功的
    name: 'Tom',
    gender: 'male'
};

tom.id = 9527; //  再次赋值,会报错,因为id是只读属性

四、ts里面的  type  和  interface  的区别

1、区别

相同:

        都可以用来定义 对象 或者 函数 的结构,而严谨的来说,type 是引用,而 interface是定义

不同:

1、type (alias)类型别名,可以定义基础类型、联合类型或交叉类型。interface 接口,只能定义对象,

2、接口可以 extends、implements,从而扩展多个接口或类。 type没有扩展功能,只能交叉合并

3、定义两个相同名称的接口会合并声明,定义两个同名的 type 会出现异常。

4、type 在声明类型别名之后实际上是一个赋值操作,它需要将别名与类型关联起来。也就是说类型别名不会创建出一种新的类型,它只是给已有类型命名并直接进行引用。interface定义了一个接口类型

// 1、定义声明不同
type Person = string
type animal = Dog | Cat
//type定义元组
interface Dog {
  name: string;
}
interface Cat {
  age: number;
}
type animal = [Dog, Cat];

//接口定义对象
interface Person {
    name: string
}



// 2、定义两个相同名称的接口会合并声明,定义两个同名的 type 会出现异常
interface Person {
  name: string;
}
interface Person {
  age: number;
}
// 合并为:interface Person { name: string age: number}

type User = {
  name: string;
};
type User = {
  age: number;
};
// 声明重复报错:标识符“User”重复。

2、interface  的继承

接口可以 extends、implements ,来实现继承

ts 继承,ts,javascript,前端,es6,ts文章来源地址https://www.toymoban.com/news/detail-753751.html

//extends 可以实现class继承,也可以实现接口继承
interface Person {
  name: string;
}
interface User extends Person {
  age: number;
}



interface Animal {
    food: string
    eat(food: string): void
}
// Cat类实现Animal接口的时候需要能够兼容Animal接口才行,否则会报错。
class Cat implements Animal {
    food: string = 'fish';
    eat(food: string): void {}
}

3、type 使用交叉类型&来合并不同成员的类型,实现一个类似继承的效果

type Person = { name: string }; //1、type定义对象
type User = Person & { age: number }; //2、type合并两个对象

interface Person {
  name: string;
}
type User = { age: number } & Person; //3、type合并对象和接口

到了这里,关于ts的class类的使用与继承, es6新增的class类的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • js继承的几种方式(原型链继承、构造函数继承、组合式继承、寄生组合式继承、ES6的Class类继承)

    实现原理: 子类的原型指向父类实例 。子类在自身实例上找不到属性和方法时去它父类实例(父类实例和实例的原型对象)上查找,从而实现对父类属性和方法的继承 缺点: 子类创建时不能传参(即没有实现super()的功能); 父类实例的修改会影响子类所有实例 实现原理:

    2024年02月07日
    浏览(48)
  • JavaScript笔记——快速了解 ES6 新增数组方法,开箱即用(含案例)

    数组是 JavaScript 以及多数编程其他编程语言的一种基础数据类型。 ES6 提供了许多新的数组方法,这篇文章将介绍其中一些常用的数组方法及其使用示例。 Array.from() 方法从一个类似数组或可迭代对象中创建一个新的,浅拷贝的数组实例。例如,将字符串转换为字符数组。 A

    2024年02月10日
    浏览(45)
  • ES6 全详解 let 、 const 、解构赋值、剩余运算符、函数默认参数、扩展运算符、箭头函数、新增方法,promise、Set、class等等

    ​ ECMAScript 6.0,简称 ES6,是 JavaScript 语言的下一代标准,已经在 2015 年 6 月正式发布了。它的目标,是使得 JavaScript 语言可以用来编写复杂的大型应用程序,成为企业级开发语言 要讲清楚这个问题,需要回顾历史。1996 年 11 月,JavaScript 的创造者 Netscape 公司,决定将 JavaSc

    2024年04月15日
    浏览(46)
  • ES6中的Class关键字和super()方法,使用详细(class类和super()方法)

    简介:在ES6中,我们可以使用class来定义类,并通过 extends 实现类的继承,然后在子类中,我们可以使用 super() 来调用父类的构造函数;今天来分享下class的使用详细。 1、 首先,使用class,定义一个父类; 2、 然后再定义一个子类, 通过ex

    2024年02月12日
    浏览(47)
  • ES6基础知识二:ES6中数组新增了哪些扩展?

    一、扩展运算符的应用 ES6通过扩展元素符…,好比 rest 参数的逆运算,将一个数组转为用逗号分隔的参数序列 主要用于函数调用的时候,将一个数组变为参数序列 可以将某些数据结构转为数组 能够更简单实现数组复制 const a1 = [1, 2]; const […a2] = a1; // [1,2] 数组的合并也更为

    2024年02月16日
    浏览(39)
  • ES6的class

    ES6 的类,可以看作构造函数的另一种写法。 类的数据类型就是函数,类本身就指向构造函数。 构造函数的prototype属性在ES6的类上面继续存在,定义在类内部的函数相当于定义在类的prototype属性上,prototype对象的constructor属性,直接指向“类”的本身, 但 类内部定义的方法不

    2024年02月07日
    浏览(34)
  • ES6函数新增了哪些扩展?

    ES6允许为函数的参数设置默认值 函数的形参是默认声明的,不能使用let或const再次声明 参数默认值可以与解构赋值的默认值结合起来使用 上面的foo函数,当参数为对象的时候才能进行解构,如果没有提供参数的时候,变量x和y就不会生成,从而报错,这里设置默认值避免 参

    2024年02月06日
    浏览(47)
  • ES6 中的类(class)

    ES6 引入的 class 具有定义类的能力。类是 ECMAScript 中新的基础性语法糖 。虽然 ES6 表面上看起来可以支持正式的面向对象编程,但实际上它背后使用的依旧是原型和构造函数的概念。(笔记内容参考《 JavaScript 高级程序设计(第 4 版)》章节 8.4 类 )。以前在笔记《

    2023年04月20日
    浏览(80)
  • 【ES6】class静态方法

    类相当于实例的原型,所有在类中定义的方法,都会被实例继承。如果在一个方法前,加上static,就表示该方法不会被实例继承,而是直接通过类来调用,这就称为“静态方法”。 上面代码中,Foo类的classMethod方法前有static,表明该方法是一个静态方法,可以直

    2024年02月09日
    浏览(32)
  • ES6学习-Class类

    constructor 构造方法 this 代表实例对象 方法之间不需要逗号分隔,加了会报错。 类的数据类型就是函数,类本身就指向构造函数。 类的所有方法都定义在类的 prototype 属性上面 类的内部所有定义的方法,都是不可枚举的(non-enumerable) ES6类内部定义的方法不可枚举;ES5可以

    2024年02月14日
    浏览(33)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包