TypeScript类与继承和修饰符public 、private 、protected 的详细讲解 (上)

简介: TypeScript类与继承和修饰符public 、private 、protected 的详细讲解

1.我理解的类


类可以理解成为一个模板,通过这个模板可以实例化某一个具体对象


比如说:我们定义一个动物类,


通过这个动物模板可以实例化成为猫或者其他具体的动物


2.类的基本使用


我们需要创建一个动物类;


这个动物有姓名、【默认值小可爱,字符串类型】


年龄、【默认值 20,数字类型】


性别、【字符串类型】


体重、【数字类型】


爱好【爱好可有可无,如果有必须是一个数组类型的】


这个动物类还有一个say的实例方法


下面我们就开始实现


class Animails {
    name: string
    age: number
    gender: string
    weight: string
    likes?: Array<any>
    //爱好这个属性可有可无,如果有必须是数组类型
    // 定义构造函数:为了将来实例化对象的时候,
    // 构造器直接对属性进行初始化
    // 需要给名称默认值小可爱、年龄默认值age=20
    constructor(
        name: string = '小可爱',
        age: number = 20,
        gender: string,
        weight: string,
        likes?: Array<any>
    ) {
        // 初始化属性中的数据
        this.name = name
        this.age = age
        this.gender = gender
        this.weight=weight
    }
    // 定义实例方法
    say() {
        console.log(
            `大家好我是${this.name},
            今年${this.age}岁了,
            性别:${this.gender},
            体重:${this.weight},
        `);
    }
}
// 实例化对象
let pig = new Animails('猪猪侠', 10, '男', '30kg');
pig.say();//调用实例方法

1425695-20210714231839088-1929772520.png


3.实例化类的注意点


当类中的属性都有默认值时,


实例化对象的时候,


可以不用进行进行初始化。


类中的属性如果没有默认值,不是可选属性。必须一一赋值(初始化)


就是说:


我们必须对构造器中的属性进行一一赋值


除非构造器中有默认值


class Animails {
    name: string
    age: number
    constructor(
        name: string = '小可爱',
        age: number = 20,
    ) {
        // 初始化属性中的数据
        this.name = name
        this.age = age
    }
    // 定义实例方法
    say() {
        console.log( `大家好我是${this.name}, 今年${this.age}岁了, `);
    }
}
// 实例化对象
let pig = new Animails();
pig.say();//调用实例方法


4.类与类之间的继承


A类继承了B类,那么A类叫做子类;B类叫做基类


子类--->又叫派生类


基类--->又叫父类或者超类


下面这个例子我们将子类MySon将会去继承Father父类。


子类有属于自己的方法sonsay;


子类可以去调用父类的方法super.say('子类');


同时我们在子类中将会去重写父类的方法


// 我们定义了一个超类【父类】
class Father {
    // 定义属性
    name: string
    age: number
    // 定义构造函数
    constructor(name: string, age: number) {
        // 初始化属性中的数据
        this.name = name
        this.age = age
    }
    // 定义实例方法
    say(str:string) {
        console.log( `大家好我是${this.name}, 今年${this.age}岁了,${str}呼喊的我 `);
    }
}
// 子类去继承了父类
class MySon extends Father {
    // constructor中的参数必须要满足父类。
    // 除非父类有默认参数或者父类中的属性不是必须属性。
    constructor(name: string, age: number) {
        // super调用父类中的构造函数
        super(name,age)
    }
    // 子类中自己的实例方法
    sonsay() {
        console.log('我是子类哈哈');
        //调用父类中的实例方法
        super.say('子类');
    }
    // 重写父类的方法
    say(name:string) {
        console.log(`我重写了父类的方法我是${name}`)
    }
}
// 进行实例化
let xiaoming = new MySon('小明', 19);
// 进行方法调用 
xiaoming.sonsay();
xiaoming.say('小明');

1425695-20210714203800141-972774980.png


5.修饰符的理解


修饰符:主要用于描述类中的成员(属性、方法、构造函数,)的可访问行


当一个类的成员变量没有修饰的时候,


默认的就是 public 进行修饰。


外界是可以进行访问的。任何位置都可以访问类中的成员


private 属性【只能够】在父类的内部直接进行访问;


class Person{
    age:10
    // private 属性只能够 在类的内部 进行访问;
    private name = "张三" 
    say() {
        console.log("我的名字是"+this.name)
    }
}

6.private的理解


如果父类定义的私有属性或者方法的时候,


那么继承的子类是不可以访问父类中的私有属性和私有方法


在实例化的时候也是不可以访问私有属性和私有方法


子类继承父类后  


访问父类属性通过this.属性名


调用父类的方法 this.方法名


下面我们看一下:


子类是否可以访问父类中的私有属性?


实例化后是否可以访问父类中的私有属性?


class Person {
    age: 10;
    // private 属性只能够在类的内部进行访问;
    private name = "张三";
    say() {
      //内部访问是ok的哈
      console.log("我的名字是" + this.name);
    }
}
class Children extends Person {
    sayage() {
        console.log('访问父类属性年龄',this.age)
    }
    // 下面这种访问是非法的会报错 
    sayname() {
        console.log('访问父类属性姓名',this.name)
    }
}
var xm = new Children();
xm.say();//我的名字是张三
// 报错,因为name是父类私有的,
// 实例化的时候不能够进行访问 
console.log( xm.name )


相关文章
|
2月前
|
JavaScript 前端开发
Vue2整合TypeScript:借助vue-property-decorator以类模式编写组件
Vue2整合TypeScript:借助vue-property-decorator以类模式编写组件
178 3
|
3月前
|
JavaScript
typeScript进阶(13)_类与注意事项(八项特性)
TypeScript的类支持特性包括:构造函数、继承(使用`extends`)、公有/私有/受保护修饰符、只读修饰符、参数属性、存取器(getters/setters)、抽象类(用`abstract`声明)。类可用作类型。
29 0
typeScript进阶(13)_类与注意事项(八项特性)
|
5月前
|
JavaScript 前端开发
TypeScript(七)类
TypeScript(七)类
41 0
|
6月前
|
JavaScript
TypeScript类
TypeScript类
|
2月前
|
JavaScript 前端开发 安全
深入理解TypeScript:增强JavaScript的类型安全性
【10月更文挑战第8天】深入理解TypeScript:增强JavaScript的类型安全性
63 0
|
2月前
|
JavaScript 前端开发 开发者
深入理解TypeScript:类型系统与实用技巧
【10月更文挑战第8天】深入理解TypeScript:类型系统与实用技巧
|
3月前
|
存储 JavaScript
typeScript进阶(11)_元组类型
本文介绍了TypeScript中的元组(Tuple)类型,它是一种特殊的数组类型,可以存储不同类型的元素。文章通过示例展示了如何声明元组类型以及如何给元组赋值。元组类型在定义时需要指定数组中每一项的类型,且在赋值时必须满足这些类型约束。此外,还探讨了如何给元组类型添加额外的元素,这些元素必须符合元组类型中定义的类型联合。
52 0
|
3月前
|
JavaScript
typeScript进阶(10)_字符串字面量类型
本文介绍了TypeScript中的字符串字面量类型,这种类型用来限制变量只能是某些特定的字符串字面量。通过使用`type`关键字声明,可以确保变量的值限定在预定义的字符串字面量集合中。文章通过示例代码展示了如何声明和使用字符串字面量类型,并说明了它在函数默认参数中的应用。
43 0
|
28天前
|
设计模式 JavaScript 安全
TypeScript性能优化及代码质量提升的重要性、方法与策略,包括合理使用类型注解、减少类型断言、优化模块导入导出、遵循编码规范、加强代码注释等
本文深入探讨了TypeScript性能优化及代码质量提升的重要性、方法与策略,包括合理使用类型注解、减少类型断言、优化模块导入导出、遵循编码规范、加强代码注释等,旨在帮助开发者在保证代码质量的同时,实现高效的性能优化,提升用户体验和项目稳定性。
42 6
|
27天前
|
开发框架 JavaScript 前端开发
TypeScript 是一种静态类型的编程语言,它扩展了 JavaScript,为 Web 开发带来了强大的类型系统、组件化开发支持、与主流框架的无缝集成、大型项目管理能力和提升开发体验等多方面优势
TypeScript 是一种静态类型的编程语言,它扩展了 JavaScript,为 Web 开发带来了强大的类型系统、组件化开发支持、与主流框架的无缝集成、大型项目管理能力和提升开发体验等多方面优势。通过明确的类型定义,TypeScript 能够在编码阶段发现潜在错误,提高代码质量;支持组件的清晰定义与复用,增强代码的可维护性;与 React、Vue 等框架结合,提供更佳的开发体验;适用于大型项目,优化代码结构和性能。随着 Web 技术的发展,TypeScript 的应用前景广阔,将继续引领 Web 开发的新趋势。
36 2
下一篇
DataWorks