Javascriptの文法に関して[ (): XXX => ()の意味と type YYYの意味 ]

Question

https://github.com/LeoLeBras/react-native-redux-starter-kit内のコードです
src/store/modules/counter.js

const INCREMENT = 'INCREMENT'
const DECREMENT = 'DECREMENT'

type Action = Object<{ type: string }>
type Counter = number

export default function counter(state: Counter = 0, action: Action): Counter {
  switch (action.type) {
    case DECREMENT:
      return state - 1
    case INCREMENT:
      return state + 1
    default:
      return state
  }
}

export const decrement = (): Action => ({
  type: DECREMENT,
})

export const increment = (): Action => ({
  type: INCREMENT,
})

上記のコードが理解できないので解説していただけないでしょうか

１、２行目は一般的な変数宣言ですので問題ありません

４、５行目ですが型を指定しつつ変数宣言しているという理解でよろしいでしょうか
Actionは valueがstring型であるtypeというキーを持っている

それ以降ですが
(): XXX => ()
この記述が理解できません、ご教授いただけないでしょうか
宜しくお願いします。

Answer 1

まず、疑問に思われている点のほとんどが、javascriptの文法というよりもFlowというjavascriptの静的型チェックツールの文法ですね。

質問では省略されてますが、元ソースには冒頭に、
/* @flow */
と宣言されているかと思います。

Flowについてはこちらの方のブログが詳しいかと思います。

上記を読んで頂いた前提で回答します。

４、５行目ですが型を指定しつつ変数宣言しているという理解でよろしいでしょうか

Actionは valueがstring型であるtypeというキーを持っている

いいえ。Flowの独自型宣言です。
「Actionという名前の、typeというキーのstringを持っている型が存在するよ」くらいの意味です。

それ以降ですが

(): XXX => ()
この記述が理解できません、ご教授いただけないでしょうか

まず、:XXXについてはやはりFlowの型チェックです。
戻り値がXXX型かどうかのチェックですね。

では、:XXXを除いた ()=>()は何かというと、
ES2015から追加されたアロー関数です。

つまり、

export const decrement = (): Action => ({
  type: DECREMENT,
})

とは、
Actionという型で、{type: DECREMENT}を返すアロー関数をdecrementという名前の定数でexportしてるということです。
このexportというのもES2015で追加された文法なので、もしよろしければES2015で調べてみて下さい。

Comments

[actine]

ありがとうございます
すっきりしました！
Flowについて学習したいと思います。

Answer 2

解決しました
Typescriptの文法でした。
では、なかったみたいです。
回答者の方ありがとうございます。