Determining the type of index to use for an interface

Question

Determining the type of index to use for an interface

Imagine having an interface called Animal, with some general properties, and then either be a cat or a dog with corresponding properties.

interface Dog {
    dog: { sound: string; }
}

interface Cat {
    cat: { lives: number; }
}

type CatOrDog = Cat | Dog;

interface Animal {
    weight: number;
    // index type of CatOrDog
}

I came up with this idea

interface Animal {
   weight: number;
   [K in keyof CatOrDog]: CatOrDog[K];
}

However, TypeScript throws errors when trying to use something other than [K:string]: type

The goal is

// Success
const dog = <Animal> {
    weight: 5,
    dog: {sound: "woof" }
}

// Error, lives doesn't exist on Dog
const errorAnimal = <Animal> {
    weight: 5,
    dog: {sound: "woof" },
    cat: { lives: 9 }
}

Can more index types be added if needed?

javascript typescript

Answer 1

Answer №1

Groups such as Lion | Tiger are considered to be inclusive, indicating that something falls under the category of Lion | Tiger if it is either a Lion, a Tiger, or even both. TypeScript lacks a universal exclusive union operator. If your groups have common properties with distinct values, you can utilize discriminated unions similar to what @MateuszKocz recommends. Alternatively, you could create your own Xor type function for objects:

type ProhibitKeys<K extends keyof any> = { [P in K]?: never }

type Xor<T, U> = (T & ProhibitKeys<Exclude<keyof U, keyof T>>) |
  (U & ProhibitKeys<Exclude<keyof T, keyof U>>);

In this case, you can define Creature as the exclusive union of Lion and Tiger, combined with additional properties shared by all Creatures:

type Creature = Xor<Lion, Tiger> & { speed: number };

With this setup, you can achieve the desired functionality (using type annotations instead of assertions for clarity):

// Successful assignment
const lion: Creature = {
  speed: 10,
  lion: { roar: "Roarrr" }
}

// Error, {stripes: number} cannot be assigned to undefined
const errorCreature: Creature = {
  speed: 8,
  tiger: { stripes: 7 },
  lion: { mane: true }
}

I hope this explanation proves helpful; best of luck!

Answer 2

Groups such as Lion | Tiger are considered to be inclusive, indicating that something falls under the category of Lion | Tiger if it is either a Lion, a Tiger, or even both. TypeScript lacks a universal exclusive union operator. If your groups have common properties with distinct values, you can utilize discriminated unions similar to what @MateuszKocz recommends. Alternatively, you could create your own Xor type function for objects:

type ProhibitKeys<K extends keyof any> = { [P in K]?: never }

type Xor<T, U> = (T & ProhibitKeys<Exclude<keyof U, keyof T>>) |
  (U & ProhibitKeys<Exclude<keyof T, keyof U>>);

In this case, you can define Creature as the exclusive union of Lion and Tiger, combined with additional properties shared by all Creatures:

type Creature = Xor<Lion, Tiger> & { speed: number };

With this setup, you can achieve the desired functionality (using type annotations instead of assertions for clarity):

// Successful assignment
const lion: Creature = {
  speed: 10,
  lion: { roar: "Roarrr" }
}

// Error, {stripes: number} cannot be assigned to undefined
const errorCreature: Creature = {
  speed: 8,
  tiger: { stripes: 7 },
  lion: { mane: true }
}

I hope this explanation proves helpful; best of luck!

Answer 3

Answer №2

If you're open to making some adjustments to your code, utilizing tagged unions might just be the solution you've been searching for.

interface CommonAnimal {
  weight: number
}

interface Dog extends CommonAnimal {
  // Here's where it gets crucial. The `type` property acts as a tag for TypeScript to identify this type.
  type: 'dog'
  sound: string
}

interface Cat extends CommonAnimal {
  type: 'cat'
  lives: number
}

type Animal = Dog | Cat

const dog: Animal = {
  type: 'dog',
  weight: 10,
  sound: 'woof'
}

const cat: Animal = {
  type: 'cat',
  weight: 5,
  lives: 9
}

const robot: Animal = {
  type: 'robot' // This will trigger an error
}

This approach allows you to maintain values at a single level without nesting, all while meeting TypeScript's requirements for recognizing types.

Answer 4

If you're open to making some adjustments to your code, utilizing tagged unions might just be the solution you've been searching for.

interface CommonAnimal {
  weight: number
}

interface Dog extends CommonAnimal {
  // Here's where it gets crucial. The `type` property acts as a tag for TypeScript to identify this type.
  type: 'dog'
  sound: string
}

interface Cat extends CommonAnimal {
  type: 'cat'
  lives: number
}

type Animal = Dog | Cat

const dog: Animal = {
  type: 'dog',
  weight: 10,
  sound: 'woof'
}

const cat: Animal = {
  type: 'cat',
  weight: 5,
  lives: 9
}

const robot: Animal = {
  type: 'robot' // This will trigger an error
}

This approach allows you to maintain values at a single level without nesting, all while meeting TypeScript's requirements for recognizing types.

Determining the type of index to use for an interface

Answer №1

Answer №2

Similar questions

Utilize Protractor Selenium to extract content from a popup window

Having trouble with the jQuery function not working as expected? Can't seem to identify any errors in the code?

Retrieve JSON data from PHP using D3.request

Learn how to use canvas and JavaScript to draw lines that display x and y coordinates on top of the mouse pointer at the same time

What is the best way to convert Observable<Observable<{...}>[ ]> to Observable<{...}[ ]>?

Problem encountered when attempting to return data received from database queries executed within a loop

What is causing certain code to be unable to iterate over values in a map in TypeScript?

Failed to decipher an ID token from firebase

Is there a way to safeguard against accidental modifications to MatTab without prior authorization?

Desktop display issue: Fontawesome icon not appearing

Is the alert failing to appear during the onbeforeunload event across all web browsers?

Sequelize encountered an error: getaddrinfo ENOTFOUND (even though the address is correct)

What kind of type is recommended to use when working with async dispatch in coding?

Leveraging HTTP/2 in conjunction with angularJS

Using node.js to send a response with response.writeHead on the http module

The initial Get request does not receive data upon first attempt

Having trouble retrieving a value from the img.onload event handler. A 'boolean' type error is being thrown, indicating it cannot be assigned to type '(this: GlobalEventHandlers, ev: Event) => any'

Is there a similar feature to RxJs version 4's ofArrayChanges in RxJs version 5?

"Unlocking the potential of AngularJS: A guide to accessing multiple controllers

Error: Unable to access the 'nom_gr' property of null - encountered in Chrome