javascript - ES6 syntax

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?

score 2 · Accepted Answer · answered Apr 25 '17 at 16:40

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!

loelsonk · Answer 2 · 2017-04-25T17:09:05.700

1

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.

javascript - ES6 syntax

2 Answers2