Eigenschaften in TypeScript

Was ist Feld?
Private, Protected & Public Fields
Was ist Property?
Getter
Setter

1. Was ist Feld?

In dieser Lektion besprechen wir Eigenschaften in TypeScript. Bevor wir jedoch auf den Hauptinhalt eingehen, müssen wir den Begriff der Felder klären.

Ein Feld ist eine direkt in einer Klasse deklarierte Variable.

Lesen Sie den Artikel über Konstruktoren, um zu verstehen, wie TypeScript Feldern Werte zuweist:
Konstruktoren in TypeScript

Wenn Sie in der TypeScript-Sprache auf ein Feld zugreifen können, können Sie seinen Wert abrufen und einen neuen Wert dafür festlegen. Zum Beispiel:

field_ex1.ts

class Person {
    name: string;
    gender: string;
    country?: string; // Allow null value.
    // Constructor
    constructor(name: string, gender: string, country?: string) {
        this.name = name;
        this.gender = gender;
        this.country = country;
    }
    // Method:
    selfIntroduce(): void {
        if (this.country) {
            console.log(`Hi, My name is ${this.name}, from ${this.country}`);
        } else {
            console.log(`Hi, My name is ${this.name}`);
        }
    }
}
function field_ex1_test() {
    var emma: Person = new Person('Emma', 'Female', 'USA'); // Create an object
    emma.selfIntroduce(); // Call method.

    var name = emma.name; // get the value of a field
    console.log(`emma.name: ${name}`);
    console.log(`emma.gender: ${emma.gender}`);
    console.log(`emma.country: ${emma.country}`);

    console.log(` --- Set new value to country field ---: `);
    emma.country = 'Canada'; // set new value to a field
    console.log(`emma.country: ${emma.country}`);
}  
// Call the function.
field_ex1_test();

Output:

Hi, My name is Emma, from USA
emma.name: Emma
emma.gender: Female
emma.country: USA
 --- Set new value to country field ---:
emma.country: Canada

2. Private, Protected & Public Fields

TypeScript älter als 3.8

TypeScript älter als 3.8 liefert noch nicht die Schlüsselwörter private, protected und public. Um ein private field zu haben, benennen Programmierer es mit einem Rautezeichen ( # ). Auf diese Felder kann nur innerhalb der Klasse zugegriffen werden, die sie definiert hat.

field_private_ex1.ts

class Foo {
    #bar: string;

    constructor(bar: string) {
        this.#bar = bar;
    }
}
function field_private_ex1_test() {
    var foo: Foo = new Foo('Bar'); // Create an object

    foo.#bar; // Compile Error!!!!!!
}

TypeScript 3.8+

Ab Version 3.8 unterstützt TypeScript die Schlüsselwörter private, protected und public in einer Felddeklaration.

class Class_Name  {
   private field1: string;
   protected field2 : string;
   public field3 : string;
   field4 : string; // Default =  public
}

Modifier	Description
private	Auf das Feld kann nur innerhalb der Klasse zugegriffen werden, die es definiert.
protected	Auf das Feld kann in der Klasse zugegriffen werden, die es definiert, oder in Unterklassen.
public	Auf das Feld kann überall zugegriffen werden.

Im folgenden Beispiel wird ein Feld mit dem Schlüsselwort private deklariert, auf das außerhalb der Klasse, die es definiert hat, nicht zugegriffen werden kann.

field_private_ex2.ts

class Bar {
    private foo: string;

    constructor(foo: string) {
        this.foo = foo;
    }
}
function field_private_ex2_test() {
    var bar: Bar = new Bar('Foo'); // Create an object

    bar.foo; // Compile Error!!!!!!
}

3. Was ist Property?

Grundsätzlich können Sie, sobald Sie irgendwo Zugriff auf ein Feld haben, seinen Wert abrufen und ihm einen neuen Wert zuweisen

Property ist ein Konzept ähnlich einem Feld, aber er hat die weitere Besonderheiten. Die Property ist in 3 Typen unterteilt:

Read-only Property: Erlaubt den Zugriff auf seinen Wert, erlaubt jedoch nicht, einen neuen Wert dafür festzulegen.
Write-only Property: Ermöglicht es, einen neuen Wert dafür festzulegen. Der Versuch, auf diese Eigenschaft zuzugreifen, erhält jedoch einen Wert undefined.
Read/Write Property: Ermöglicht den Zugriff auf den aktuellen Wert und setzt einen neuen Wert dafür.

Gemäß der Designidee von TypeScript sollten Sie alle Felder in der Klasse mit dem Schlüsselwort private deklarieren und Property verwenden, um die Rolle von Feldern bei der Kommunikation mit der Außenwelt zu ersetzen

4. Getter

Mit der Getter - Syntax können Sie eine Eigenschaft definieren, die den Zugriff auf ihren Wert ermöglicht, aber keinen neuen Wert dafür festlegen kann, es sei denn, Sie definieren auch einen Setter für diese Eigenschaft.

Die Syntax:

get property_name(): data_type {
     // code ...
     return a_value;
}
// Or:
[private, protected, public] get property_name(): data_type {
     // code ...
     return a_value;
}

Beispiel: Die folgende Klasse Employee erlaubt den Zugriff auf den Wert der Property empId, erlaubt jedoch nicht, den Wert dieser Eigenschaft zu ändern.

property_getter_ex1.ts

class Employee {
    private _empId: number; // Field
    empName: string; // Field
    dept?: string; // Field

    constructor(empId: number, empName: string, dept: string) {
        this._empId = empId;
        this.empName = empName;
        this.dept = dept;
    }
    // Getter
    get empId(): number { // Property - empId
        return this._empId;
    }
    // Method:
    showInfo(): void {
        if (this.dept) {
            console.log(`Emp ID: ${this._empId}, Emp Name: ${this.empName}, Dept: ${this.dept}`);
        } else {
            console.log(`Emp ID:  ${this._empId}, Emp Name: ${this.empName}`);
        }
    }
}
function property_getter_ex1_test() {
    var tom: Employee = new Employee(2, "Tom", "IT");  // Create an object
    tom.showInfo(); // Call method.

    var empId = tom.empId; // get the value of a property
    console.log(`empId: ${empId}`);

    // Can not set new value to property - empId
    tom.empId = 2; // Compile Error!!!!!!!!!!!!!!!!!!!
}
// Call the function
property_getter_ex1_test();

Sie können das Schlüsselwort private, protected oder public in der Getter-Definition verwenden.

// Getter
protected get empId(): number { // Property - empId
  return this._empId;
}

5. Setter

Mit der Setter Syntax können Sie eine Property definieren und ihr einen neuen Wert zuweisen. Ohne den Getter erhält der Versuch, auf diese Eigenschaft zuzugreifen, jedoch einen Wert underfined.

Die Syntax:

set property_name(new_value: data_type) {
     // code ...
}
// Or:
[private, protected, public] set property_name(new_value: data_type) {
     // code ...
}

Beispiel: Die Klasse Staff hat einen Setter, aber keinen Getter für die Property salary. Wenn Sie versuchen, auf den Wert von salary zuzugreifen, meldet der Compiler keinen Fehler, aber der Wert ist undefined.

property_setter_ex1.ts

class Staff {
    private _staffId: number; // Field
    staffName: string; // Field
    private _salary?: number; // Field

    constructor(staffId: number, staffName: string, salary: number) {
        this._staffId = staffId;
        this.staffName = staffName;
        this._salary = salary;
    }
    // Getter
    get staffId(): number { // Property - staffId
        return this._staffId;
    }
    // Setter
    set salary(salary: number) {
        this._salary = salary;
    }
    showInfo()  {
        console.log(`ID: ${this._staffId}, Name: ${this.staffName}, Salary: ${this._salary}`)
    }
}
function property_setter_ex1_test() {
    var tom: Staff = new Staff(2, "Tom", 2000);  // Create an object

    tom.showInfo();
    tom.salary = 3000; // Set new value to salary property
    tom.showInfo();
 
    // Try to access to 'salary' property of Staff class
    console.log(" --- Try to access to 'salary' property of Staff class --- ");
    var s = tom.salary; // No problem at Compile Time (!!!!!!!!!!!)
    console.log(`tom.salary = ${s}`); // underfined (!!!!!!!!!!!!!!!)
}
// Call the function
property_setter_ex1_test();