Typed Array in Javascript

Question

I want to create a typed array in Javascript.

For example when I create a class like this:

export default class AnalyticData {
    constructor(collection = []) {
        return collection.map((item) => new AnalyticDatum(item))
    }
}

and after I make myData = new AnalyticData() the type of myData is Array and not AnalyticData

Does anyone know how to make sure that I have a AnalyticData type and not an Array?

I ask this because in my vue component I have this:

    props: {
        analyticData: {
            type: AnalyticData,
            required: true,
        },
    },

And so this warning :

[Vue warn]: Invalid prop: type check failed for prop "analyticData". Expected AnalyticData, got Array

Does anybody know how to create a typed Array in JS ?

There are such things as typed arrays, but they are for a completely different and specialized purpose. General arrays in JavaScript are not typed; any element of an array can contain a value of any type. — Pointy
– Pointy, Commented Dec 2, 2020 at 15:30
ok, but do You think that is possible to have an AnalyticData type for analyticData prop ? — Adri HM
– Adri HM, Commented Dec 2, 2020 at 15:33
If you're programming in JavaScript, no. That's why people invented things like TypeScript. JavaScript variables and properties are not typed. Values have types, but not variables/properties. — Pointy
– Pointy, Commented Dec 2, 2020 at 15:37
@Ady642 You shouldn't return anything from your constructor. That is causing myData being an array instead of a AnalyticData instance. I don't have a clue what you actually want to do with the result of that .map() though. Possibly you want to assign it to a property instead. — Ivar
– Ivar, Commented Dec 2, 2020 at 15:59

Andrea Giammarchi · Accepted Answer · 2020-12-02 16:07:12Z

1

I don't know if AnalyticDatum is a typo, but you can have custom types using extends.

export default class AnalyticData extends Array {
  constructor(collection = []) {
    super().push(...collection);
  }
};

If AnalyticDatum is instead another class to define AnalyticData items, you can still use the map(...) procedure:

export default class AnalyticData extends Array {
  constructor(collection = []) {
    super().push(...collection.map(item => new AnalyticDatum(item)));
  }
};

In both cases, the new AnalyticData will be an instance of AnalyticData, so whatever type checker you have in there, shouldn't have issues.

answered Dec 2, 2020 at 16:07

Andrea Giammarchi

3,2081 gold badge18 silver badges25 bronze badges

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

4 Comments

Adri HM Over a year ago

thanks for your answer but i still have the warning about the array type...

Andrea Giammarchi Over a year ago

then you should likely file an issue in vue, as new AnalyticData is an Array but it's exactly an instance of AnalyticData first, so the type checker is doing something wrong.

Adri HM Over a year ago

oh yes sorry you're right: jsfiddle.net/sx85e27g/3. It's something else so

Adri HM Over a year ago

the problem is that in my Vue app I have an Observable(from the Vue reactivy I think) so It's considered as an Array by the prop validation

David Lemon · Accepted Answer · 2020-12-02 16:11:43Z

0

You can create number arrays easily in javascript, as explained in MDN. For an object array is not that easy, and if you put in them dynamic data (like strings) you have to reserve space for that data. That is somehow low level, I would not recommend it for a javascript project.

I suggest to use typescript (if it makes sense in your project). Typed programming in typescript is easy:

interface AnalyticDatum {
  date: Date;
  info: string;
}

const data: AnalyticDatum[] = [{
    date: new Date("2019-07-27"),
    info: 'Some text',
},{
    date: new Date("2019-09-24"),
    info: 'Some other text',
}];

data.push({
    date: new Date("2019-12-27"),
    info: 'New entry',
});

console.log(data);

Run this code

answered Dec 2, 2020 at 16:11

David Lemon

1,57010 silver badges21 bronze badges

Collectives™ on Stack Overflow

Typed Array in Javascript

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related