TypeScript 封装的实现

源码

• ts

// //先创建一个类
// class Hello{
//  private name:string;
//  tell(){
//      return this.name;
//  }
// }

// let h = new Hello();
// h.name = 'xiaochuan';
// alert(h.tell());//由于在类中声明的 name 属性是 private (私有的) 致使外部不可见该属性，    所以这里直接调用的话就会获取不到


// //下面是用封装的方法解决上面出现的问题
// class Hello{
//  private _name:string;
//  tell(){
//      return this._name;
//  }
//  //getter 获取
//  get name():string{
//      return this._name;
//  }
//  // setter 设置 这里是需要添加参数的
//  set name(newname:string){
//      this._name = newname;
//  }
// }

// let h = new Hello();
// h.name = 'xiaochuan';
// alert(h.tell());//'xiaochuan' 此时便可以得到上面的 `name` 的值了


//下面做一个在 set 中扩展的示例
class Hello{
    private _age:number;
    tell(){
        return this._age;
    }
    //getter 获取
    get age():number{
        return this._age;
    }
    // setter 设置 这里是需要添加参数的
    set age(newage:number){
        //扩展：在这里做一个容错
        if(newage > 200 || newage < 0){
            alert('请正确填写年龄！');
        }else{
            this._age = newage;
        }
        
    }
}

let h = new Hello();
h.age = 22;
alert(h.tell());

• HTML

    
    


    
需要注意的是这个示例的 .ts 文件编译命令是这样的：`tsc -target ES5 Accessors.ts` 之前的 `tsc xxx.ts` 是会报错的，切记！
    

• 浏览器效果图

image.png

image.png

image.png