TypeScript interface, type, and union types

TypeScript Advance Types: Exercise-3 with Solution

Write a TypeScript program that defines a TypeScript interface Car with properties make and model of type string. Create a type Bus with properties make and model of type string and an additional property payloadCapacity of type number. Now, create a type Vehicle that represents either a Car or a Truck using a union type.

Sample Solution:

TypeScript Code:

// Define an interface 'Car' with 'make' and 'model' properties of type 'string'
interface Car {
  make: string;
  model: string;
}

// Define a type 'Bus' with 'make' and 'model' properties of type 'string' and 'payloadCapacity' of type 'number'
type Bus = {
  make: string;
  model: string;
  payloadCapacity: number;
};

// Create a type 'Vehicle' that represents either a 'Car' or a 'Bus' using a union type
type Vehicle = Car | Bus;

// Create instances of 'Car' and 'Bus'
const car: Car = { make: "Audi", model: "A4" };
const bus: Bus = { make: "Vovo", model: "XC60", payloadCapacity: 20 };

// Create an array of 'Vehicle' type
const vehicles: Vehicle[] = [car, bus];

// Iterate through the 'vehicles' array and print details
vehicles.forEach((vehicle) => {
  console.log(`Make: ${vehicle.make}`);
  console.log(`Model: ${vehicle.model}`);
  if ("payloadCapacity" in vehicle) {
    console.log(`Payload Capacity: ${vehicle.payloadCapacity}`);
  }
  console.log("--------");
});

Explanations:

In the exercise above -

• First, we define an interface 'Car' with properties 'make' and 'model' of type string, representing car details.
• Define a type 'Bus' with properties 'make' and 'model' of type string and an additional property "payloadCapacity" of type number, representing bus details, including payload capacity.
• Create a type 'Vehicle' that represents either a 'Car' or a 'Bus' using a union type (Car | Bus), indicating that it can be either a car or a bus.
• Create instances of both 'Car' and 'Bus' to demonstrate how they can be used as 'Vehicle' types.
• Create an array of 'vehicles' of type Vehicle[] that can hold both cars and buses.
• Finally, iterate through the 'vehicles' array and print the details of each vehicle. We use the "payloadCapacity" in vehicle check to determine if an object is of type 'Bus' and should include the "payloadCapacity" property in the output.

Output:

"Make: Audi"
"Model: A4"
"--------"
"Make: Vovo"
"Model: XC60"
"Payload Capacity: 20"
"--------"

TypeScript Editor:

See the Pen TypeScript by w3resource (@w3resource) on CodePen.

Previous: Using union types in TypeScript functions.
Next: TypeScript type guard function.