Dynamic interface created by property values

Question

Dynamic interface created by property values

Presently, I have developed the following interface structure:

export interface Vehicle {
  id: number;
  type: 'car' | 'airplane';
  jet_engines?: number;
  wheels?: number;
}

My aim is to restrict cars from having the jet_engines property and airplanes from possessing the wheels property.

The desired usage scenario is as follows:

const func = (vehicle: Vehicle) => {
  if (vehicle.type === 'airplane') {
    // TypeScript should be informed about the existence of `jet_engines` within `vehicle`.
  }
}

I am looking for a solution that does not involve defining separate interfaces like this:

const func = (vehicle: Car | Airplane) => {

Is there a way to achieve this objective while preserving the structure of the Vehicle interface without converting it into a type?

typescript

Answer 1

Answer №1

Absolutely! It is possible:

define type Vehicle as {
  id: number
} and VehicleType

assign type VehicleType as Car or Airplane

designate Car as {
  type: 'car'
  wheels: number
}

specify Airplane as {
  type: 'airplane'
  jet_engines: number
}

initiate func to check vehicle of Vehicle => {
  if (vehicle.type === 'airplane') {
    // The TypeScript compiler should recognize that `jet_engines` is present in `vehicle`.
  }
}

Answer 2

Absolutely! It is possible:

define type Vehicle as {
  id: number
} and VehicleType

assign type VehicleType as Car or Airplane

designate Car as {
  type: 'car'
  wheels: number
}

specify Airplane as {
  type: 'airplane'
  jet_engines: number
}

initiate func to check vehicle of Vehicle => {
  if (vehicle.type === 'airplane') {
    // The TypeScript compiler should recognize that `jet_engines` is present in `vehicle`.
  }
}

Answer 3

Answer №2

To enhance your Vehicle object, consider the following updates:

export type Vehicle = 
| {
    id: number;
    type: 'car';
    wheels: number;
  }
| {
    id: number;
    type: 'airplane';
    jet_engines: number;
  }

This approach allows for specific handling based on the vehicle type:

if (vehicle.type === 'car') {
  // TS recognizes the vehicle has wheels
} else {
  // TS acknowledges the vehicle has jet engines
}

If there are shared attributes among different vehicle types, you can consolidate them like this:

type VehicleCommonFields = {
  id: number;
  // other common fields
}

type VehicleTypes = 
| {
    type: 'car';
    wheels: number;
  }
| {
    type: 'airplane';
    jet_engines: number;
  }

export type Vehicle = VehicleCommonFields & VehicleTypes

Answer 4

To enhance your Vehicle object, consider the following updates:

export type Vehicle = 
| {
    id: number;
    type: 'car';
    wheels: number;
  }
| {
    id: number;
    type: 'airplane';
    jet_engines: number;
  }

This approach allows for specific handling based on the vehicle type:

if (vehicle.type === 'car') {
  // TS recognizes the vehicle has wheels
} else {
  // TS acknowledges the vehicle has jet engines
}

If there are shared attributes among different vehicle types, you can consolidate them like this:

type VehicleCommonFields = {
  id: number;
  // other common fields
}

type VehicleTypes = 
| {
    type: 'car';
    wheels: number;
  }
| {
    type: 'airplane';
    jet_engines: number;
  }

export type Vehicle = VehicleCommonFields & VehicleTypes

Answer 5

Answer №3

To streamline your vehicle management system, start by defining a VehicleType that encompasses all possible vehicles.

Next, establish a generic type that captures the shared attributes across all vehicle types.

Create specific interfaces for each vehicle subtype (Car and Airplane) and culminate with a union type that combines them.

For added structure, consider implementing a type guard function, reminiscent of the following example:

type VehicleType = 'car' | 'airplane';

export interface GenericVehicle <T extends VehicleType> {
  id: number;
  type: T;
}

interface Airplane extends GenericVehicle<'airplane'> {
  jet_engines: number
}

interface Car extends GenericVehicle<'car'> {
  wheels: number
}

type Vehicle = Airplane | Car

const isCar = (vehicle: Vehicle): vehicle is Car => {
  return vehicle.type === 'car';
}

function doSmth(vehicle: Vehicle) {
  if (isCar(vehicle)) {
    vehicle.wheels;
  } else {
    vehicle.jet_engines;
  }
}

Answer 6

To streamline your vehicle management system, start by defining a VehicleType that encompasses all possible vehicles.

Next, establish a generic type that captures the shared attributes across all vehicle types.

Create specific interfaces for each vehicle subtype (Car and Airplane) and culminate with a union type that combines them.

For added structure, consider implementing a type guard function, reminiscent of the following example:

type VehicleType = 'car' | 'airplane';

export interface GenericVehicle <T extends VehicleType> {
  id: number;
  type: T;
}

interface Airplane extends GenericVehicle<'airplane'> {
  jet_engines: number
}

interface Car extends GenericVehicle<'car'> {
  wheels: number
}

type Vehicle = Airplane | Car

const isCar = (vehicle: Vehicle): vehicle is Car => {
  return vehicle.type === 'car';
}

function doSmth(vehicle: Vehicle) {
  if (isCar(vehicle)) {
    vehicle.wheels;
  } else {
    vehicle.jet_engines;
  }
}

Dynamic interface created by property values

Answer №1

Answer №2

Answer №3

Similar questions

Issue with dependency injection not functioning during ngOnInit in Angular 7 unit testing

Using TypeScript with MongoDB aggregation

Troubleshooting: Difficulty assigning a value to a nested object in Angular

Is there a way to customize the Color Palette in Material UI using Typescript?

Angular 2 Update RC5: Router Provider Not Found

Adding a constant to a Vue component

Comparison: executing an immediately invoked function expression (IIFE) and a separate

What is the best way to access buffer data in TypeScript for Solana?

Tips on preventing the need to redeclare property types in React constructor with Typescript

In Typescript, you can easily group a string into sections that consist of digits like 345-67, along with text containing a

Step-by-step guide on importing CSS into TypeScript

Dealing with nullable objects in Typescript: Best practices

TypeScript failing to correctly deduce the interface from the property

Error in Angular compiler.js at line 2531: Multiple components found for this element, causing template parse errors

Shifting successive elements in an array alternates

Is there cause for worry regarding the efficiency issues of utilizing Object.setPrototypeOf for subclassing Error?

A static factory method within an abstract class

Sharing methods between two components on the same page in Angular can greatly improve code efficiency

Angular does not support the functionality of having multiple material paginations within a single component

Exploring the Behavior of Subscribing to a Shared Service in Angular