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

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

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

实例属性初始化:

写法:

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.私有的属性或方法只在当前类中可见,对子类和实例对象也都是不可见的

只读修饰符:

readonly
    readonly: 表示'只读',用来防止在构造函数之外对属性进行赋值

    写法:
    class Person {
    readonly  age: number = 18
    constructor ( age: number ) {
    this.age = age
    }
    }

解释:

1.使用'readonly' 关键字修饰属性是只读的,注意'只能修饰属性不能修饰方法'
    
    2.注意:属性age后面的类型注解 ( 比如,此处的number )如果不加,则age的类型为18 (字面量类型)

    3.'接口或者{}表示的对象类型,也可以使用readonly' 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值