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

Tips for choosing and unchoosing rows in angular 6

Is it possible to store input from a multiline TextArea into an array using NetBeans?

Managing errors with the RxJS retry operator

Utilizing AngularJs to differentiate between arrays and strings within an HTML template

Is ts-node necessary for using TypeScript in Node.js?

Contrast a multi-dimensional array against a regular array and populate any missing elements

Warning in TypeScript: TS7017 - The index signature of the object type is implictly assigned as type "any"

A specialized <T> interface, now enhanced with additional functionalities

Inactive function

Routing with nested modules in Angular 2 can be achieved by using the same

When the network connection is active, the observable will retry and repeat based on other observable signals

Error message encountered following the removal of an undesirable type from an array in Typescript

What is the best way to save String arrays to a text file in Java with the help of PrintWriter?

Issues with type errors in authentication wrapper for getServerSideProps

Mapping an array of objects within another array of objects

Merge JSON objects while retaining duplicate keys

The setInterval function continues executing even after the page has been changed

Designing php/mysql data in a container

Exploring TypeScript Module Importation and WebPack Integration

How can I utilize the color prop in the theme file to style new variants more comprehensively with MUI theming?