TypeScript - Accessors
Customer Class
[Link] © luv2code LLC
Customer Class
Properties are private
[Link] © luv2code LLC
Customer Class
Properties are private
How to access?
[Link] © luv2code LLC
Getter / Setter Methods
[Link] © luv2code LLC
Getter / Setter Methods
• Since our properties are private, we need a way to access them
[Link] © 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:
[Link] © 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
[Link] © luv2code LLC
Getter / Setter Methods
[Link] © luv2code LLC
Getter / Setter Methods
File: [Link]
class Customer {
private firstName: string;
private lastName: string;
… …
[Link] © luv2code LLC
Getter / Setter Methods
File: [Link]
class Customer {
private firstName: string;
private lastName: string;
… …
public getFirstName(): string {
return [Link];
}
[Link] © luv2code LLC
Getter / Setter Methods
File: [Link]
class Customer { Method name
private firstName: string;
private lastName: string;
… …
public getFirstName(): string {
return [Link];
}
[Link] © luv2code LLC
Getter / Setter Methods
File: [Link]
class Customer { Method name
private firstName: string; Return type
private lastName: string;
… …
public getFirstName(): string {
return [Link];
}
[Link] © luv2code LLC
Getter / Setter Methods
File: [Link]
class Customer {
private firstName: string;
private lastName: string;
… …
public getFirstName(): string {
return [Link];
}
public setFirstName(theFirst: string): void {
[Link] = theFirst;
}
}
[Link] © luv2code LLC
Getter / Setter Methods
File: [Link]
class Customer {
private firstName: string;
private lastName: string;
… …
Method name
public getFirstName(): string {
return [Link];
}
public setFirstName(theFirst: string): void {
[Link] = theFirst;
}
}
[Link] © luv2code LLC
Getter / Setter Methods
File: [Link]
class Customer {
private firstName: string;
private lastName: string;
… …
Method name Param type
public getFirstName(): string {
return [Link];
}
public setFirstName(theFirst: string): void {
[Link] = theFirst;
}
}
[Link] © luv2code LLC
Getter / Setter Methods
File: [Link]
class Customer {
private firstName: string;
private lastName: string;
… …
Method name Param type
public getFirstName(): string {
Return type
return [Link];
}
public setFirstName(theFirst: string): void {
[Link] = theFirst;
}
}
[Link] © luv2code LLC
Getter / Setter Methods
File: [Link]
class Customer {
private firstName: string;
private lastName: string;
… …
public getFirstName(): string {
return [Link];
}
public setFirstName(theFirst: string): void {
[Link] = theFirst;
}
}
[Link] © luv2code LLC
Getter / Setter Methods
File: [Link]
class Customer {
private firstName: string;
private lastName: string;
… …
public getFirstName(): string {
return [Link];
}
public setFirstName(theFirst: string): void {
[Link] = theFirst;
}
} // now let's use it
let myCustomer = new Customer("Martin", "Dixon");
[Link] © luv2code LLC
Getter / Setter Methods
File: [Link]
class Customer {
private firstName: string;
private lastName: string;
… …
public getFirstName(): string {
return [Link];
}
public setFirstName(theFirst: string): void {
[Link] = theFirst;
}
} // now let's use it
let myCustomer = new Customer("Martin", "Dixon");
[Link]("Greg");
[Link] © luv2code LLC
Getter / Setter Methods
File: [Link]
class Customer {
private firstName: string;
private lastName: string;
… …
public getFirstName(): string {
return [Link];
}
public setFirstName(theFirst: string): void {
[Link] = theFirst;
}
} // now let's use it
let myCustomer = new Customer("Martin", "Dixon");
[Link]("Greg");
[Link]([Link]());
[Link] © luv2code LLC
TypeScript: Accessors - Get / Set
[Link] © luv2code LLC
TypeScript: Accessors - Get / Set
• TypeScript also offers an alternate syntax
[Link] © luv2code LLC
TypeScript: Accessors - Get / Set
• TypeScript also offers an alternate syntax
• Define special: get / set methods
[Link] © luv2code LLC
TypeScript: Accessors - Get / Set
• TypeScript also offers an alternate syntax
• Define special: get / set methods
• Known as Accessors
[Link] © luv2code LLC
TypeScript: Accessors - Get / Set
[Link] © luv2code LLC
TypeScript: Accessors - Get / Set
File: [Link]
Can give any property name
Some TypeScript developers use leading "_"
class Customer {
private _firstName: string;
private _lastName: string;
… …
[Link] © luv2code LLC
TypeScript: Accessors - Get / Set
File: [Link]
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
[Link] © luv2code LLC
TypeScript: Accessors - Get / Set
File: [Link]
class Customer { Note the syntax:
get <space> property()
private _firstName: string;
private _lastName: string;
… …
public get firstName(): string {
return this._firstName;
}
[Link] © luv2code LLC
TypeScript: Accessors - Get / Set
File: [Link]
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;
}
}
[Link] © luv2code LLC
TypeScript: Accessors - Get / Set
File: [Link]
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"
[Link] © luv2code LLC
TypeScript: Accessors - Get / Set
File: [Link] // 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;
}
}
[Link] © luv2code LLC
TypeScript: Accessors - Get / Set
File: [Link] // now let's use it
class Customer { let myCustomer = new Customer("Martin", "Dixon");
private _firstName: string; [Link] = "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;
}
}
[Link] © luv2code LLC
TypeScript: Accessors - Get / Set
Calls the "get"
File: [Link]
accessor
// now let's use it
since
class Customer {
we are let myCustomer = new Customer("Martin", "Dixon");
accessing a value
private _firstName: string; [Link] = "Susan";
private _lastName: string; [Link]([Link]);
… …
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;
}
}
[Link] © luv2code LLC
TypeScript: Accessors - GetCode
/ Set
outside of the class is NOT
accessing internal properties directly
Calls the "get"
File: [Link]
accessor
// now let's use it
since
class Customer {
we are let myCustomer = new Customer("Martin", "Dixon");
accessing a value
private _firstName: string; [Link] = "Susan";
private _lastName: string; [Link]([Link]);
… …
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;
}
}
[Link] © luv2code LLC
TypeScript: Accessors - Get / Set
File: [Link] // now let's use it
class Customer { let myCustomer = new Customer("Martin", "Dixon");
private x: string; [Link] = "Susan";
private y: string; [Link]([Link]);
… …
public get firstName(): string {
return this.x;
}
public set firstName(value: string) {
this.x = value;
}
}
[Link] © luv2code LLC
TypeScript: Accessors - Get / Set
Can give any internal name
File: [Link] // now let's use it
class Customer { let myCustomer = new Customer("Martin", "Dixon");
private x: string; [Link] = "Susan";
private y: string; [Link]([Link]);
… …
public get firstName(): string {
return this.x;
}
public set firstName(value: string) {
this.x = value;
}
}
[Link] © luv2code LLC
TypeScript: Accessors - Get / Set
Can give any internal name
File: [Link] // now let's use it
class Customer { let myCustomer = new Customer("Martin", "Dixon");
private x: string; [Link] = "Susan";
private y: string; [Link]([Link]);
… …
public get firstName(): string {
return this.x;
}
public set firstName(value: string) { The public get/set accessors
this.x = value; are still called accordingly
}
}
[Link] © luv2code LLC
TypeScript: Accessors - Get / Set
File: [Link]
class Customer {
private _firstName: string;
private _lastName: string;
… …
get firstName(): string {
return this._firstName;
}
set firstName(value: string) {
this._firstName = value;
}
}
[Link] © luv2code LLC
TypeScript: Accessors - Get / Set
File: [Link]
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;
}
}
[Link] © luv2code LLC
TypeScript: Accessors - Get / Set
Removed “public” on the accessors.
File: [Link]
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;
}
}
[Link] © luv2code LLC
Compiler flag
[Link] © luv2code LLC
Compiler flag
• The get/set accessors feature is only supported in ES5 and higher
[Link] © 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
[Link] © 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 [Link]
Compiler flag
[Link] © luv2code LLC
Problem with too many compiler flag
[Link] © luv2code LLC
Problem with too many compiler flag
• You may have noticed, that we have a lot of compiler flags
[Link] © 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
[Link] © 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?
[Link] © 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: [Link] file
[Link] © luv2code LLC
[Link]
[Link] © luv2code LLC
[Link]
• [Link] file defines compiler options and project settings
[Link] © luv2code LLC
[Link]
• [Link] file defines compiler options and project settings
• Place this file in the root of your project directory
[Link] © luv2code LLC
[Link]
• [Link] file defines compiler options and project settings
• Place this file in the root of your project directory
File: [Link]
{
"compilerOptions": {
"noEmitOnError": true,
"target": "es5"
}
}
[Link] © luv2code LLC
[Link]
[Link] © luv2code LLC
[Link]
• You can also generate a template for this file
[Link] © luv2code LLC
[Link]
• You can also generate a template for this file
C:\> tsc --init
[Link] © luv2code LLC
[Link]
• You can also generate a template for this file
C:\> tsc --init Generates a default
[Link] file
[Link] © luv2code LLC
[Link]
• You can also generate a template for this file
C:\> tsc --init Generates a default
[Link] file
• Then edit the [Link] accordingly for your project requirements
[Link] © luv2code LLC
Compiling your Project
[Link] © luv2code LLC
Compiling your Project
• Once your project has a [Link] file, then you can compile with
[Link] © luv2code LLC
Compiling your Project
• Once your project has a [Link] file, then you can compile with
C:\> tsc
[Link] © luv2code LLC
Compiling your Project
• Once your project has a [Link] file, then you can compile with
C:\> tsc
No need to give names of TypeScript files.
By default, will compile all *.ts files
[Link] © luv2code LLC
Compiling your Project
• Once your project has a [Link] file, then you can compile with
C:\> tsc
No need to give names of TypeScript files.
By default, will compile all *.ts files
[Link]/tsconfig-docs
[Link] © luv2code LLC
TypeScript: Accessors - Get / Set
[Link] © luv2code LLC
TypeScript: Accessors - Get / Set
File: [Link]
class Customer {
private _firstName: string;
private _lastName: string;
… …
get firstName(): string {
return this._firstName;
}
set firstName(value: string) {
this._firstName = value;
}
}
[Link] © luv2code LLC
TypeScript: Accessors - Get / Set
File: [Link]
class Customer {
private _firstName: string;
// now let's use it
private _lastName: string;
let myCustomer = new Customer("Martin", "Dixon");
… …
get firstName(): string { [Link] = "Susan";
return this._firstName; [Link]([Link]);
}
set firstName(value: string) {
this._firstName = value;
}
}
[Link] © luv2code LLC
