Modules

Code Organization

www.luv2code.com © luv2code LLC

Code Organization

• Currently all of our code is in a single file

www.luv2code.com © luv2code LLC

Code Organization

• Currently all of our code is in a single file

• For real-time projects, we would like to place code in separate files

www.luv2code.com © luv2code LLC

Code Organization

• Currently all of our code is in a single file

• For real-time projects, we would like to place code in separate files

Driver.ts

www.luv2code.com © luv2code LLC

Code Organization

• Currently all of our code is in a single file

• For real-time projects, we would like to place code in separate files

Customer.ts

Driver.ts Product.ts

Account.ts

www.luv2code.com © luv2code LLC

TypeScript Modules

www.luv2code.com © luv2code LLC

TypeScript Modules

• TypeScript supports the concept of modules

www.luv2code.com © luv2code LLC

TypeScript Modules

• TypeScript supports the concept of modules

• A module can export classes, functions, variables etc

www.luv2code.com © luv2code LLC

TypeScript Modules

• TypeScript supports the concept of modules

• A module can export classes, functions, variables etc

• Another file can import classes, functions, variables etc from a module

www.luv2code.com © luv2code LLC

Example

www.luv2code.com © luv2code LLC

Example

Driver.ts

www.luv2code.com © luv2code LLC

Example

Driver.ts Customer.ts

www.luv2code.com © luv2code LLC

Example

Driver.ts Customer.ts

Export the Customer class

www.luv2code.com © luv2code LLC

Example

Driver.ts Customer.ts

Import the Customer class Export the Customer class

www.luv2code.com © luv2code LLC

Module Example

www.luv2code.com © luv2code LLC

 Module Example

File: Customer.ts

export class Customer {

…
…
…

www.luv2code.com © luv2code LLC

 Module Example

File: Customer.ts

export class Customer {

…
…
… Export the class

www.luv2code.com © luv2code LLC

Module Example

File: Customer.ts

export class Customer {

…
…
…

www.luv2code.com © luv2code LLC

 Module Example

File: Customer.ts

export class Customer {

…
File: Driver.ts
…
import { Customer } from './Customer'; …

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

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

www.luv2code.com © luv2code LLC

 Module Example

File: Customer.ts

export class Customer {

…
File: Driver.ts
…
import { Customer } from './Customer'; …

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

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

www.luv2code.com © luv2code LLC

 Module Example

File: Customer.ts
Based on file name
(leave off .ts) export class Customer {

…
File: Driver.ts
…
import { Customer } from './Customer'; …

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

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

www.luv2code.com © luv2code LLC

 Module Example

Can give File: Customer.ts

relative directory path Based on file name
(leave off .ts) export class Customer {

…
File: Driver.ts
…
import { Customer } from './Customer'; …

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

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

www.luv2code.com © luv2code LLC

 Module Example

File: Customer.ts

export class Customer {

…
File: Driver.ts
…
import { Customer } from './Customer'; …

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

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

www.luv2code.com © luv2code LLC