Skip to content
Basic understanding of UML class diagramsVisual Studio Code or any TypeScript-compatible IDENode.js and npm installed
Share
Explore
Lab Workbook : Converting UML into TypeScript
Your final project delivery will be to do npm -publish of your TypeScript code which you will now write based on the UML diagram you made of your team’s Assigned Business Domain.
Also see this Lab:
Lab workbook with code-along examples to help students convert their UML diagrams into TypeScript code.
This workbook will cover creating classes, implementing inheritance and composition, and provide several working examples.
Related Lab: Using tsc TypeScript Compiler to compile your TypeScript Code:
Lab Workbook: Converting UML to TypeScript
Objective
By the end of this lab, you will be able to convert UML class diagrams into TypeScript code, implement inheritance and composition, and create working examples of a simple domain model.
Prerequisites
Part 1: Basic Class Creation
Let's start with a simple UML class and convert it to TypeScript.
UML:
Copy
+-------------------+
| Person |
+-------------------+
| - name: string |
| - age: number |
+-------------------+
| + getName(): string
| + getAge(): number |
+-------------------+
TypeScript:
typescript
Copy
class Person {
private name: string;
private age: number;
constructor(name: string, age: number) {
this.name = name;
this.age = age;
}
public getName(): string {
return this.name;
}
public getAge(): number {
return this.age;
}
}
// Usage
const person = new Person("John Doe", 30);
console.log(person.getName()); // Output: John Doe
console.log(person.getAge()); // Output: 30
Part 2: Inheritance
Now, let's implement inheritance using a Student class that extends Person.
UML:
Copy
+-------------------+
| Person |
+-------------------+
| - name: string |
| - age: number |
+-------------------+
| + getName(): string
| + getAge(): number |
+-------------------+
^
|
+-------------------+
| Student |
+-------------------+
| - studentId: string|
+-------------------+
| + getStudentId(): string |
+-------------------+
TypeScript:
typescript
Copy
class Person {
protected name: string;
protected age: number;
constructor(name: string, age: number) {
this.name = name;
this.age = age;
}
public getName(): string {
return this.name;
}
public getAge(): number {
return this.age;
}
}
class Student extends Person {
private studentId: string;
constructor(name: string, age: number, studentId: string) {
super(name, age);
this.studentId = studentId;
}
public getStudentId(): string {
return this.studentId;
}
}
// Usage
const student = new Student("Jane Doe", 20, "S12345");
console.log(student.getName()); // Output: Jane Doe
console.log(student.getAge()); // Output: 20
console.log(student.getStudentId()); // Output: S12345
Part 3: Composition
Let's implement composition using a Department class that contains Person objects.
UML:
Copy
+-------------------+
| Department |
+-------------------+
| - name: string |
| - staff: Person[] |
+-------------------+
| + addStaff(person: Person): void |
| + getStaffCount(): number |
+-------------------+
TypeScript:
typescript
Copy
class Department {
private name: string;
private staff: Person[];
constructor(name: string) {
this.name = name;
this.staff = [];
}
public addStaff(person: Person): void {
this.staff.push(person);
}
public getStaffCount(): number {
return this.staff.length;
}
}
// Usage
const itDepartment = new Department("IT");
const person1 = new Person("Alice", 28);
const person2 = new Person("Bob", 35);
itDepartment.addStaff(person1);
itDepartment.addStaff(person2);
console.log(itDepartment.getStaffCount()); // Output: 2
Part 4: Complete Working Example
Let's create a more complex example involving a university system with students, courses, and departments.
UML:
Copy
+-------------------+
| Person |
+-------------------+
| - name: string |
| - age: number |
+-------------------+
| + getName(): string
| + getAge(): number |
+-------------------+
^
|
+-------------------+
| Student |
+-------------------+
| - studentId: string|
| - courses: Course[]|
+-------------------+
| + getStudentId(): string |
| + enrollCourse(course: Course): void |
+-------------------+
+-------------------+
| Course |
+-------------------+
| - courseId: string|
| - name: string |
| - instructor: Person |
+-------------------+
| + getCourseId(): string |
| + getName(): string |
+-------------------+
+-------------------+
| Department |
+-------------------+
| - name: string |
| - courses: Course[]|
+-------------------+
| + addCourse(course: Course): void |
| + getCourseCount(): number |
+-------------------+
TypeScript Implementation:
typescript
Copy
class Person {
protected name: string;
protected age: number;
constructor(name: string, age: number) {
this.name = name;
this.age = age;
}
public getName(): string {
return this.name;
}
public getAge(): number {
return this.age;
}
}
class Course {
private courseId: string;
private name: string;
private instructor: Person;
constructor(courseId: string, name: string, instructor: Person) {
this.courseId = courseId;
this.name = name;
this.instructor = instructor;
}
public getCourseId(): string {
return this.courseId;
}
public getName(): string {
return this.name;
}
}
class Student extends Person {
private studentId: string;
private courses: Course[];
Want to print your doc?
This is not the way.
This is not the way.
Try clicking the ··· in the right corner or using a keyboard shortcut (
CtrlP
) instead.