【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) {
    }
}


目录
相关文章
|
11天前
|
JavaScript 前端开发 C++
typescript 只读属性
typescript 只读属性
|
13天前
|
JavaScript 前端开发
37.【TypeScript 教程】TSLint 与 ESLint
37.【TypeScript 教程】TSLint 与 ESLint
11 0
|
13天前
|
JavaScript 编译器 IDE
36.【TypeScript 教程】tsconfig.json 配置
36.【TypeScript 教程】tsconfig.json 配置
10 0
|
13天前
|
JavaScript 编译器
35.【TypeScript 教程】编译选项
35.【TypeScript 教程】编译选项
11 2
|
13天前
|
JavaScript 前端开发 编译器
34.【TypeScript 教程】声明合并
34.【TypeScript 教程】声明合并
14 0
|
13天前
|
JavaScript 编译器
33.【TypeScript 教程】命名空间
33.【TypeScript 教程】命名空间
17 2
|
13天前
|
JavaScript 编译器 开发者
32.【TypeScript 教程】模块
32.【TypeScript 教程】模块
10 0
|
13天前
|
JavaScript 编译器
31.【TypeScript 教程】混入(Mixins)
31.【TypeScript 教程】混入(Mixins)
15 3
|
13天前
|
JavaScript Java API
30.【TypeScript 教程】Reflect Metadata
30.【TypeScript 教程】Reflect Metadata
12 4
|
13天前
|
JavaScript 监控 编译器
29.【TypeScript 教程】装饰器(Decorator)
29.【TypeScript 教程】装饰器(Decorator)
9 0