タイプチェックは、Vueでは扱いにくい概念です。 プレーンなスクリプトファイルで行うのは簡単ですが、Vue単一ファイルコンポーネントは動作させるのがはるかに難しい獣です。 TypeScriptを選択する人もいれば、おそらくクラスベースのコンポーネントのために、TypeScriptの重量級の性質と、一般的なツールとの統合の難しさを努力する価値がないと感じる人もいます。 Facebookのフローは、標準の webpack + babel + eslint ツールチェーンにはるかによく適合するタイプチェッカーであり、で一般的に使用されています。 ]Reactプロジェクト。 一度設定すれば、うまくいきます!

FlowVueと連携させるには、いくつかの依存関係と、それらをすべて正しく連携させるためのマイナーな構成調整が含まれるため、少し注意が必要です。まず、それらをインストールすることから始めましょう。

インストール

vue-cliのwebpack-simple テンプレートから、インストールする9つの追加の依存関係があります。 それぞれの機能は次のとおりです。

バベル:

  • babel-plugin-syntax-flow-Babelのフロー構文のサポートを追加します。
  • babel-plugin-transform-class-properties-クラスプロパティと静的メソッドのサポートを追加します
  • babel-plugin-transform-flow-strip-types -Babelでトランスパイルする前に、ソースファイルからタイプアノテーションを削除します。

エスリント:(オプション)

  • eslint-Eslint。 これはJSの事実上のリンターであり、さまざまなエディターやIDEも統合されています。 現在これを使用していない場合は、使用を開始することをお勧めします。
  • babel-eslint-ソースファイルの解析にBabelのパーサーを使用するようにEslintにパッチを適用します。
  • eslint-plugin-html-EslintがHTMLファイルを処理できるようにします。 (すなわち。 script タグ内にあるものだけをリントします。)
  • eslint-plugin-flowtype-errors -フローエラーをEslintを介して、エディターのeslintプラグイン(ある場合)に渡します。
  • eslint-plugin-vue-Vueを使用したEslint用の意見のあるユーティリティ。
  • eslint-config-vue-Vueを使用したEslintの構成について意見を述べました。

フロー:

  • flow-bin-フロータイプチェッカー。

YarnまたはNPMを介してインストールします。

# Yarn
$ yarn add \
  babel-plugin-syntax-flow \
  babel-plugin-transform-class-properties \
  babel-plugin-transform-flow-strip-types \
  eslint \
  babel-eslint \
  eslint-plugin-html \
  eslint-plugin-flowtype-errors \
  eslint-plugin-vue \
  eslint-config-vue \
  flow-bin \
-D

# NPM
$ npm install \
  babel-plugin-syntax-flow \
  babel-plugin-transform-class-properties \
  babel-plugin-transform-flow-strip-types \
  eslint \
  babel-eslint \
  eslint-plugin-html \
  eslint-plugin-flowtype-errors \
  eslint-plugin-vue \
  eslint-config-vue \
  flow-bin \
--save-dev

構成

.babelrc

.babelrcファイルの最後にbabelプラグインを追加します。

{
  ...
  "plugins": [
    "babel-plugin-transform-class-properties",
    "babel-plugin-syntax-flow",
    "babel-plugin-transform-flow-strip-types"
  ]
}

.eslintrc

.eslintrcファイルを次のように設定します。

{
  "parser": "babel-eslint",

  "plugins": [
    "html",
    "flowtype-errors"
  ],

  "extends": [
    "vue"
  ],

  "rules": {
    "flowtype-errors/show-errors": 2
  }
}

.flowconfig

最後に、プロジェクトのルートディレクトリに.flowconfigファイルを作成します。 空にすることもできます。存在することを確認してください。

使用法

各ファイルまたはスクリプトセクションの上部に/* @flow */アノテーションを追加するだけで、.jsファイルまたは.vue単一ファイルコンポーネントでフローを使用できるようになりました。

エディターまたはIDEに適切なeslintパッケージがインストールされていると仮定すると、エラーまたは警告が発生するたびに、リアルタイムのエラーチェックと位置アノテーションが必要になります。

stupid-file.js
/* @flow */

const doSomethingStupid(stringArg) {
  // Flow should show an error here, "The operand of an arithmetic operation must be a number."
  return stringArg * 3109;
}

console.log(doSomethingStupid(`I'm stringy`))
ExampleComponent.vue
<template>
  <p>I'm made with Flow!</p>
</template>

<script>
/* @flow */

const randomThing: string = 'Boop!'

export default {
  created() {
    console.log(randomThing)
  }
}
</script>

そして、あなたはそれを持っています! ツールチェーン内の他の何も変更する必要はありません。

フローについて学ぶことはまだたくさんあります。 まだ慣れていない場合は、次のステップとして FlowDocsをお勧めします。 楽しみ!