recompose と ReactRedux.connect の HOC を Flow で合成して型付けする - Qiita
flow@60.1 これらの型定義の導入を前提とする https://github.com/acdlite/recompose/blob/master/types/flow-typed/recompose_v0.24.x/flow_v0.55.x-/recompose_v0.24.x.js https://github.com/flowtype/flow-typed/blob/master/definitions/npm/redux_v3.x.x/flow_v0.55.x-/redux_v3.x.x.js ユーティリティタイプや段階的な推論を組み合わせるテクニカルなコードになったが、一度理解してしまえば型付けされた props が手に入る。 /* @flow */ import React from 'react' import { bindActionCreators, combineR
2018年は、reduxとeslintとflowとwebpackを捨ててみようと思う - Qiita
2017年版と2018年版でwebアプリケーション作成時のreactの（マイ）ベストプラクティクスを以下のリポジトリに、まとめてみたので記事にしてみました。 react-best-practices https://github.com/wheatandcat/react-best-practices/tree/master ちなみにタイトルは、その過程で2018年版に削除したpackageです（理由は後述） github サンプルコードの内容は、ログイン/ログアウト + fetchした内容を画面に表示するだけです （ただのサンプルなので、実装はハリボテです） 2017年版 https://github.com/wheatandcat/react-best-practices/tree/master/2017years 2018年版 https://github.com/wheatandc
flow の型定義からそれを満たすインスタンスを作る - Qiita
やりたいこと storybook のカタログを flow から自動生成できないか、と思って調べていた。 こんなコードがあったとする。 /* @flow */ type Point = { x: number, y: number } type Props = { a: string, p: Point, c: { d: { e: any } }, arr: Array<number> } const props: Props = { a: 'foo', p: { x: 1, y: 2 }, c: { d: { e: 3 } }, arr: [1] } export default props これから props のインスタンスを知らない状態で、型からそれを満たすインスタンスを生成したい。 flow-bin と flow-parser-bin を使って export default されて
Static HOC analysis for recompose and redux by flowtype
/* @flow */ import React from 'react' import { bindActionCreators, combineReducers } from 'redux' import { compose, lifecycle, pure, type HOC } from 'recompose' import { connect } from 'react-redux' // reducer const INC = 'inc' const inc = () => ({ type: INC }) type Counter = { value: number } type Action = $Call<typeof inc> const counter = (state: Counter = { value: 0 }, action: Action): Counter
Flowtype導入のための指針・実際の運用について - Qiita
このドキュメントの目的 自分は趣味でFlowをずっと使っていて、またプロダクションでも今まで3プロジェクトほどにFlowを導入した。その知見。 「Flow は便利そうだけど、怖い」「いれてみたら色々ハマったからクソ」「わからん、なにもかも…」という人に対し、自分がいままで出くわしたパターンや、聞かれた疑問について、メジャーな解法を提示する。 なぜFlowを導入するか Babel から段階的に導入することが出来る React の JSX にも推論を入れることができる 部分的に適用できる ASTがES準拠であり、ESLintなどがツールが使える(TSは独自AST) それ自身ランタイムに全く影響はないので落とすのも簡単 実際にはReactと一緒に使うのが、エコシステムもユースケースも揃っていて、一番効果を発揮するだろう。それか、小さい npm モジュールを自分で書くとき。 型のメリット/デメリッ
flowtypeによりFluxにおいて型安全を手に入れる - Qiita
この記事はfreee Engineers Advent Calendar 2016の5日目です。 こんにちは、freeeのエンジニアの @joe-re です。 僕からはflowtypeによる、Fluxアーキテクチャへの型システムの導入についてお話しさせていただきます。 背景 Reactによるコンポーネント指向設計、Fluxによる単方向フローによって、僕たちは階層化されすぎているViewにおけるイベントの発行と購読、煩雑なDOM操作と状態管理から解放されました。 Fluxアーキテクチャにおいては、Component、ActionCreator、Storeがそれぞれの層で完全に分離されています。StoreはComponentの存在を知らないし、ComponentはStoreを購読するだけで中のロジックは一切知らないし、ActionCreatorはただの関数群です。 チーム開発の中でこの関係性を
React with Flow
Bad // ERROR: Must be a ReactElement const element = 'just a string'; // type is interred as string ReactDOM.render(element, mountNode); Generics aka Parametric Types Consider this type hierarchy class Animal { name: string; constructor(name: string) { this.name = name; } } class Dog extends Animal { // just to make this different from cat goodBoyFactor: number; } class Cat extends Animal { purrFa
型なき世界のためのflowtype入門 - Qiita
http://qiita.com/mizchi/items/3bbb3f466a3b5011b509 で紹介したモダンJSスタックの上に、flowtype を導入して型をボトムアップに追加していくアプローチを紹介します。 なぜflowtypeか、そのゴールは 流行っているライブラリのみを組み合わせて使う場合や、バックエンドとの連携において型が十分に提供される環境なら、正直、flowtypeよりtypescriptでいいと思っています。flowtypeが力を発揮する環境は、既存のJSが大量に存在する環境や、railsなどの動的な型のフレームワーク環境で、静的な定義が抽出できない環境だと思います。 よほど品質が低いライブラリを使わないかぎり、バグはほとんど自分が記述したコードによって発生します。なので、まずは「自分が書いたコードのIFを明確にし、その静的なチェックを行なう」、というのを最初の目
Type checking React with Flow v0.11
This is an old post - for an up-to-date guide see Flow Cookbook: Flow & React. Flow v0.11 was released recently. The latest set of changes really improve type checking in React apps. But there are some guidelines to follow to get the full benefits. Use ES6 classes React added support in version 0.13 for implementing components as native Javascript classes (more information on that here). The lates
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Flowtype Introduction
最近のFlowtype事情とReact+Flowtype連携