Define an array of objects in typescript

Question

I want to define in typescript an array of objects:

const a = [{
  name: 1,
  age: 2,
  car1: 8,
  car2: 8,
  car3: 8,
  name4: 1,
  age4: 2,
  car41: 8,
  car42: 8,
  car34: 8,
},
{
  name: 1,
  age: 2,
  car1: 8,
  car2: 8,
  car3: 8,
  name4: 1,
  age4: 2,
  car41: 8,
  car42: 8,
  car34: 8,
}
]

const fun = (obj: Array < object > ) => {
  console.log(obj)
}

fun(a)

In my case it is correct to use this construction: obj: Array <object> or i should define each key of my object?

Answer 1

You could create your own custom object type:

type CustomObject = {
  name: number
  age: number
  car1: number
  car2: number
  car3: number
  name4: number
  age4: number
  car41: number
  car42: number
  car34: number
}

const arrayOfCustomObjects: CustomObject[] = [{
  name: 1,
  age: 2,
  car1: 8,
  car2: 8,
  car3: 8,
  name4: 1,
  age4: 2,
  car41: 8,
  car42: 8,
  car34: 8,
},
{
  name: 1,
  age: 2,
  car1: 8,
  car2: 8,
  car3: 8,
  name4: 1,
  age4: 2,
  car41: 8,
  car42: 8,
  car34: 8,
}
]

const fun = (objs: CustomObject[]) => {
    objs.forEach((obj) => {
        console.log(obj)
    })
}

fun(arrayOfCustomObjects)

Answer 2

The solution of the question depends on the scenario you want to program in!. Here are some of the possible scenarios with your code.

Define an object and infer its keys from it.

const persons = [
  { name: "John", age: 12 },
  { name: "Ben", age: 20 }
];

const fun = (info: typeof persons) => {
  //You will get intellisense here
  console.log(info[0].name);
};

You want to have objects with fixed keys, you can use types and interfaces in that case.

interface IPerson {
  id?: string; // ID is optional (use of ? operator)
  name: string; // Name is Required
  age: number;
}

const persons: Array<IPerson> = [
  { name: "John", age: 12 },
  { name: "Ben", age: 20 }
];

// Both are same: Array<IPerson> === IPerson[]
const fun = (info: Array<IPerson>) => {
  //You will get intellisense here
  console.log(info[0].name);
};

You want to have object with fixed keys, and you want to provide partial information.

interface IPerson {
  id?: string; // ID is optional (use of ? operator)
  name: string; // Name is Required
  age: number;
}

const persons: Array<Partial<IPerson>> = [
  { name: "John" }, // You can do it.
  { name: "Ben", age: 20 }
];

// Both are same: Array<IPerson> === IPerson[]
const fun = (info: Partial<IPerson>[]) => {
  //You will get intellisense here
  console.log(info[0].name);
};

Additional Information, Typescript does not support runtime type checking, it only supports type checking at compile type.

For validation at runtime you can implement the function as follows:

const is_valid_person = (person: any): Boolean => {
  return (
    typeof person === "object" &&
    typeof person.name === "string" &&
    typeof person.age === "number" &&
    person.name.length >= 5 &&
    person.age >= 1
  );
};

console.log("Is person valid: ", is_valid_person({}));
console.log("Is person valid: ", is_valid_person("Invalid Person"));

I hope one of the above ways should solve your problem.

In my case it is correct to use this construction: obj: Array or i should define each key of my object?

Answer to above question is:

• You can use any one of shown method above, because typescript helps you write better code and make less mistakes at compile time. Once your program gets compiled, the code that gets executed is plain Javascript. And javascript doesn't validate your responses.

• All the above patterns generate same JavaScript code, so there are no performance issues.

Answer 3

As you can see in the documentation, using object is maybe a bit lazy.

Assuming all the objects in the array have the same properties, you can solve this problem like so:

interface UserWithCars {
  name: number;
  age: number;
  // All other properties
}

const fun = (objectArray: Array<UserWithCars>): void => {
  console.log(objectArray);
}

If all the objects will be of the same type, you can even create a class (which should be the way to go actually):

class UserWithCars {
  name: number;
  age: number;
  // All other properties

  constructor(/* etc */) {
    // constructor operations
  }
}

const fun = (objectArray: Array<UserWithCars>): void => {
  console.log(objectArray);
}