javascript - ES6语法

Question

While checking the source of one open source project ( react data grid ), I've stumbled upon this syntax which I couldn't wrap my head around:

class EditorBase extends React.Component {

  getStyle(): {width: string} {
    return {
      width: '100%'
    };
}

Especially the getStyle(): { part.

I've tried to consult other SO questions, MDN function and classes references but didn't any mentions of the above syntax.

What am I missing here?

Answer 1

So this looks to be a usage of Flow-type (created by Facebook) which is a static type checker for Javascript. (Which you can think of like a Linter but for Data Types instead of syntax)

So the part that looks confusing may be this bit:

{width: string}

In flow, when you have a colon after the function's parenthesis, it will denote the expected type of return from that function.

This code notifies Flow that the function should return an object that has a key of 'width' that should be of type 'string'.

Check out Flow.org for more information, and how to get started using it yourself!

Answer 2

The code you are referring to checks the types of variables being passed to a method.

Flow code/type checks have only use in development mode and will be stripped by babel.

Flow is a static type checker for JavaScript.

Read more about flow .

Here is babel plugin that is being used for react-data-grid. It is actually deprecated, you should instead use babel flow-runtime (in case you would like to use it).