how to define a type under forEach in typescript?

Question

I have an array of PersonTypes objects and would like to only use partial of key inside a forEach loop. what is more precise, correct coding in typescript to provide a type? I can do something like people.forEach((person: Pick<PersonTypes, 'name' | 'gender'> or people.forEach((person: PersonTypes) =>{ or people.forEach((person: any) =>{ what is right way to code in typescript

export type PersonTypes = {
  name: string;
  value: string;
  gender: boolean;
};
const people: PersonTypes[] = [
  {name: 'apl', value: 'apple', gender: true},
  {name: 'gal', value: 'google', gender: false},
]
people.forEach((person: Pick<PersonTypes, 'name' | 'gender'>) =>{
//people.forEach((person: PersonTypes) =>{
//people.forEach((person: any) =>{
  console.log(person.name);
  console.log(person.gender);
} )

Solution 1

You should just stick to:

people.forEach((person: PersonTypes) =>{


});

This is because each object within the people array is of type PersonTypes, and there is no actual need to extract properties away from the type.

In fact, there is no need to explicitly type person as PersonTypes, as people is of PersonTypes[]. TypeScript will automatically infer that each object within the array is PersonTypes, so this would be sufficient:

people.forEach((person) =>{


});  

Alternatively, you may choose to destructure the parameter, which will make your function more concise and clean.

people.forEach(({ name, gender }) =>{  
  console.log(name);
  console.log(gender);
});

Solution 2

Based on the additional code you have provided, the customZip function is returning type of any, which of course causes issues later because the array will have a type of any instead of an inferred PersonType[]:

export function customZip(...arrays: Array<any>){
  return arrays
}

To fix this, it is as simple as using the concept of generics in TypeScript, which allows the compiler to infer the type of the array by itself:

export function customZip<T>(...arrays: Array<T>){
  return arrays
}

See proof-of-concept example.

You can choose to provide a type, or simply let TypeScript infer by itself. It doesn't really matter at this point: both will compile correctly:

// You let TypeScript do the inferring by itself
const people = [
  ...customZip([{name: 'apl', value: 'apple', gender: true},
  {name: 'gal', value: 'google', gender: false},])
];

...or...

// Your manually inform TypeScript what the type of an array member returned from customZip looks like
const people = [
  ...customZip<PersonTypes[]>([{name: 'apl', value: 'apple', gender: true},
  {name: 'gal', value: 'google', gender: false},])
];

Comments

[jacobcan118]

Binding element 'name' implicitly has an 'any' type I have error for destructure way

[Terry]

@jacobcan118 Show us how you destructure. Using people.forEach(({ name, gender }) => ... ); works for me: typescriptlang.org/play/#code/…

[jacobcan118]

@Terry i think the problem is on my customZip function which I cannt really change typescriptlang.org/play/?ssl=18&ssc=1&pln=18&pc=4# how to solve it?

[Terry]

@jacobcan118 Please update your question instead: the playground link does not work btw

[jacobcan118]

typescriptlang.org/play/…. works for this one?

[wentjun]

Hi, are you still facing the issue you have stated on your comment?

[Terry]

@jacobcan118 Please update your question: pasting the link in the comments is not helping others in the future, because the actual code has diverged too much from your original question (there is no mention of a custom zipping function)

[uncledru]

When you destructure you can give it a type forEach(([k, v]: [string, string]) => {