• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

008--TypeScript存储器和静态属性

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

Typescript支持对一个简单的类进行getter和setter

//ts实现getter和setter
//这个文件只能编译成es5
let passCode = \'Secret Password\'
class Employee {
 private _fullName: string
 get fullName(): string{
   return this._fullName
 }
 set fullName(newName: string) {
   if(passCode && passCode == \'Secret Password\'){
     this._fullName = newName
   } else {
     console.error (\'Error: Unauthorized update of employee!\')
   }
 }
}
let employee = new Employee()
employee.fullName = \'BOb smith\'
if (employee.fullName) {
  console.log(employee.fullName)//如果passCode正确,输出BOb smith
}

编译后的文件如下

//ts实现getter和setter
//这个文件只能编译成es5
var passCode = \'Secret Password\';
var Employee = /** @class */ (function () {
    function Employee() {
    }
    Object.defineProperty(Employee.prototype, "fullName", {
        get: function () {
            return this._fullName;
        },
        set: function (newName) {
            if (passCode && passCode == \'Secret Password\') {
                this._fullName = newName;
            }
            else {
                console.error(\'Error: Unauthorized update of employee!\');
            }
        },
        enumerable: true,
        configurable: true
    });
    return Employee;
}());
var employee = new Employee();
employee.fullName = \'BOb smith\';
if (employee.fullName) {
    console.log(employee.fullName); //如果passCode正确,输出BOb smith
}

创建类的静态成员,这些属性只存在类的本身

//静态属性的使用
//计算坐标系的一点到任一点的距离
class Grid {
  static orign = {x:0, y:0}//静态属性,可以直接使用

  scale: number //定义缩放比例

  constructor(scale: number) {
    this.scale = scale//把scale传给this,new函数的时候必须传入
  }

  //创建一个实例方法
  calculateDistanceFromOrign (point: {x:number; y: number}) {
    let xDist = point.x - Grid.orign.x //静态属性可以直接使用
    let yDist = point.y - Grid.orign.y
    //勾股定理
    return Math.sqrt(xDist * xDist + yDist * yDist) * this.scale 
  }
}

let grid1 = new Grid(1.0)
let grid2 = new Grid(5.0)
//勾3股4弦5
console.log(grid1.calculateDistanceFromOrign({x:3 , y:4}))//5
console.log(grid2.calculateDistanceFromOrign({x:3 , y:4}))//25

编译后的文件

//静态属性的使用
//计算坐标系的一点到任一点的距离
var Grid = /** @class */ (function () {
    function Grid(scale) {
        this.scale = scale; //把scale传给this,new函数的时候必须传入
    }
    //创建一个实例方法
    Grid.prototype.calculateDistanceFromOrign = function (point) {
        var xDist = point.x - Grid.orign.x; //静态属性可以直接使用
        var yDist = point.y - Grid.orign.y;
        //勾股定理
        return Math.sqrt(xDist * xDist + yDist * yDist) * this.scale;
    };
    Grid.orign = { x: 0, y: 0 }; //静态属性,可以直接使用
    return Grid;
}());
var grid1 = new Grid(1.0);
var grid2 = new Grid(5.0);
//勾3股4弦5
console.log(grid1.calculateDistanceFromOrign({ x: 3, y: 4 }));
console.log(grid2.calculateDistanceFromOrign({ x: 3, y: 4 }));

TypeScript抽象类

抽象类一般作为其他类的派生类或者基类使用,一般不能直接使用

abstract class Department {
  name: string
  constructor(name: string) {
    this.name = name
  }

  printName(): void{
    console.log(\'Department name \' + this.name)
  }

  abstract printMeeting(): void  //具体实现要在派生类中实现,这是个签名
}

class AccountingDepartment extends Department {
  constructor() {
    super(\'Accounting ad Auditing\')
  }
  //实现抽象方法
  printMeeting(): void {
    console.log(\'The Accounting Department meets each monday at 10am\') 
  }

  genterateReports(): void {
    console.log(\'Generating accounting reports.. \')
  }
}

let department: Department
//  department = new Department()//报错,无法创建抽象类的实例
department = new AccountingDepartment()
department.printName()
department.printMeeting()
//department.genterateReports()//定义的是Department类型,没有这个实例方法
//输出
// Department name Accounting ad Auditing
// The Accounting Department meets each monday at 10am

类的一些高级技巧

//类的一些高级技巧
class Greeter {
  static standgrdGreeting = \'Hello , there\'

  greeting: string

  constructor(message: string) {
    this.greeting  = message
  }

  greet() {
    return \'Hello\' + this.greeting
  }
}

let greeter: Greeter
greeter = new Greeter(\'world\')
console.log(greeter.greet())//Helloworld

可以看到上面的代码有静态属性,有实例方法

//类的一些高级技巧
var Greeter = /** @class */ (function () {
    function Greeter(message) {
        this.greeting = message;
    }
    Greeter.prototype.greet = function () {
        return \'Hello\' + this.greeting;
    };
    //最开始把构造函数赋值给Greeter变量
    //静态属性编译后实际上是挂载在赋值后的Greeter上
    Greeter.standgrdGreeting = \'Hello , there\';
    return Greeter;
}());
var greeter;
greeter = new Greeter(\'world\');
console.log(greeter.greet());

改造后

//类的一些高级技巧
class Greeter {
  static standgrdGreeting = \'Hello , there\'

  greeting: string

  //修改为可选参数
  constructor(message?: string) {
    this.greeting  = message
  }

  greet() {
    if(this.greeting){
    return \'Hello\' + this.greeting
    }else {
      return Greeter.standgrdGreeting
    }
  }
}

let greeter: Greeter
greeter = new Greeter()
console.log(greeter.greet())//Hello , there

//如果我们相对standGreeting做修改怎么办呢?
let greetMaker: typeof  Greeter = Greeter
greetMaker.standgrdGreeting = \'Hey, htere\'

let greeter2:Greeter = new greetMaker()
console.log(greeter2.greet())//Hey, htere

编译后

//类的一些高级技巧
var Greeter = /** @class */ (function () {
    //修改为可选参数
    function Greeter(message) {
        this.greeting = message;
    }
    Greeter.prototype.greet = function () {
        if (this.greeting) {
            return \'Hello\' + this.greeting;
        }
        else {
            return Greeter.standgrdGreeting;
        }
    };
    Greeter.standgrdGreeting = \'Hello , there\';
    return Greeter;
}());
var greeter;
greeter = new Greeter();
console.log(greeter.greet()); //Hello , there
//如果我们相对standGreeting做修改怎么办呢?
var greetMaker = Greeter;
greetMaker.standgrdGreeting = \'Hey, htere\';
var greeter2 = new greetMaker();
console.log(greeter2.greet());

类作为接口使用

//目前已废弃
class Point {
  x: number
  y: number
}
 
interface Point3D extends Point{
z: number
}

let point3d: Point3D = {x: 1 ,y: 2, z: 3}

2019-05-27  17:40:40


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
TypeScriptES6-Promise递归遍历文件夹中的文件发布时间:2022-07-18
下一篇:
TypeScript如何添加自定义d.ts文件(转)发布时间:2022-07-18
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap