【TypeScript】中定义与使用 Class 类的解读理解

这篇具有很好参考价值的文章主要介绍了【TypeScript】中定义与使用 Class 类的解读理解。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

【TypeScript】中定义与使用 Class 类的解读理解,TypeScript,typescript,javascript,前端

类的概念

类是用于创建对象的模板。他们用代码封装数据以处理该数据。JavaScript 中的类建立在原型上,但也具有某些语法和语义未与 ES5 类相似语义共享。


TypeScript 除了实现了所有 ES6 中的类的功能以外,还添加了一些新的用法。

关于ES6的 Class 类语法概念,在本章节不做过多阐述,感兴趣的的小伙伴 可以 点击这里,了解查看更多 ES6中有关Class的语法概念使用。

本章节还是主要给大家带来,在 TypeScript 中,如何去定义 Class 【类】,以及如何去使用 类身上的 属性及方法。

定义Class : 使用 Class 定义类,使用 constructor 定义构造函数。

在原生 JavaScript

class Rectangle {
    constructor(height, width) {
        this.height = height;
        this.width = width;
    }
}
new Rectangle(1, 2)   //实例化,并传入参数

上面的是,在JS中,Class 类的常用定义方式。

而在TypeScript 中定义 Class 类:

class identity {
    name: string;   //TS 中需要对要接受的参数初始化
    age: number;
    constructor(name: string, age: number) {    //为要传入的参数指定类型。不指定类型,默认为Any 类型。
        this.name = name;
        this.age = age;
    }
    sayHi() {
        return `我叫 ${this.name},今年${this.age}`;
    }
}
let a = new identity('张三', 20);
console.log(a);    //Animal {name: '张三', age: 20}

console.log(a.sayHi());  //我叫 张三,今年20岁

类的继承 :

使用 extends 关键字实现继承,子类中使用 super() 关键字来调用父类的构造函数和方法。

class identity {   //父类
    name: string;
    age: number;
    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }
    sayHi() {
        return `我叫 ${this.name},今年${this.age}`;
    }
}

//子类
class copy extends identity {   
    //由于我继承了 identity ,在 identity 身上已经存在了 name 和 age
    // 所以 在 copy 类里面就不用再定义 name 和 age了,继承后可以直接读取到,所继承类身上的属性方法。
    constructor(name: string, age: number) {
        super(name, age)              // super 继承
    }
}
let c = new copy("李四", 30) //实例化子类
console.log(c);  //copy {name: '李四', age: 30}

//可以调用父类身上的方法。
console.log(c.sayHi());   //我叫 李四,今年30岁

类的存取器:

使用 getter 和 setter 可以改变属性的赋值和读取行为。

存取器的作用:可以用来更专注化的控制对,对象属性方法的读取和修改。

class identity {   //父类
    name: string;
    age: number;
    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }
    //设置读取器=》,用来读取数据
    get names() {
        return "getter" + `我叫 ${this.name},今年${this.age}`;
    }

    //设置存储器,用来修改数据
    set names(val: string) {
        console.log("这是set 传入进来的值", val);
    }
}

let a = new identity("张三", 18);
console.log(a.names);  //当我们访问读取器的时候会触发get,会直接得到返回的值 : getter张三18
a.names = "李四" //当我们为存储器赋值的时候,会触发 set 并且会把,赋值,当成参数,传递给 set。

使用 存储器的好处:对属性方法的读取和修改,更加的专业化,不同的存取器,负责不同的逻辑处理,这里的存取器,也相似于 Vue 中的 computed 计算属性。 以及 Object.defineProperty()的 get 和 set 方法 类似。


类的静态方法与静态属性:

有时候,我们希望 类中所定义的属性或者方法,不想被实例化后的对象读取,不需要实例化,那么,我们就可以通过 static 关键字,来把 属性或方法定义为静态成员来实现。

class identity {
    static username: string = "asdasd";    //将 username  通过 static 设置为静态属性。并为其赋值。
    name: string
    age: number;
    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
        console.log(this.username);  //也会报错,类的内部也不能拿取 username
    }

    //将方法设置为 静态方法
    static bolkfn() {
        console.log("静态方法");
    }
}



let a = new identity("张三", 18);

console.log(identity.username);  // 类自身访问静态属性,不会报错

console.log(a.username);      //实例对象访问静态属性,会报错 :属性“username”在类型“identity”上不存在。


console.log(identity.bolkfn());  // 类自身访问静态方法,不会报错

console.log(a.bolkfn());      //实例对象访问静态方法,会报错 :属性“bolkfn”在类型“identity”上不存在。

扩展知识点

在ES7 中有一些关于类的新特性提案,TypeScript 也实现了它们,这里做一个简单的介绍。

ES6 中实例的属性只能通过构造函数中的 this.xxx 来定义,而在 ES7 提案中可以直接在类里面定义:

class Animal {
  name = 'Jack';  //可以直接在类中定义,非必须要在 constructor 通过 this.name 来定义。

  constructor() {
    // ...
  }
}

let a = new Animal();
console.log(a.name); // Jack 可以直接读取到name属性 

类的修饰符:

TypeScript 可以使用三种访问修饰符(Access Modifiers),分别是 publicprivate protected

  • public :修饰的属性或方法是公有的,可以在任何地方被访问到,默认所有的属性和方法都是 public
  • private 修饰的属性或方法是私有的不能在声明它的类的外部访问,虽然 子类 可以通过 extends 继承它的私有属性,但是却无法读取
  • protected : 修饰的属性或方法是受保护的,它和 private 类似,区别是它在子类中也是允许被访问的,也依然无法在外部访问

例:
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

private

class Animal {
    private name;   //设置私有化
    public constructor(name) {
        this.name = name;
    }
}

let a = new Animal('Jack');
console.log(Animal.name);  //只能自身读取

console.log(a.name);  //报错
a.name = 'Tom';   //报错

即使通过子类继承,在子类继承中也不能访问读取

class Animal {
  private name;
  public constructor(name) {
    this.name = name;
  }
}
class Cat extends Animal {
  constructor(name) {
    super(name);
    console.log(this.name);   //报错,子类继承中也无法访问私有化数据
  }
}

当构造函数修饰为 private 时,该类 允许被继承或者实例化:

class Animal {
    public name;
    private constructor(name) {  //构造函数 private 私有化
      this.name = name;
    }
  }
  class Cat extends Animal {  //报错不能被继承
    constructor(name) {
      super(name);
    }
  }
  
  let a = new Animal('Jack');  //报错,不应该被实例化

protected

当使用 protected 修饰,则 允许 在子类中访问:

class Animal {
  private name;
  public constructor(name) {
    this.name = name;
  }
}
class Cat extends Animal {
  constructor(name) {
    super(name);
    console.log(this.name);   //不会报错,子类继承中可以访问
  }
}

当构造函数修饰为 protected 时,该类只允许被继承:

class Animal {
    public name;
    protected constructor(name: string) {
        this.name = name;
    }
}
class Cat extends Animal {
    constructor(name: string) {
        super(name);
    }
}

let a = new Animal('Jack');  //报错,因为  Animal 只允许被继承。

参数属性:

上面,介绍的三种 修饰符,其实还有一种简洁的写法,被称为 属性参数写法;修饰符还可以使用在构造函数参数中等同于类中定义该属性同时给该属性赋值,使代码更简洁。

class Animal {
    // public name;   //可以省略此处
    protected constructor(public name: string) {  //  private   protected  同理
        // this.name = name;   //可以省略此处
    }
}

readonly : 只读属性关键字,只允许出现在属性声明或索引签名或构造函数中。

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

let a = new Animal('Jack');
console.log(a.name); // Jack
a.name = 'Tom';    //会报错,因为属性为 只读的,不能修改。

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

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

抽象类:

概念:抽象类的概念是,专注于用来为子类服务的,抽象类是不允许被实例化的,只能通过被子类继承。
语法:abstract 关键字用于定义抽象类和其中的抽象方法

abstract class Animal {  // 通过 abstract  定义一个抽象类
  public name;
  public constructor(name) {
    this.name = name;
  }
  public abstract sayHi();    //并且在抽象类里面,还可以定义 抽象方法
}

let a = new Animal('Jack');  //会报错,抽象类不能被实例化

注意抽象类中的抽象方法或属性必须被子类实现,否则在子类继承抽象类后,实例化的时候会报错

abstract class Animal {  // 通过 abstract  定义一个抽象类
    public name;
    public constructor(name) {
        this.name = name;
    }
    public abstract sayHi() { };    //并且在抽象类里面,还可以定义 抽象方法
}


class B extends Animal {
    public sayHi() {   //抽象类中,所定义抽象方法,必须要在子类中实现。
        console.log("继承Animal");

    }
}
let isB = new B("")

类的类型:

给实例化的类,定义类型,简述而言,就是定义的 class 类,还可以被用来当做 一种类型,赋值给实例化的对象,用来校验类的数据完整性。

案例说明:

class Animal {
  name: string;
  constructor(name: string) {
    this.name = name;
  }
  sayHi(): string {
    return `My name is ${this.name}`;
  }
}

// 把 Animal  当做一种类型,用来校验实例化对象 a 的规范性。
let a: Animal = new Animal('Jack');
console.log(a.sayHi()); // My name is Jack

总结:

本章节,主要给大家介绍了,在 TypeScript 中,如何去声明 class 类,以及对 class 类的主要运用解析。欢迎大家交流评论。


🚵‍♂️ 博主座右铭:向阳而生,我还在路上!
——————————————————————————————
🚴博主想说:将持续性为社区输出自己的资源,同时也见证自己的进步!
——————————————————————————————
🤼‍♂️ 如果都看到这了,博主希望留下你的足迹!【📂收藏!👍点赞!✍️评论!】
——————————————————————————————文章来源地址https://www.toymoban.com/news/detail-629530.html

到了这里,关于【TypeScript】中定义与使用 Class 类的解读理解的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • TypeScript快速入门 - 类的使用

    1、类的声明         :class 2、类的继承         :extends 3、类与接口         :implments 4、抽象类         :abstract 5、类的成员变量修饰符         公开的:public         私有的:private         受保护的:protected         只读的:re

    2024年01月21日
    浏览(44)
  • 【TypeScript】接口类型 Interfaces 的使用理解

    导语 : 什么是 类型接口 ? 在面向对象语言中 ,接口 (Interfaces) 是一个很重要的概念,它是对行为的抽象,而具体如何行动需要由类(classes)去实现(implement)。TypeScript 中的 类型接口 是一个非常灵活的概念,除了可用于 对类的一部分行为进行抽象 以外,也常用于对「

    2024年02月15日
    浏览(53)
  • Typescript:类的装饰器

    Typescript的装饰器我在学习typescript的时候并不是很清楚它的作用场景,直到使用了nest.js框架后,才明白其作用,于是又深入学习了一下,希望通过对装饰器的学习提高对nest.js的使用。 装饰器为我们在类的声明及成员上通过元编程语法添加标注提供了一种方式 装饰器 是一种特

    2024年02月16日
    浏览(36)
  • typeScript中的类以及类的限制

    传统方法中,JavaScript通过构造函数实现类的概念,通过原型链实现继承。而在Es6中,我们终于迎来了class. typeScript除了实现了所有Es6中类的功能以外,还添加了一些新的用法。 虽然 JavaScript 中有类的概念,但是可能大多数 JavaScript 程序员并不是非常熟悉类,这里对类相关的概

    2024年02月05日
    浏览(37)
  • Buf 教程 - 使用 Protobuf 生成 Golang 代码和 Typescript 类型定义

    Buf 是一款更高效、开发者友好的 Protobuf API 管理工具,不仅支持代码生成,还支持插件和 Protobuf 格式化。 我们可以使用 Buf 替代原本基于 Protoc 的代码生成流程,一方面可以统一管理团队 Protoc 插件的版本、代码生成配置,另一方面可以简化项目开发配置。 本文将会用两部分

    2024年02月08日
    浏览(87)
  • TypeScript深度剖析:TypeScript 中命名空间与模块的理解?区别?

    TypeScript  与 ECMAScript  2015 一样,任何包含顶级  import  或者  export  的文件都被当成一个模块 相反地,如果一个文件不带有顶级的 import 或者 export 声明,那么它的内容被视为全局可见的 例如我们在在一个  TypeScript  工程下建立一个文件  1.ts ,声明一个变量 a ,如下: 然

    2024年02月07日
    浏览(31)
  • TypeScript -类型断言的简单理解

    类型断言 : 是手动的给某个变量 指定类型,从而可以方便操作该类型的属性和方法。 方式一 : 变量名 as 类型 方式二 :类型 变量名 注意 : 1、类型断言只是为了方便明确变量的类型,而不是将变量的类型进行改变!!! 2、因此,类型断言在使用的时候,建议 在我们已

    2024年02月08日
    浏览(41)
  • feat:使用企业微信JS-SDK的onMenuShareAppMessage()实现点击转发自定义分享内容(TypeScript)

    背景:企业微信应用使用企业微信JS-SDK的分享接口实现分享样式自定义 原生: 需要实现成: 企业微信JS-SDK 是企业微信面向网页开发者提供的 基于企业微信内 的网页开发工具包。 通过使用企业微信JS-SDK,网页开发者 可借助企业微信 高效地使用拍照、选图、语音、位置等手

    2024年02月07日
    浏览(43)
  • Java面试题Class类的理解?创建类的对象的方式?

    1.类的加载过程: 程序经过 javac.exe 命令以后,会生成一个或多个字节码文件(.class结尾)。 接着我们使用 java.exe 命令对某个字节码文件进行解释运行。相当于将某个字节码文件 加载到内存中。此过程就称为类的加载 。加载到内存中的类,我们就称为运行时类,此运行时类,

    2024年02月10日
    浏览(37)
  • typescript 对象的属性定义

    [propName: string] :表示对象属性可以是任意值

    2024年02月21日
    浏览(33)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包