获取和设置Typescript的例子|Typescript封装

142 阅读2分钟

在这篇博文中,我们将学习Typecript中的get和set Accessor方法或Encapsulation。

封装在Typescript中是如何工作的?

它是面向对象编程的概念之一。其他概念包括接口多态性抽象类

每个类或对象都包含两件事

  • 用于存储数据的成员变量或属性
  • 操作数据或变量或属性的函数/方法代码。

数据被保护起来,不受外界影响,因此不能直接访问,但可以通过方法/函数代码访问。这些方法或函数被称为settergetter

这使得开发者可以在特定的入口处访问数据,并且在发生任何错误时都可以轻松地调试代码。

Typescript使用set和get访问器方法提供了封装功能:

  • 将成员变量定义为私有关键字
  • 为更新和读取成员变量声明公开的set和get方法

由于typescript是静态类型检查,在编译成javascript时没有代码产生。

如何使用编译器目标选项启用设置器和获取器?

typescript编译器默认不支持setters和getters访问器。

要启用这一点,我们需要修改typecript编译器的选项,以ES5为目标。否则就会出现 "错误 TS1056: Accessors只有在针对ECMAScript 5和更高版本时才可用。"被抛出。

tsc命令配置
你已经为tsc命令工具提供了编译器选项

tsc --target ES5  

更新tsconfig.json的目标选项
在Angular应用程序中,为了支持set和get访问器语法,我们必须修改tsconfig.json的compilerOptions - target - es5

{  
    "compilerOptions": {  
        "target": "es5"  
  ........  
  }  
}  

类型脚本封装实例

这里Employee对象的名字被设置为private,Private修改器属性只允许在类内部访问,外部无法访问。为了简单起见,我们为名字提供了getter/setter方法,并添加了public access修饰符来访问/操纵类外。
这是一个设置 和获取访问器方法的例子

export class Employee {  
  
    private _name: string;  
   
    constructor() {  
   
    }  
   
    public get name(): string {  
        return this._name;  
    }  
   
    public set name(val: string) {  
            this._name= val;  
    }  
}  
export default Employee;  

优点

  • 数据被隐藏起来,并使数据可以通过get和set访问器方法被访问。
  • 在检查属性变量数据的正确性时,非常容易进行调试。

Typescript接口的set和get访问器方法

Typescript不直接支持接口中的setter/getters方法。我们必须使用一种不同的语法。接口只需要提供成员变量,并没有为这些属性提供实现。实现类使用setter和getter来访问成员变量。

  
interface MyInterface {  
    name: string;  
}  
  
class MyClass implements MyInterface {  
    private name: string="Kiran";  
  
    public get name() {  
        return this._name;  
    }  
  
    public set name(value: string) {  
        this._name = value;  
    }  
}  
  
var myClass = new MyClass();  
console.log(myClass.name);  

Typescript setter和getter的命名规则

  • setter和getter不应该有复杂的逻辑
  • get和set的后缀应该有一个相同的名字
  • get和set是typecript中的保留关键字。