In Flow, how is the asterisk (*) type utilized and what is its counterpart in TypeScript?

Question

In Flow, how is the asterisk (*) type utilized and what is its counterpart in TypeScript?

My expertise lies mostly in TypeScript, but I recently came across Flow which seems quite similar to TS in many aspects. However, one thing that caught my attention is the asterisk (*) type in Flow. Initially, I thought it was just another way of representing "any", but as I delved into the release notes for Flow, it became evident that it's not the case. Despite going through all the official documentation, I couldn't find any mention or example of the "*" type.

So, what exactly does it signify and when should it be used? Additionally, how does it compare to its counterpart in TypeScript?

javascript types flowtype

Answer 1

Answer №1

Edit: Upon further reflection, I have discovered that using * at module boundaries is considered unsafe. For this reason, I no longer recommend its usage and it may be phased out in the future.

The purpose of * in Flow is to allow for type parameter inference without explicitly specifying it:

function foo(): Array<*> {
  return [5];
}

// Flow issues an error:
//    2:   return [5];
//                 ^ number. This type is incompatible with
//    10: (foo(): Array<string>);
//                     ^ string
(foo(): Array<string>);

(try flow)

It is important to note that * is not the same as any -- while any is a risky type, replacing * with any in this example would not trigger any errors from Flow. Switching it to number, however, would produce a similar error message.

Answer 2

Edit: Upon further reflection, I have discovered that using * at module boundaries is considered unsafe. For this reason, I no longer recommend its usage and it may be phased out in the future.

The purpose of * in Flow is to allow for type parameter inference without explicitly specifying it:

function foo(): Array<*> {
  return [5];
}

// Flow issues an error:
//    2:   return [5];
//                 ^ number. This type is incompatible with
//    10: (foo(): Array<string>);
//                     ^ string
(foo(): Array<string>);

(try flow)

It is important to note that * is not the same as any -- while any is a risky type, replacing * with any in this example would not trigger any errors from Flow. Switching it to number, however, would produce a similar error message.

Answer 3

Answer №2

The symbol * in Flow allows for type inference, as explained by Nat Mote

In contrast, TypeScript does not have a direct equivalent to the asterisk and consequently cannot be instructed to infer types. However, like Flow, it is capable of automatically inferring types under certain conditions. Visit the TypeScript Type Inference Documentation and Type Inference Examples for more information.

Explore the unique features by comparing Flow and TypeScript on this page: Differences between Flow and TypeScript

Answer 4

The symbol * in Flow allows for type inference, as explained by Nat Mote

In contrast, TypeScript does not have a direct equivalent to the asterisk and consequently cannot be instructed to infer types. However, like Flow, it is capable of automatically inferring types under certain conditions. Visit the TypeScript Type Inference Documentation and Type Inference Examples for more information.

Explore the unique features by comparing Flow and TypeScript on this page: Differences between Flow and TypeScript

In Flow, how is the asterisk (*) type utilized and what is its counterpart in TypeScript?

Answer №1

Answer №2

Similar questions

If the text is too lengthy, enclose it within a div element

Effortlessly transfer files with Ajax through Box

How can you sort an array based on a shared object property using Angular.js?

Styling triangles within a CSS triangle

Is it possible to adjust the block size for infinite scrolling in Ag-Grid?

Update Input field by eliminating white spaces using jQuery version 3.2.1

Loop through a non-array or non-object / handling both arrays and non-arrays equally

"Trouble with kendo drop-down list: onclick event not triggering when text is changed

Enable/Disable Text Editing Based on Vue Js Input

Choose the row based on the values in the columns

Instructions for transferring a JavaScript array to a Java servlet

The console correctly detects the value, but is unable to set the innerHTML property of null

Is there a more efficient method for converting an array of objects?

Changing the value in a URL String using JavaScript

Looping through an array of JSON objects in Javascript results in finding instances, however, the process records them

Tips for choosing a particular list item using jQuery: retrieve the attribute value of 'value' and showcase it on the webpage

Instantly reveal menu by pressing button

Activate hover effect on toggle button

Error encountered while adding x-ray-scraper to project using Npm

Issue with Ionic toggles not updating the correct local storage entry