実践AST FlowからTypeScriptへの変換
About meNode.js, React, React Native, React Native for web FlowからTypeScript(TS)に移行中主要な移行対象: 12リポジトリ中身はmonorepoなので実質5-60パッケージ→ AST変換でいけないかな
What the Flow team has been up to
Hello! (And sorry for the radio silence.)A lot of our open-source users are rightfully observing that the Flow team has effectively stopped paying attention to an ever-growing list of issues and PRs on GitHub. And while there has been a lot of activity in terms of GitHub commits during this time, there has been little to no communication about our roadmap. We understand that this state of affairs
FlowのドキュメントにあるコードをひたすらTypeScriptのPlaygroundで試す - Qiita
Flow 0.74 Typescript 2.9 TypeScriptの設定は以下な感じ 先にまとめ やってみることによって学びがあった。良かった。 FlowのObjectTypeは必要なプロパティがあれば同じ型として使えるがTypeScriptの場合はそうではない。 基本型はだいたい同じだが、mixedがないのとvoidの挙動が違う。 Maybe型がない。 TypeScriptは型を書かないとanyになるがFlowは推論は推論してくれる 多分、お互いに似たようなことはできるが、実際にやるにはそれなりの経験が必要そうだ。逆をやってみるのも面白そう。 これをやってみた感じからするとFlowのほうが好み。 Stringへの暗黙型変換 // @flow "foo" + "foo"; // Works! "foo" + 42; // Works! "foo" + {}; // Error! "fo
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
Flowtype と TypeScript で両方動きそうなコードを書く - Qiita
最初に知るべきこととして、Flow も TS も型システムのセマンティクスがよく似ている。 Redux & Typescript typed Actions with less keystrokes の 記事のかなり魔術的なコード、実は flow でも ts でもそのまま動いたりする。 自分は両方頻繁に使うので(flow寄りだが)、どういうコードを書くと手戻りが少ないか、考えながらコードを書いてるか書き出してみる。 お断り flowtype と typescript の、特に typescript 的なベストプラクティスに反する可能性がある。 完全にコンパチにするのは不可能だが、極力似たイディオムを使う。 どれも「極力頑張る」という感じで原則禁止というわけではない。大事なのは相互にコードを持ち出す時のポータビリティ。最悪なのは型がないという状態。 あと自分は TypeScript の非標準
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 されて
flowtypeで既存の型に述語を付与してassertを削除しよう - Qiita
function foo(str) { console.assert(typeof str === 'string'); console.assert(str.length > 0); // 何かの処理 str.charAt(0); } assertを使って事前条件を書いて開発し、unassertを使ってプロダクションにリリースするときに削除スタイルは最近良く見かけるようになりましたね。 動的型付けなJavaScriptで安全なコードを書けるようになるassert最高！！と言いたいところですが、実行時にしかチェックができないんですよね。 そこで、せっかくflowtypeで静的な型付けを行っているので、ここは事前にチェックできるように型で解決を行いたいと思います。 1. 型アノテーションを付与する まずは先のコードに型アノテーションを付与して一つ目のassertを削除します。 functio
Flow導入して数ヶ月がたった所感 - tomoima525's blog
ReactNativeプロジェクトで、型がないことによるつらいシーンが多くなり(特に変数の解釈に起因するバグ)、Facebook製の静的型解析ツールであるFlowを数ヶ月前に導入しました。導入時の学びと、しばらく運用して感じていることについて個人的な感想を書きました。 Flow選定理由 Javascriptで静的な型付けをするといえばTypeScript(正確にはJavascriptのスーパーセット)がありますが、プロジェクト途中からの導入しやすさの観点からFlowにしました。Flowはお作法(行頭に @flow つける等)さえ押さえれば誰でも使えることから導入障壁はだいぶ低いといえます。導入のメリットについては以下のスライドがとてもわかりやすいです。 speakerdeck.com flow status でプロジェクトに対して静的型解析を走らせることもできますが、 コーディング時にワー
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のUtility Typeについて その3 - Qiita
この記事ではflowtypeのv0.50.0からv0.59.0にかけて追加されたUtility Typeについて記載しています。 それ以前のバージョンで追加されたUtility Typeについては下記を参照してください。 flowtypeのUtility Typeについて その1 flowtypeのUtility Typeについて その2 $ElementType $ElementTypeはTにObjectを指定して、stringにそのキーの文字列を渡すと対応した値の型を返します。 これだけ聞くと$PropertyTypeと同じように感じますが、$PropertyTypeではキーにString Literalのみの指定だったのが、$ElementTypeではキーにStringを指定できるため適用できる範囲が広くなりました。 # Try Flow declare function getOb
Flowtype 導入メモ - メモを揉め
結構な数のつまづきがあったのでメモしておきます。 なお、Flow は現在も活発に開発中のため、そこそこカジュアルにBreaking Changeする可能性があります。 この記事はあくまでつまづきやすかったポイントを残すにとどめているので、基本は公式のドキュメントを参考にすることをお勧めします。 Flow Documentation つまづきポイント Nuclide の設定がややこしい Flow サーバーがそこそこ不安定 Flowのコードは2種類ある FlowのエラーとESLintのエラーがある class-fields っぽい書き方とオブジェクトリテラルっぽい書き方がある ドキュメントやエラーメッセージに出て来る英語が難しい ドキュメントの擬似コード 正確な型を表現することの難しさ 一つ一つの難易度はそれほど高くなくても、二つ以上のつまづきが同時に起こる事で対処が難しくなる。 問題を切り分
Type Reference | Flow
React exports a handful of utility types that may be useful to you when typing advanced React patterns. In previous sections we have seen a few of them. The following is a complete reference for each of these types along with some examples for how/where to use them. These types are all exported as named type exports from the react module. If you want to access them as members on the React object (
Higher-order Components | Flow
A popular pattern in React is the higher-order component pattern, so it's important that we can provide effective types for higher-order components in Flow. If you don't already know what a higher-order component is then make sure to read the React documentation on higher-order components before continuing. You can make use of the React.AbstractComponent type to annotate your higher order componen
Event Handling | Flow
The React docs for handling events show how an event handler can be attached to a React element. To type these event handlers you may use the SyntheticEvent<T> types like this: 1import {useState} from 'react';2import * as React from 'react';3 4function MyComponent(): React.Node {5 const [state, setState] = useState({count: 0});6 7 const handleClick = (event: SyntheticEvent<HTMLButtonElement>) => {
Components | Flow
Adding Flow types to your React components is incredibly powerful. After typing your component, Flow will statically ensure that you are using the component in the way it was designed to be used. Functional ComponentsAdding Flow types to a functional component is the same as adding types to a standard function. Just create an object type for the props and Flow will ensure that the props passed to
Immutable.RecordとFlow - Augmented Usamimi
Immutable.jsを導入するとやりたくなることランキング3位くらいに，Immutable.Recordを継承してモデルクラス的なものを作るというものがある． また，Flowを利用してこのクラスに型定義をつけることができれば，さいきょうのモデルクラスを実装できる気がしてくる．Immutable.jsは自前でFlowの型定義ファイルを持ってるので実現も難しくなさそう． Immutable.jsやFlowと同じくFacebook大先生のライブラリであるDraft.jsでも前述のようなモデルクラスを実装している（e.g. CharacterMetadata）． …が，じつはそんなにうまいこといかない（Try flow）． const defaultValue = { id: 1, title: "test", }; type EntityConfig = typeof defaultValu
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Migrating a Flow + React Native app to TypeScript
GitHub - rradczewski/flowtypify
GitHub - entria/flow-typed-wip: A central repository for Flow-Typed WIP library definitions