TypeScript: array property causes this error when being filled: "TypeError: Cannot set property '0' of undefined"

Question

I am working with typescript for the first time and here is my problem.

I have the following class:

class FileSystemStatistics{
    public number: number;
    public name: string[];
    public size: number;
    public used: number;
    public usedPercent: number;
    public physicalLocation: string;
}

I analyze the PC for hardrives and as expected it returns an array of them. For testing purpose I just made the name property an array of the type string. Now i simply want to assign name[0] the name of first harddrive, name[1] the name of second harddrive etc.

I am doing the following to achieve this:

var fsObject = new FileSystemStatistics();
//testing if HDs are returned as an array consisting of objects. fs is the name (e.g. C:) 
console.log(fsSize[0].fs); //--> C:
console.log(fsSize[1].fs); //--> G:
fsObject.name[0] = fsSize[0].fs;
fsObject.name[0] = fsSize[0].fs;

There are no mistakes marked in my code but when I want to run it I get the error:

"UnhandledPromiseRejectionWarning: TypeError: Cannot set property '0' of undefined"

I am pretty sure I am making a beginner mistake but I cannot solve it even after googling.

Sergey Khrolenok · Accepted Answer · 2019-02-20 12:09:16Z

2

The problem is not actually in typescript, but in the way how you treat your class. You have to manually assign empty array to your name property, so instead of

class FileSystemStatistics{
    public number: number;
    public name: string[];
    public size: number;
    public used: number;
    public usedPercent: number;
    public physicalLocation: string;
}

it should be at least

class FileSystemStatistics{
    public number: number;
    public name: string[] = [];
    public size: number;
    public used: number;
    public usedPercent: number;
    public physicalLocation: string;
}

What you did with public name: string[] expression is that you only mark that name property should be an array (or undefined/void) but not an array with numbers for instance

...
public name: string[] = [1,2,3]; // would gave an error

Try to check what code you will have at runtime in playground https://www.typescriptlang.org/play/index.html

Treat typescript as a superset of javascript, which only exists before compilation and generate javascript. In terms of runtime code, which you actually tested and what gave you an error in your post - you had a plain function as constructor, which generate you an empty object

and what you tried to achieve is to use your empty object named fsObject in expression like this

fsObject; // {}
fsObject.name // which is already undefined
fsObject.name[0] // this is where you get runtime error with undefined treated as array

edited Feb 20, 2019 at 12:09

answered Feb 20, 2019 at 12:03

Sergey Khrolenok

613 bronze badges

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

1 Comment

stinsfire Over a year ago

Thank you for your elaborate answer. This is the first time I am working with classes in TS/JS and I assumed declaring name as string[] would create an array without values right away. Guess I was wrong ;)

Samuel Vaillant · Accepted Answer · 2019-02-20 12:08:36Z

1

The class FileSystemStatistics you've created don't have any initial value. Which means that fsObject.name is undefined. You can avoid this issue by providing an initial value to the name property.

class FileSystemStatistics{
    public name: string[] = [];
}

You can see the output inside the TypeScript playground.

edited Feb 20, 2019 at 12:08

answered Feb 20, 2019 at 12:00

Samuel Vaillant

3,8671 gold badge17 silver badges21 bronze badges

1 Comment

stinsfire Over a year ago

Thank you for the quick help! Sometimes solutions can be so easy.

Collectives™ on Stack Overflow

TypeScript: array property causes this error when being filled: "TypeError: Cannot set property '0' of undefined"

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related