Scribd
Upload
7 views51 pages

01 Typescript Classes Overview

The document provides a comprehensive guide on creating classes in TypeScript, specifically focusing on the 'Customer' class. It covers the basic structure, properties, constructors, and access modifiers, along with examples of instantiating the class and handling private properties. Additionally, it highlights the importance of using the '--noEmitOnError' flag to prevent generating JavaScript files when there are compilation errors.

Uploaded by

montadhr.social
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
7 views51 pages

01 Typescript Classes Overview

The document provides a comprehensive guide on creating classes in TypeScript, specifically focusing on the 'Customer' class. It covers the basic structure, properties, constructors, and access modifiers, along with examples of instantiating the class and handling private properties. Additionally, it highlights the importance of using the '--noEmitOnError' flag to prevent generating JavaScript files when there are compilation errors.

Uploaded by

montadhr.social
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 51

TypeScript - Creating Classes

Customer Class

www.luv2code.com © luv2code LLC


Basic Structure

www.luv2code.com © luv2code LLC


Basic Structure

class Customer {

// properties

// constructors

// getter / setter methods

www.luv2code.com © luv2code LLC


Basic Structure
File: Customer.ts

class Customer {

// properties

// constructors

// getter / setter methods

www.luv2code.com © luv2code LLC


Basic Structure
File: Customer.ts
Can use any file name: *.ts
class Customer {
mydemo.ts
// properties

// constructors

// getter / setter methods

www.luv2code.com © luv2code LLC


Properties
File: Customer.ts

class Customer {

// properties
firstName: string;
lastName: string;

www.luv2code.com © luv2code LLC


Properties
File: Customer.ts

class Customer {

// properties
firstName: string;
lastName: string;

www.luv2code.com © luv2code LLC


Properties
File: Customer.ts

class Customer {
Properties are
// properties
firstName: string; public by default
lastName: string;

www.luv2code.com © luv2code LLC


Properties
File: Customer.ts

class Customer {
Properties are
// properties
firstName: string; public by default
lastName: string;

}
We'll cover access
modifiers shortly

www.luv2code.com © luv2code LLC


Construct an Instance
File: Customer.ts
class Customer {

// properties
firstName: string;
lastName: string;

// now let's use it


let myCustomer = new Customer();

myCustomer.firstName = "Martin";
myCustomer.lastName = "Dixon";

console.log(myCustomer.firstName);
console.log(myCustomer.lastName);

www.luv2code.com © luv2code LLC


Construct an Instance
File: Customer.ts
class Customer {

// properties
firstName: string;
lastName: string;

// now let's use it


let myCustomer = new Customer();

myCustomer.firstName = "Martin";
myCustomer.lastName = "Dixon";

console.log(myCustomer.firstName);
console.log(myCustomer.lastName);

www.luv2code.com © luv2code LLC


Construct an Instance
File: Customer.ts
class Customer { Construct an instance
// properties using the
firstName: string;
lastName: string; "new" keyword
}

// now let's use it


let myCustomer = new Customer();

myCustomer.firstName = "Martin";
myCustomer.lastName = "Dixon";

console.log(myCustomer.firstName);
console.log(myCustomer.lastName);

www.luv2code.com © luv2code LLC


Construct an Instance
File: Customer.ts
class Customer { Construct an instance
// properties using the
firstName: string;
lastName: string; "new" keyword
}

// now let's use it


let myCustomer = new Customer();

myCustomer.firstName = "Martin";
myCustomer.lastName = "Dixon";

console.log(myCustomer.firstName);
console.log(myCustomer.lastName);

www.luv2code.com © luv2code LLC


Construct an Instance
File: Customer.ts
class Customer { Construct an instance
// properties using the
firstName: string;
lastName: string; "new" keyword
}

// now let's use it


let myCustomer = new Customer();

myCustomer.firstName = "Martin";
myCustomer.lastName = "Dixon";

console.log(myCustomer.firstName);
console.log(myCustomer.lastName);

www.luv2code.com © luv2code LLC


Construct an Instance
File: Customer.ts
class Customer { Construct an instance
// properties using the
firstName: string;
lastName: string; "new" keyword
}

// now let's use it C:\> tsc Customer.ts


let myCustomer = new Customer();

myCustomer.firstName = "Martin"; C:\> node Customer.js


myCustomer.lastName = "Dixon"; Martin
console.log(myCustomer.firstName); Dixon
console.log(myCustomer.lastName);

www.luv2code.com © luv2code LLC


Create a Constructor
File: Customer.ts

class Customer {

firstName: string;
lastName: string;

constructor(theFirst: string, theLast: string) {


this.firstName = theFirst;
this.lastName = theLast;
}
}

www.luv2code.com © luv2code LLC


Create a Constructor
File: Customer.ts

class Customer {

firstName: string;
lastName: string;

constructor(theFirst: string, theLast: string) {


this.firstName = theFirst;
this.lastName = theLast;
}
}

www.luv2code.com © luv2code LLC


Create a Constructor
Use the
File: Customer.ts

class Customer {
"constructor"
keyword
firstName: string;
lastName: string;

constructor(theFirst: string, theLast: string) {


this.firstName = theFirst;
this.lastName = theLast;
}
}

www.luv2code.com © luv2code LLC


Create a Constructor
Use the
File: Customer.ts

class Customer {
"constructor"
keyword
firstName: string;
lastName: string;

constructor(theFirst: string, theLast: string) {


this.firstName = theFirst;
this.lastName = theLast;
}
}
Must use "this"
to refer to properties defined in this class

www.luv2code.com © luv2code LLC


Construct an Instance
File: Customer.ts

class Customer {

firstName: string;
lastName: string;

constructor(theFirst: string, theLast: string) {


this.firstName = theFirst;
this.lastName = theLast;
}
}

// now let's use it


let myCustomer = new Customer("Martin", "Dixon");

console.log(myCustomer.firstName);
console.log(myCustomer.lastName);

www.luv2code.com © luv2code LLC


Construct an Instance
File: Customer.ts

class Customer {

firstName: string;
lastName: string;

constructor(theFirst: string, theLast: string) {


this.firstName = theFirst;
this.lastName = theLast;
}
}

// now let's use it


let myCustomer = new Customer("Martin", "Dixon");

console.log(myCustomer.firstName);
console.log(myCustomer.lastName);

www.luv2code.com © luv2code LLC


Construct an Instance
File: Customer.ts

class Customer {

firstName: string; Construct an instance


lastName: string; using our new
constructor(theFirst: string, theLast: string) { constructor
this.firstName = theFirst;
this.lastName = theLast;
}
}

// now let's use it


let myCustomer = new Customer("Martin", "Dixon");

console.log(myCustomer.firstName);
console.log(myCustomer.lastName);

www.luv2code.com © luv2code LLC


Construct an Instance
File: Customer.ts

class Customer {

firstName: string; Construct an instance


lastName: string; using our new
constructor(theFirst: string, theLast: string) { constructor
this.firstName = theFirst;
this.lastName = theLast;
}
}
C:\> tsc Customer.ts
// now let's use it
let myCustomer = new Customer("Martin", "Dixon");
C:\> node Customer.js
console.log(myCustomer.firstName); Martin
console.log(myCustomer.lastName);
Dixon

www.luv2code.com © luv2code LLC


Access Modifiers

www.luv2code.com © luv2code LLC


Access Modifiers

Modifier Definition

www.luv2code.com © luv2code LLC


Access Modifiers

Modifier Definition

public Property is accessible to all classes (default modifier)

www.luv2code.com © luv2code LLC


Access Modifiers

Modifier Definition

public Property is accessible to all classes (default modifier)

protected Property is only accessible in current class and subclasses

www.luv2code.com © luv2code LLC


Access Modifiers

Modifier Definition

public Property is accessible to all classes (default modifier)

protected Property is only accessible in current class and subclasses

private Property is only accessible in current class

www.luv2code.com © luv2code LLC


Mark the properties as "private"
File: Customer.ts

class Customer {

private firstName: string;


private lastName: string;

constructor(theFirst: string, theLast: string) {


this.firstName = theFirst;
this.lastName = theLast;
}
}

// now let's use it


let myCustomer = new Customer("Martin", "Dixon");

myCustomer.firstName = "Susan";
myCustomer.lastName = "Public";

console.log(myCustomer.firstName);
console.log(myCustomer.lastName);

www.luv2code.com © luv2code LLC


Mark the properties as "private"
File: Customer.ts

class Customer {

private firstName: string;


private lastName: string;

constructor(theFirst: string, theLast: string) {


this.firstName = theFirst;
this.lastName = theLast;
}
}

// now let's use it


let myCustomer = new Customer("Martin", "Dixon");
Compilation error
myCustomer.firstName = "Susan";
myCustomer.lastName = "Public";

console.log(myCustomer.firstName);
console.log(myCustomer.lastName);

www.luv2code.com © luv2code LLC


Mark the properties as "private"
File: Customer.ts

class Customer {

private firstName: string;


private lastName: string;

constructor(theFirst: string, theLast: string) {


this.firstName = theFirst;
this.lastName = theLast;
}
}

// now let's use it


let myCustomer = new Customer("Martin", "Dixon");
Compilation error
myCustomer.firstName = "Susan";
myCustomer.lastName = "Public";

console.log(myCustomer.firstName);
console.log(myCustomer.lastName);

www.luv2code.com © luv2code LLC


Compiling the Code

www.luv2code.com © luv2code LLC


Compiling the Code
C:\> tsc Customer.ts

Customer.ts:16:12 - error TS2341: Property 'firstName' is private and only


accessible within class 'Customer'.

16 myCustomer.firstName = "Susan";
…
…
…

www.luv2code.com © luv2code LLC


Compiling the Code
C:\> tsc Customer.ts

Customer.ts:16:12 - error TS2341: Property 'firstName' is private and only


accessible within class 'Customer'.

16 myCustomer.firstName = "Susan";
…
…
…

www.luv2code.com © luv2code LLC


Compiling the Code
C:\> tsc Customer.ts

Customer.ts:16:12 - error TS2341: Property 'firstName' is private and only


accessible within class 'Customer'.

16 myCustomer.firstName = "Susan";
…
…
…

www.luv2code.com © luv2code LLC


Compiling the Code
C:\> tsc Customer.ts

Customer.ts:16:12 - error TS2341: Property 'firstName' is private and only


accessible within class 'Customer'.

16 myCustomer.firstName = "Susan";
…
…
…

www.luv2code.com © luv2code LLC


Be Careful!!!!

www.luv2code.com © luv2code LLC


Be Careful!!!!
• Even though there are compilation errors …

www.luv2code.com © luv2code LLC


Be Careful!!!!
• Even though there are compilation errors …

• The TypeScript compiler will STILL generates a .js file! Yikes!!

www.luv2code.com © luv2code LLC


Be Careful!!!!
• Even though there are compilation errors …

• The TypeScript compiler will STILL generates a .js file! Yikes!!

C:\> tsc Customer.ts

Customer.ts:16:12 - error TS2341: Property 'firstName' is private and only


accessible within class 'Customer'.
…

www.luv2code.com © luv2code LLC


Be Careful!!!!
• Even though there are compilation errors …

• The TypeScript compiler will STILL generates a .js file! Yikes!!

C:\> tsc Customer.ts

Customer.ts:16:12 - error TS2341: Property 'firstName' is private and only


What???
accessible within class 'Customer'.
…

C:\> dir

Customer.js Customer.ts

www.luv2code.com © luv2code LLC


…. and the code will still run!

www.luv2code.com © luv2code LLC


…. and the code will still run!
C:\> tsc Customer.ts

Customer.ts:16:12 - error TS2341: Property 'firstName' is private and only


accessible within class 'Customer'.
…

C:\> dir

Customer.js Customer.ts

C:\> node Customer.js


Susan
Public

www.luv2code.com © luv2code LLC


…. and the code will still run!
C:\> tsc Customer.ts

Customer.ts:16:12 - error TS2341: Property 'firstName' is private and only


accessible within class 'Customer'.
…

C:\> dir

Customer.js Customer.ts

C:\> node Customer.js


Susan
Public

What???

www.luv2code.com © luv2code LLC


…. and the code will still run!
C:\> tsc Customer.ts

Customer.ts:16:12 - error TS2341: Property 'firstName' is private and only


accessible within class 'Customer'.
…

C:\> dir

Customer.js Customer.ts

C:\> node Customer.js


Susan
Public

What???

www.luv2code.com © luv2code LLC


We Can Prevent This!

www.luv2code.com © luv2code LLC


We Can Prevent This!

C:\> del Customer.js

C:\> tsc --noEmitOnError Customer.ts

Customer.ts:16:12 - error TS2341: Property 'firstName' is private and only


accessible within class 'Customer'.
…

C:\> dir

Customer.ts

www.luv2code.com © luv2code LLC


We Can Prevent This!
Remove previous .js file
C:\> del Customer.js

C:\> tsc --noEmitOnError Customer.ts

Customer.ts:16:12 - error TS2341: Property 'firstName' is private and only


accessible within class 'Customer'.
…

C:\> dir

Customer.ts

www.luv2code.com © luv2code LLC


We Can Prevent This!
Do not generate .js file
if there is a compilation error
C:\> del Customer.js

C:\> tsc --noEmitOnError Customer.ts

Customer.ts:16:12 - error TS2341: Property 'firstName' is private and only


accessible within class 'Customer'.
…

C:\> dir

Customer.ts

www.luv2code.com © luv2code LLC


We Can Prevent This!
Do not generate .js file
if there is a compilation error
C:\> del Customer.js

C:\> tsc --noEmitOnError Customer.ts

Customer.ts:16:12 - error TS2341: Property 'firstName' is private and only


accessible within class 'Customer'.
…

C:\> dir
Yaaay!
Customer.ts
The .js file was NOT generated!

www.luv2code.com © luv2code LLC

You might also like