TypeScript - Accessors

Customer Class

www.luv2code.com © luv2code LLC

Customer Class

Properties are private

www.luv2code.com © luv2code LLC

Customer Class

Properties are private

How to access?

www.luv2code.com © luv2code LLC

Getter / Setter Methods

www.luv2code.com © luv2code LLC

Getter / Setter Methods
• Since our properties are private, we need a way to access them

www.luv2code.com © luv2code LLC

Getter / Setter Methods
• Since our properties are private, we need a way to access them

• We can create traditional methods as in other OO languages:

www.luv2code.com © luv2code LLC

Getter / Setter Methods
• Since our properties are private, we need a way to access them

• We can create traditional methods as in other OO languages:

• Define getter/setter methods

www.luv2code.com © luv2code LLC

Getter / Setter Methods

www.luv2code.com © luv2code LLC

 Getter / Setter Methods
File: Customer.ts
class Customer {

private firstName: string;

private lastName: string;
… …

www.luv2code.com © luv2code LLC

 Getter / Setter Methods
File: Customer.ts
class Customer {

private firstName: string;

private lastName: string;
… …

public getFirstName(): string {

return this.firstName;
}

www.luv2code.com © luv2code LLC

 Getter / Setter Methods
File: Customer.ts
class Customer { Method name
private firstName: string;
private lastName: string;
… …

public getFirstName(): string {

return this.firstName;
}

www.luv2code.com © luv2code LLC

 Getter / Setter Methods
File: Customer.ts
class Customer { Method name
private firstName: string; Return type
private lastName: string;
… …

public getFirstName(): string {

return this.firstName;
}

www.luv2code.com © luv2code LLC

 Getter / Setter Methods
File: Customer.ts
class Customer {

private firstName: string;

private lastName: string;
… …

public getFirstName(): string {

return this.firstName;
}

public setFirstName(theFirst: string): void {

this.firstName = theFirst;
}
}

www.luv2code.com © luv2code LLC

 Getter / Setter Methods
File: Customer.ts
class Customer {

private firstName: string;

private lastName: string;
… …
Method name
public getFirstName(): string {
return this.firstName;
}

public setFirstName(theFirst: string): void {

this.firstName = theFirst;
}
}

www.luv2code.com © luv2code LLC

 Getter / Setter Methods
File: Customer.ts
class Customer {

private firstName: string;

private lastName: string;
… …
Method name Param type
public getFirstName(): string {
return this.firstName;
}

public setFirstName(theFirst: string): void {

this.firstName = theFirst;
}
}

www.luv2code.com © luv2code LLC

 Getter / Setter Methods
File: Customer.ts
class Customer {

private firstName: string;

private lastName: string;
… …
Method name Param type
public getFirstName(): string {
Return type
return this.firstName;
}

public setFirstName(theFirst: string): void {

this.firstName = theFirst;
}
}

www.luv2code.com © luv2code LLC

 Getter / Setter Methods
File: Customer.ts
class Customer {

private firstName: string;

private lastName: string;
… …

public getFirstName(): string {

return this.firstName;
}

public setFirstName(theFirst: string): void {

this.firstName = theFirst;
}
}

www.luv2code.com © luv2code LLC

 Getter / Setter Methods
File: Customer.ts
class Customer {

private firstName: string;

private lastName: string;
… …

public getFirstName(): string {

return this.firstName;
}

public setFirstName(theFirst: string): void {

this.firstName = theFirst;
}
} // now let's use it
let myCustomer = new Customer("Martin", "Dixon");

www.luv2code.com © luv2code LLC

 Getter / Setter Methods
File: Customer.ts
class Customer {

private firstName: string;

private lastName: string;
… …

public getFirstName(): string {

return this.firstName;
}

public setFirstName(theFirst: string): void {

this.firstName = theFirst;
}
} // now let's use it
let myCustomer = new Customer("Martin", "Dixon");

myCustomer.setFirstName("Greg");

www.luv2code.com © luv2code LLC

 Getter / Setter Methods
File: Customer.ts
class Customer {

private firstName: string;

private lastName: string;
… …

public getFirstName(): string {

return this.firstName;
}

public setFirstName(theFirst: string): void {

this.firstName = theFirst;
}
} // now let's use it
let myCustomer = new Customer("Martin", "Dixon");

myCustomer.setFirstName("Greg");
console.log(myCustomer.getFirstName());

www.luv2code.com © luv2code LLC

TypeScript: Accessors - Get / Set

www.luv2code.com © luv2code LLC

TypeScript: Accessors - Get / Set
• TypeScript also offers an alternate syntax

www.luv2code.com © luv2code LLC

TypeScript: Accessors - Get / Set
• TypeScript also offers an alternate syntax

• Define special: get / set methods

www.luv2code.com © luv2code LLC

TypeScript: Accessors - Get / Set
• TypeScript also offers an alternate syntax

• Define special: get / set methods

• Known as Accessors

www.luv2code.com © luv2code LLC

TypeScript: Accessors - Get / Set

www.luv2code.com © luv2code LLC

 TypeScript: Accessors - Get / Set
File: Customer.ts
Can give any property name
Some TypeScript developers use leading "_"
class Customer {

private _firstName: string;

private _lastName: string;
… …

www.luv2code.com © luv2code LLC

 TypeScript: Accessors - Get / Set
File: Customer.ts
Can give any property name
Some TypeScript developers use leading "_"
class Customer {

private _firstName: string;

private _lastName: string;
… …

Nothing special about "_"

No special magic
Just a convention

www.luv2code.com © luv2code LLC

 TypeScript: Accessors - Get / Set
File: Customer.ts
class Customer { Note the syntax:
get <space> property()
private _firstName: string;
private _lastName: string;
… …

public get firstName(): string {

return this._firstName;
}

www.luv2code.com © luv2code LLC

 TypeScript: Accessors - Get / Set
File: Customer.ts
class Customer {

private _firstName: string;

private _lastName: string;
… … Note the syntax:
set <space> property(…)
public get firstName(): string {
return this._firstName;
}

public set firstName(value: string) {

this._firstName = value;
}
}

www.luv2code.com © luv2code LLC

 TypeScript: Accessors - Get / Set
File: Customer.ts
class Customer {

private _firstName: string;

private _lastName: string;
… … Note the syntax:
set <space> property(…)
public get firstName(): string {
return this._firstName;
}

public set firstName(value: string) {

this._firstName = value;
}
}
No return type … not even "void"

www.luv2code.com © luv2code LLC

 TypeScript: Accessors - Get / Set
File: Customer.ts // now let's use it
class Customer { let myCustomer = new Customer("Martin", "Dixon");

private _firstName: string;

private _lastName: string;
… …

public get firstName(): string {

return this._firstName;
}

public set firstName(value: string) {

this._firstName = value;
}
}

www.luv2code.com © luv2code LLC

 TypeScript: Accessors - Get / Set
File: Customer.ts // now let's use it
class Customer { let myCustomer = new Customer("Martin", "Dixon");

private _firstName: string; myCustomer.firstName = "Susan";

private _lastName: string;
… …

public get firstName(): string {

Calls the "set" accessor
return this._firstName; since we are
} assigning a value
public set firstName(value: string) {
this._firstName = value;
}
}

www.luv2code.com © luv2code LLC

 TypeScript: Accessors - Get / Set
Calls the "get"
File: Customer.ts
accessor
// now let's use it
since
class Customer {
we are let myCustomer = new Customer("Martin", "Dixon");
accessing a value
private _firstName: string; myCustomer.firstName = "Susan";
private _lastName: string; console.log(myCustomer.firstName);
… …

public get firstName(): string {

Calls the "set" accessor
return this._firstName; since we are
} assigning a value
public set firstName(value: string) {
this._firstName = value;
}
}

www.luv2code.com © luv2code LLC

 TypeScript: Accessors - GetCode
/ Set
outside of the class is NOT
accessing internal properties directly
Calls the "get"
File: Customer.ts
accessor
// now let's use it
since
class Customer {
we are let myCustomer = new Customer("Martin", "Dixon");
accessing a value
private _firstName: string; myCustomer.firstName = "Susan";
private _lastName: string; console.log(myCustomer.firstName);
… …

public get firstName(): string {

Calls the "set" accessor
return this._firstName; since we are
} assigning a value
public set firstName(value: string) {
this._firstName = value;
}
}

www.luv2code.com © luv2code LLC

 TypeScript: Accessors - Get / Set
File: Customer.ts // now let's use it
class Customer { let myCustomer = new Customer("Martin", "Dixon");

private x: string; myCustomer.firstName = "Susan";

private y: string; console.log(myCustomer.firstName);
… …

public get firstName(): string {

return this.x;
}

public set firstName(value: string) {

this.x = value;
}
}

www.luv2code.com © luv2code LLC

 TypeScript: Accessors - Get / Set
Can give any internal name
File: Customer.ts // now let's use it
class Customer { let myCustomer = new Customer("Martin", "Dixon");

private x: string; myCustomer.firstName = "Susan";

private y: string; console.log(myCustomer.firstName);
… …

public get firstName(): string {

return this.x;
}

public set firstName(value: string) {

this.x = value;
}
}

www.luv2code.com © luv2code LLC

 TypeScript: Accessors - Get / Set
Can give any internal name
File: Customer.ts // now let's use it
class Customer { let myCustomer = new Customer("Martin", "Dixon");

private x: string; myCustomer.firstName = "Susan";

private y: string; console.log(myCustomer.firstName);
… …

public get firstName(): string {

return this.x;
}

public set firstName(value: string) { The public get/set accessors

this.x = value; are still called accordingly
}
}

www.luv2code.com © luv2code LLC

 TypeScript: Accessors - Get / Set
File: Customer.ts
class Customer {

private _firstName: string;

private _lastName: string;
… …

get firstName(): string {

return this._firstName;
}

set firstName(value: string) {

this._firstName = value;
}
}

www.luv2code.com © luv2code LLC

 TypeScript: Accessors - Get / Set
File: Customer.ts
class Customer {

private _firstName: string;

private _lastName: string; Renamed to the original names
… … from previous slides
get firstName(): string {
return this._firstName;
}

set firstName(value: string) {

this._firstName = value;
}
}

www.luv2code.com © luv2code LLC

 TypeScript: Accessors - Get / Set
Removed “public” on the accessors.
File: Customer.ts
If no access modifier given, “public” by default
class Customer {

private _firstName: string;

private _lastName: string;
… …

get firstName(): string {

return this._firstName;
}

set firstName(value: string) {

this._firstName = value;
}
}

www.luv2code.com © luv2code LLC

Compiler flag

www.luv2code.com © luv2code LLC

Compiler flag
• The get/set accessors feature is only supported in ES5 and higher

www.luv2code.com © luv2code LLC

Compiler flag
• The get/set accessors feature is only supported in ES5 and higher

• You have to set a compiler flag in order to compile the code

www.luv2code.com © luv2code LLC

Compiler flag
• The get/set accessors feature is only supported in ES5 and higher

• You have to set a compiler flag in order to compile the code

C:\> tsc --target ES5 --noEmitOnError Customer.ts

Compiler flag

www.luv2code.com © luv2code LLC

Problem with too many compiler flag

www.luv2code.com © luv2code LLC

Problem with too many compiler flag

• You may have noticed, that we have a lot of compiler flags

www.luv2code.com © luv2code LLC

Problem with too many compiler flag

• You may have noticed, that we have a lot of compiler flags

• Too much stuff to remember … easy to forget

www.luv2code.com © luv2code LLC

Problem with too many compiler flag

• You may have noticed, that we have a lot of compiler flags

• Too much stuff to remember … easy to forget

• Wouldn't it be great to set this up in a config file?

www.luv2code.com © luv2code LLC

Problem with too many compiler flag

• You may have noticed, that we have a lot of compiler flags

• Too much stuff to remember … easy to forget

• Wouldn't it be great to set this up in a config file?

• TypeScript has a solution: tsconfig.json file

www.luv2code.com © luv2code LLC

tsconfig.json

www.luv2code.com © luv2code LLC

tsconfig.json
• tsconfig.json file defines compiler options and project settings

www.luv2code.com © luv2code LLC

tsconfig.json
• tsconfig.json file defines compiler options and project settings

• Place this file in the root of your project directory

www.luv2code.com © luv2code LLC

tsconfig.json
• tsconfig.json file defines compiler options and project settings

• Place this file in the root of your project directory

File: tsconfig.json

{
"compilerOptions": {
"noEmitOnError": true,
"target": "es5"
}
}

www.luv2code.com © luv2code LLC

tsconfig.json

www.luv2code.com © luv2code LLC

tsconfig.json
• You can also generate a template for this file

www.luv2code.com © luv2code LLC

tsconfig.json
• You can also generate a template for this file

C:\> tsc --init

www.luv2code.com © luv2code LLC

tsconfig.json
• You can also generate a template for this file

C:\> tsc --init Generates a default

tsconfig.json file

www.luv2code.com © luv2code LLC

tsconfig.json
• You can also generate a template for this file

C:\> tsc --init Generates a default

tsconfig.json file

• Then edit the tsconfig.json accordingly for your project requirements

www.luv2code.com © luv2code LLC

Compiling your Project

www.luv2code.com © luv2code LLC

Compiling your Project
• Once your project has a tsconfig.json file, then you can compile with

www.luv2code.com © luv2code LLC

Compiling your Project
• Once your project has a tsconfig.json file, then you can compile with

C:\> tsc

www.luv2code.com © luv2code LLC

Compiling your Project
• Once your project has a tsconfig.json file, then you can compile with

C:\> tsc

No need to give names of TypeScript files.

By default, will compile all *.ts files

www.luv2code.com © luv2code LLC

Compiling your Project
• Once your project has a tsconfig.json file, then you can compile with

C:\> tsc

No need to give names of TypeScript files.

By default, will compile all *.ts files

www.luv2code.com/tsconfig-docs

www.luv2code.com © luv2code LLC

TypeScript: Accessors - Get / Set

www.luv2code.com © luv2code LLC

 TypeScript: Accessors - Get / Set
File: Customer.ts
class Customer {

private _firstName: string;

private _lastName: string;
… …

get firstName(): string {

return this._firstName;
}

set firstName(value: string) {

this._firstName = value;
}
}

www.luv2code.com © luv2code LLC

 TypeScript: Accessors - Get / Set
File: Customer.ts
class Customer {

private _firstName: string;

// now let's use it
private _lastName: string;
let myCustomer = new Customer("Martin", "Dixon");
… …

get firstName(): string { myCustomer.firstName = "Susan";

return this._firstName; console.log(myCustomer.firstName);
}

set firstName(value: string) {

this._firstName = value;
}
}

www.luv2code.com © luv2code LLC