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
