【TypeScript教程】# 14:属性的封装

简介: 【TypeScript教程】# 14:属性的封装

说明

尚硅谷TypeScript教程(李立超老师TS新课)学习笔记。




属性的封装


现在属性是在对象中设置的,属性可以任意的被修改,属性可以任意被修改将会导致对象中的数据变得非常不安全


比如:

(function() {
    class Person {
        name: string;
        age: number;
        constructor(name: string, age: number) {
            this.name = name;
            this.age = age;
        }
        sayHello() {
        }
    }
    const per = new Person("kaimo", 18);
    console.log(per);
    per.name = "kaimo313";
    per.age = -313;
    console.log(per);
})()


bfcaa6652798443fa337198839b55ea1.png



public

TS可以在属性前添加属性的修饰符,public 修饰的属性可以在任意位置访问(修改)默认值

属性的存取器


  • getter:方法用来读取属性
  • setter:方法用来设置属性


(function() {
    class Person {
        public _name: string;
        public _age: number;
        constructor(name: string, age: number) {
            this._name = name;
            this._age = age;
        }
        // getName() {
        //     return this.name;
        // }
        // setName(value:string) {
        //     this.name = value;
        // }
        // getAge() {
        //     return this.age;
        // }
        // setAge(value:number) {
        //     if(value >= 0) {
        //         this.age = value;
        //     }
        // }
        get name() {
            return this._name;
        }
        set name(value:string) {
            this._name = value;
        }
        get age() {
            return this._age;
        }
        set age(value:number) {
            if(value >= 0) {
                this._age = value;
            }
        }
    }
    const per = new Person("kaimo", 18);
    console.log(per);
    // per.setName("kaimo313");
    // per.setAge(-313);
    per.name = "kaimo313";
    per.age = -313;
    console.log(per);
})()


ef61141fdebc470cb15967aaf5f373a6.png



private

private私有属性, 私有属性只能在类内部进行修改,通过在类中添加方法使得私有属性可以被外部访问

    class A{
        private num: number;
        constructor(num: number) {
            this.num = num;
        }
    }
    class B extends A{
        test(){
            console. log(this.num);
        }
    }


22b89d439e454ab19aa0c608d08c0796.png


protected

protected受包含的属性, 只能在当前类和当前类的子类中访问(修改)


    class A{
        protected num: number;
        constructor(num: number) {
            this.num = num;
        }
    }
    class B extends A{
        test(){
            console. log(this.num);
        }
    }
    const b = new B(123) ;
    b.num = 33;


9e441f3a8df34cdf97368a7818b4ac3c.png



语法糖写法

可以直接将属性定义在构造函数中

    class C{
        num: number;
        age:number;
        constructor(num: number, age:number) {
            this.num = num;
            this.age = age;
        }
    }



可以简化成下面的

classC{
    constructor(public num: number, public age:number) {
    }
}


目录
相关文章
|
2月前
|
JavaScript 前端开发
TypeScript【类型别名、泛型】超简洁教程!再也不用看臭又长的TypeScript文档了!
【10月更文挑战第11天】TypeScript【类型别名、泛型】超简洁教程!再也不用看臭又长的TypeScript文档了!
|
2月前
|
JavaScript 前端开发 Java
TypeScript【接口】超简洁教程!再也不用看臭又长的TypeScript文档了!
【10月更文挑战第10天】TypeScript【接口】超简洁教程!再也不用看臭又长的TypeScript文档了!
|
2月前
|
JavaScript 前端开发 安全
TypeScript【基础类型】超简洁教程!再也不用看臭又长的TypeScript文档了!
【10月更文挑战第9天】TypeScript【基础类型】超简洁教程!再也不用看臭又长的TypeScript文档了!
|
2月前
|
JavaScript 索引
TypeScript(TS)安装指南与基础教程学习全攻略(二)
TypeScript(TS)安装指南与基础教程学习全攻略(二)
56 0
|
2月前
|
JavaScript 前端开发 安全
TypeScript(TS)安装指南与基础教程学习全攻略(一)
TypeScript(TS)安装指南与基础教程学习全攻略(一)
30 0
|
4月前
|
JavaScript 前端开发 编译器
TypeScript教程(一)在vscode中的配置TypeScript环境
本文是一篇TypeScript入门教程,介绍了在VS Code中配置TypeScript环境的步骤,包括安装Node.js、使用npm安装TypeScript、配置npm镜像源、安装VS Code的TypeScript扩展,以及创建和运行一个简单的TypeScript "Hello World"程序。
TypeScript教程(一)在vscode中的配置TypeScript环境
|
4月前
|
资源调度 JavaScript 前端开发
TypeScript实战教程(一):表单上传与后端处理
本文是TypeScript实战教程的第一部分,介绍了使用TypeScript进行表单上传和后端处理的完整流程,包括环境配置、前端表单创建、使用TypeScript和Express框架搭建服务端、处理表单数据,并提供了详细的代码示例和运行测试方法。
TypeScript实战教程(一):表单上传与后端处理
|
4月前
|
JavaScript 编译器
typescript 解决变量多类型访问属性报错--工作随记
typescript 解决变量多类型访问属性报错--工作随记
|
5月前
|
JavaScript 前端开发 程序员
Typescript 【实用教程】(2024最新版)含类型声明,类型断言,函数,接口,泛型等
Typescript 【实用教程】(2024最新版)含类型声明,类型断言,函数,接口,泛型等
86 0
|
6月前
|
JavaScript Java API
30.【TypeScript 教程】Reflect Metadata
30.【TypeScript 教程】Reflect Metadata
127 4