How can I store various data types in a single array in TypeScript?

Question

How can I store various data types in a single array in TypeScript?

I have a scenario I need help with.
Let's say we have two interfaces, Cats and Dogs. How can I create an array that can store both Cats and Dogs?

interface Cats {
  name: string;
  age: number;
}

interface Dog {
  owner: string;
}

const cat1: Cats = {
  name: "Jimmy",
  age: 5,
}

const dog1: Dogs = {
  owner: "Bobby",
}

// The line below is not functioning as expected
const animalsList: Array<Cats> | Array<Dogs> = [cat1, dog1];

The variable animalsList should be able to hold instances of both Cats and Dogs, but I am encountering errors like
"Type Dogs cannot be assigned to type Array<Cats>"

arrays typescript types conditional-statements type-declaration

Answer 1

Answer №1

From my understanding of your question, you are looking to create an array that can accommodate both Cats and Dogs. The current syntax

Array<Cats> | Array<Dogs>

indicates that you can have either a) an array exclusively for Cats or b) an array exclusively for Dogs.

To address this issue, you need an array that is capable of holding both types. The correct way to achieve this is as follows:

public animalsList: Array<Cats | Dogs>;

The placement of the pipe (|) in the updated code signifies that this Array can store both Cats and Dogs simultaneously.

Another approach, suggested by @sunshine, is shown below:

public animalsList: (Cats | Dogs)[];

This alternative method functions in a similar manner.

Answer 2

From my understanding of your question, you are looking to create an array that can accommodate both Cats and Dogs. The current syntax

Array<Cats> | Array<Dogs>

indicates that you can have either a) an array exclusively for Cats or b) an array exclusively for Dogs.

To address this issue, you need an array that is capable of holding both types. The correct way to achieve this is as follows:

public animalsList: Array<Cats | Dogs>;

The placement of the pipe (|) in the updated code signifies that this Array can store both Cats and Dogs simultaneously.

Another approach, suggested by @sunshine, is shown below:

public animalsList: (Cats | Dogs)[];

This alternative method functions in a similar manner.

Answer 3

Answer №2

Check out this complete example:

// Explore the TypeScript Playground, a platform designed for writing, sharing, and mastering TypeScript.

// There are three main ways to use it:
//
//  - Learn TypeScript in a safe environment where errors won't impact your work
//  - Experiment with TypeScript syntax and easily share your code with others
//  - Test different compiler features of TypeScript in a sandbox setting

const anExampleVariable = "Hello World"
console.log(anExampleVariable)

// For more language insights, click on "Examples" or "What's New" above.
// Start coding by removing these comments and let your imagination run wild.
  
class Cats {
    private name: String;
    constructor(name: String) {
        this.name = name;
    }
    public dump() { console.log(`I am cat ${this.name}`); }
}
class Dogs {
    private name: String;
    constructor(name: String) {
        this.name = name;
    }
    public dump() { console.log(`I am dog ${this.name}`); }
}

class Test {
    public animalsList : Array<Cats> | Array<Dogs> = Array();
}

const t = new Test();
t.animalsList = Array(new Cats('cat1'), new Cats('cat2'));
t.animalsList.forEach((v, i) => { v.dump(); });

t.animalsList = Array(new Dogs('pluto'), new Dogs('goofy'));
t.animalsList.forEach((v, i) => { v.dump(); });

// The following line fails
//t.animalsList = Array(new Dogs('pluto'), new Cats('cat2'));
//t.animalsList.forEach((v, i) => { v.dump(); });

Experiment with this code snippet on https://www.typescriptlang.org/play

Answer 4

Check out this complete example:

// Explore the TypeScript Playground, a platform designed for writing, sharing, and mastering TypeScript.

// There are three main ways to use it:
//
//  - Learn TypeScript in a safe environment where errors won't impact your work
//  - Experiment with TypeScript syntax and easily share your code with others
//  - Test different compiler features of TypeScript in a sandbox setting

const anExampleVariable = "Hello World"
console.log(anExampleVariable)

// For more language insights, click on "Examples" or "What's New" above.
// Start coding by removing these comments and let your imagination run wild.
  
class Cats {
    private name: String;
    constructor(name: String) {
        this.name = name;
    }
    public dump() { console.log(`I am cat ${this.name}`); }
}
class Dogs {
    private name: String;
    constructor(name: String) {
        this.name = name;
    }
    public dump() { console.log(`I am dog ${this.name}`); }
}

class Test {
    public animalsList : Array<Cats> | Array<Dogs> = Array();
}

const t = new Test();
t.animalsList = Array(new Cats('cat1'), new Cats('cat2'));
t.animalsList.forEach((v, i) => { v.dump(); });

t.animalsList = Array(new Dogs('pluto'), new Dogs('goofy'));
t.animalsList.forEach((v, i) => { v.dump(); });

// The following line fails
//t.animalsList = Array(new Dogs('pluto'), new Cats('cat2'));
//t.animalsList.forEach((v, i) => { v.dump(); });

Experiment with this code snippet on https://www.typescriptlang.org/play

How can I store various data types in a single array in TypeScript?

Answer №1

Answer №2

Similar questions

Using Angular template to embed Animate CC Canvas Export

Invoking a Typescript function from the Highcharts load event

Cypress eliminating the "X-CSRFToken" header

"Typescript: Unraveling the Depths of Nested

Simulation service agent partnered with openApi backend

Handling linting errors for getInitialProps return type in NextJS with Typescript

Breaking up and Substituting text within Angular 8's HTML structure

Modify the values of all cells within a specific column in a table by utilizing a 2D array for both rows and cells

The TypeScript compiler is unable to locate the name 'window'

The Function-supported Operation is having trouble implementing a modification related to Geohash/Geopoint - the Object Type requires a String format

When I delete the initial element from the array, the thumbnail image disappears

Update the CSS styling of a parent div based on the active state of specific child divs

Steps for enabling a function to return an undefined type

The compatibility issue between Bootstrap and Angular 2 is causing some challenges

Consolidate all important values into a single NSMutable Array

Ways to speed up the initial loading time in Angular 7 while utilizing custom font files

The type '{}' does not contain a property named 'map'

Having trouble resolving TypeScript TS2322 error with Context API + useState hook in your React App?

Tips for storing an unmatched result in an array with a Regexp

The validation process in Redux forms