Implicit interface based on property value

Question

I currently have the following interface:

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

But I also don't want cars to accept the jet_engines property, and airplanes shouldn't have the wheels property.

I want to use it like this:

const func = (vehicle: Vehicle) => {
  if (vehicle.type === 'airplane') {
    // TS should know here that `jet_engines` exists in `vehicle`.
  }
}

I want to avoid using like this:

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

Is this possible? Is this possible while keeping Vehicle an interface (not changing it to a type)?

@TobiasS. I can, but it's just a small inconvenience as I would have to rename it because I have a different naming convention for types and interfaces in my code. — Chris
– Chris, Commented Aug 29, 2022 at 12:47

Spikatrix · Accepted Answer · 2022-08-29 12:43:14Z

2

Yes you can:

export type Vehicle = {
  id: number
} & VehicleType

type VehicleType = Car | Airplane

type Car = {
  type: 'car'
  wheels: number
}

type Airplane = {
  type: 'airplane'
  jet_engines: number
}

const func = (vehicle: Vehicle) => {
  if (vehicle.type === 'airplane') {
    // TS should know here that `jet_engines` exists in `vehicle`.
  }
}

answered Aug 29, 2022 at 12:43

Spikatrix

20.3k7 gold badges45 silver badges85 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

vighnesh153 · Accepted Answer · 2022-08-29 12:45:37Z

2

You can update Vehicle to the following:

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

This way, you can do something like:

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

And, if you have multiple common fields, to avoid duplication, you can do something like the following:

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

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

export type Vehicle = VehicleCommonFields & VehicleTypes

edited Aug 29, 2022 at 12:45

answered Aug 29, 2022 at 12:39

vighnesh153

5,5103 gold badges26 silver badges46 bronze badges

Comments

Radu Diță · Accepted Answer · 2022-08-29 12:56:42Z

You can create a VehicleType that lists all possible vehicles.

Then create a generic type that holds the common fields.

Then create interfaces for both (Car/Airplay) and in the end create a union type.

You can even create a type guard function. Something similar to this:

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;
  }
}

Collectives™ on Stack Overflow

Implicit interface based on property value

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related