Category: TypeScript

Sometimes, we want to pass an array as arguments in TypeScript.

In this article, we’ll look at how to pass an array as arguments in TypeScript.

How to pass an array as arguments in TypeScript?

To pass an array as arguments in TypeScript, we can rest the rest synax.

For instance, we write

const m1 = (...args: any[]) => {
  //...
};

const m2 = (str: string, ...args: any[]) => {
  m1(...args);
};

to create the m1 function that takes an unlimited number of arguments.

And we get the arguments from the args array.

Then in m2, we call m1 with the args entries spread in the parentheses as arguments.

Conclusion

To pass an array as arguments in TypeScript, we can rest the rest synax.

To fix the "Property ‘allSettled’ does not exist on type ‘PromiseConstructor’.ts(2339)" error with TypeScript, we can add the allSettled method to the PromiseConstructor type definition.

For instance, we write

declare interface PromiseConstructor {
  allSettled(
    promises: Array<Promise<any>>
  ): Promise<
    Array<{ status: "fulfilled" | "rejected"; value?: any; reason?: any }>
  >;
}

to add the allSettled method into the PromiseConstructor interface.

We add the parameter with promises: Array<Promise<any>>.

And the return type is Promise< Array<{ status: "fulfilled" | "rejected"; value?: any; reason?: any }>.

Now we can use Promise.allSettled without compiler errors.

Sometimes, we want to specify parameter type as one of many types instead of any type in TypeScript.

In this article, we’ll look at how to specify parameter type as one of many types instead of any type in TypeScript.

How to specify parameter type as one of many types instead of any type in TypeScript?

To specify parameter type as one of many types instead of any type in TypeScript, we can create a union type.

For instance, we write

const myFunc = (param: string[] | boolean[] | number[]): void => {
  //...
};

to create the myFunc function that takes the param parameter which can either be a string arrat, number array or boolean array.

And the return type is void so it returns nothing.

Conclusion

To specify parameter type as one of many types instead of any type in TypeScript, we can create a union type.

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.