前端系列三十三：TS中的class类

最新推荐文章于 2024-09-12 17:05:26 发布

原创最新推荐文章于 2024-09-12 17:05:26 发布 · 1.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #typescript #vue

本文详细讲解了TypeScript中的class类，包括实例属性初始化、构造函数、实例方法、继承、实现接口、类成员可见性以及只读修饰符。通过具体的代码示例，阐述了如何使用这些特性来构建更健壮的前端应用。

实例属性初始化：

写法：

class Person {
       age: number
       gender = ' 男 '
       }

const p = new Person( )

解释：

1.声明成员 age，类型为number ( 没有初始值 )

2.声明成员 gender, 并设置初始值，此时，可省略类型注解 ( TS类型推论为string类型 )

class类：

构造函数:

class Person {
   age: number
   gender: string

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

}

解释：

1.成员初始化( 比如 age: number ) 后,才可以通过 this.age 来访问实例成员

2.需要为构造函数指定类型注解，否则会被隐式推断为 any; 构造函数不需要返回值类型

实例方法：

class Point {
x = 10
y= 10

   scale( n:number ): void {
   this.x *= n
   this.y *= n
   }
    }

解释：

方法的类型注解 ( 参数和返回值 ) 与函数用法相同

继承：

两种方式：
1. extends ( 继承父类 ) :

   class Animal {
   move() { console.log('Moving dlong') }
   }

   class Dog extends Animal {
   bark() { console.log( '汪' ) }
   }

const dog = new Dog( )

解释：

通过extends 关键字实现继承

子类Dog 继承父类Animal 则 Dog的实例对象 dog 就同时具有了父类 Animal 和子类 Dog的
所有属性和方法

2. implements ( 实现接口 ):

写法：

interface Singale {
   sing( ) : void
   name: string
   }

   class Person implements Singale {
   name: 'jack'
   sing( ) {
   console.log( '你是我的小苹果' )
   }
   }

解释：

通过'implements' 关键字让 class 实现接口

Person类实现接口 Singable 意味着，Person 类中必须提供 Singable 接口中指定所有的方法
和属性

类成员可见性：

可以使用TS来'控制class的方法或属性对于class外的代码是否可见'

可见性修饰符包括：

(1).public (公有的)：表示公有的，'公有成员可以被任何地方访问'，默认可见性

   class Animal {
   public move ( ) {
   console.log( 'Moving along' )
   }
   }

解释：

1.在类属性或方法前面添加 ' public' 关键字，来修饰该属性或方法是共有的

2. 因为 public 是默认可见性，所以，'可以直接省略'

(2) protected: 表示'受保护的',仅对其声明所在类和子类中 (非实例对象) 可见

class Animal {
   protected move ( ) {
   console.log( 'Moving along' )
   }
   }

   class Dog extends Animal {
   bark( ) {
   console.log( '汪！' )
   }
   this.move( )
   }

解释：

1.在类属性或方法前面添加 protected 关键字, 来修饰该属性或方法是受保护的

2.在子类的方法内部可以通过 this来访问父类中受保护的成员，但是,'对实例不可见'

(3)private: 表示'私有的,只在当前类中可见'，对实例对象以及子类也是不可见的

写法：

class Animal {
private move( ) { console.log( 'hello' ) }

   walk ( ) {
   this.move( )
   }
   }

解释：

1.在类属性或方法前面添加 'private' 关键字，来修饰该属性或方法是私有的

2.私有的属性或方法只在当前类中可见，对子类和实例对象也都是不可见的