Author: John Au-Yeung

Sometimes, we want to fix the ‘property forEach does not exist on type NodeListOf’ error with TypeScript.

In this article, we’ll look at how to fix the ‘property forEach does not exist on type NodeListOf’ error with TypeScript.

How to fix the ‘property forEach does not exist on type NodeListOf’ error with TypeScript?

To fix the ‘property forEach does not exist on type NodeListOf’ error with TypeScript, we should convert the node list returned by querySelectorAll into an array.

For instance, we write

const frameZones = Array.from(document.querySelectorAll("path.frame-zone"));
frameZones.forEach((z) => {
  //...
});

to call Array.from with the NodeList returned by qurySelectorAll to convert the NodeList into an array of nodes.

Then we can call forEach on the array.

Conclusion

To fix the ‘property forEach does not exist on type NodeListOf’ error with TypeScript, we should convert the node list returned by querySelectorAll into an array.

Sometimes, we want to add TypeScript types for React checkbox events and handlers.

In this article, we’ll look at how to add TypeScript types for React checkbox events and handlers.

How to add TypeScript types for React checkbox events and handlers?

To add TypeScript types for React checkbox events and handlers, we should set the change event object to the React.ChangeEvent<HTMLInputElement> type.

For instance, we write

const Foo = () => {
  const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    //...
  };
  return <input type="checkbox" onChange={onChange} />;
};

to add a check with a change event handler.

Then we set the e parameter of onChange to React.ChangeEvent<HTMLInputElement>.

Then we’ll get type checks and autocomplete for the e object.

Conclusion

To add TypeScript types for React checkbox events and handlers, we should set the change event object to the React.ChangeEvent<HTMLInputElement> type.

Sometimes, we want to fix the "Props with type Object/Array must use a factory function to return the default value." error with Vue.js.

In this article, we’ll look at how to fix the "Props with type Object/Array must use a factory function to return the default value." error with Vue.js.

How to fix the "Props with type Object/Array must use a factory function to return the default value." error with Vue.js?

To fix the "Props with type Object/Array must use a factory function to return the default value." error with Vue.js, we should set the default property to a function that returns an object or an array.

For instance, we write

<script>
export default {
  //...
  props: {
    exampleDefaultObject: {
      type: Object,
      default: () => ({}),
    },
    exampleDefaultArray: {
      type: Array,
      default: () => [],
    },
  },
  //...
};
</script>

to register the exampleDefaultObject and exampleDefaultArray props.

And we set the default property to a function that returns an object and an array to use the returned values as default values of the props.

Conclusion

To fix the "Props with type Object/Array must use a factory function to return the default value." error with Vue.js, we should set the default property to a function that returns an object or an array.

Sometimes, we want to get argument types for a constructor or class with TypeScript.

In this article, we’ll look at how to get argument types for a constructor or class with TypeScript.

How to get argument types for a constructor or class with TypeScript?

To get argument types for a constructor or class with TypeScript, we can use the ConstructorParameters type with the typeof operator.

For instance, we write

type C = ConstructorParameters<typeof SomeClass>;

to create type C with ConstructorParameters and typeof.

We use typeof to get the data type for the SomeClass class.

And then we can use the returned type to get the type of the constructor parameters with ConstructorParameters and assign the returned type to C.

Conclusion

To get argument types for a constructor or class with TypeScript, we can use the ConstructorParameters type with the typeof operator.

Sometimes, we want to add types for Axios response with React and TypeScript.

In this article, we’ll look at how to add types for Axios response with React and TypeScript.

How to add types for Axios response with React and TypeScript?

To add types for Axios response with React and TypeScript, we can set the type when we call an axios method.

For instance, we write

interface User {
  id: number;
  firstName: string;
}

to define the User interface.

Then we call axios.get and set response body type to a User array by writing

const { data } = await axios.get<User[]>("http://localhost:8080/admin/users");

in an async function.

User[] is the type of the response body return by the promise of axios.get.

Conclusion

To add types for Axios response with React and TypeScript, we can set the type when we call an axios method.