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

extract information from the request header

A guide on effectively mocking a Vuex store within the parentComponent of VueJS test-utils

Exploring Three.js: How to Integrate and Utilize 3D Models

Modify text using JQuery when the span is clicked

Change the data-theme using jQuery Mobile once the page has finished loading

The issue of checkboxes not being sorted properly in Slick Grid

Handling CORS in Vue.js applications

Errors in Chartist.js Data Types

Compel instantaneous XMLHttpRequest / Ajax without any prior notification

Can you explain the extent to which JavaScript's setTimeout() and clearTimeout() apply?

As you scroll, the top block in each of the three columns will remain fixed within its

Attempting to craft a multi-filter feature using AngularJS that will allow for the precise filtering of JSON data based on both month and year identifiers

Error message: "An issue occurred: Unable to access undefined properties (specifically, borderRadius) in MUI react."

Incorporating a timer feature into the code for my memory game

Update a section of my PHP webpage using setInterval()

Is it possible to receive live updates from a MySQL database on a webpage using node.js and socket.io?

Converting numbers in React Native, leaving only the last four digits untouched

Automatically populating state and city fields with zip code information

Bring in d3 along with d3-force-attract

Having trouble implementing styles for an element selected using the document.getElementsByClassName() method