17

Flowを Vue 2 webpack-templateに追加しようとしています。記録のために、私はランタイムのみを使用しています（ファイルは.vueフォーマット/標準に従います）。

.vue私の最初の試みは、cli を介してフローを使用することでしたが、ファイルの処理方法がわからないため、機能しないことに気付きました。

私の2番目の試みは、webpackローダー（つまり、 flow-status-webpack-plugin）を追加し、ビルドの一部としてフローチェックを実行することでした（eslintたとえば、作品のように）。うまくいかなかったので、他のオプションを検討しました。

私の 3 回目の試みは、最初はかなり成功した、babel プラグインを使用することでした。babel-plugin-typecheck + babel-plugin-syntax-flow を使用しました。Webpack には出力はありませんが、型エラーによりアプリが壊れます。私はこのアプローチで問題ありません。CI で問題なく動作し、ビルドが壊れます。

これが私の.babelrc見た目です：

{
  ...
  "plugins": [
    ...
    ["typecheck", {
      "disable": {
        "production": true
      }
    }],
    "syntax-flow",
    "transform-flow-strip-types"
  ],
  ...
}

この時点で、フローはグローバル メソッドに対して期待どおりに機能しますが、Vue コンポーネント内では機能しません。

<template>...</template>

<script>
/* @flow */
const flowIt = (a: number): number => {
  return a * 10
}

flowIt(20)
flowIt('bah') // Uncaught TypeError: Value of argument "a" violates contract. Expected: number Got: string

export default {    
  mounted: function () {
    flowIt(20)
    flowIt('bah') // Sees nothing wrong here
  }
}
</script>

<style>...</style>

その上で、目標は Flow のためにアプリ コードを変更しないことです。理想的には、Vue を通常どおり使用するだけです。

<template>...</template>

<script>
/* @flow */
export default {  
  methods: {
    flowIt (a: number): number {
      return a * 10
    }
  },

  mounted: function () {
    this.flowIt(20)
    this.flowIt('bah') // Should throw a type error.
  }
}
</script>

<style>...</style>

Flow での私の経験と同じように、これが Vue と関係があるかどうかはわかりません (ヒント: それほど経験がありません)。Vue コンポーネントがどのように構成されているかを Flow に「理解」させるタイプ ファイルが必要だと考えています (ディレクティブについても同様です)。

経験豊富な方へ、どのようにして Flow を Vue + webpack で適切に動作させましたか?

4

5 に答える 5

5

<template>、<style>および<script>部分をコメントアウトすることにより、.vue コンポーネントの JS 部分に引き続き Flow を使用できます。

 /* @flow
 <style>
 ...style definitions here
 </style>
 <template>
 ...html...
 </template>
 */
 // <script>
 export default {  
   methods: {
      flowIt (a: number): number {
         return a * 10
      }
   },

   mounted: function () {
      this.flowIt(20)
      this.flowIt('bah') //Won't throw error, as flowIt is attached to
                         //this.
   }
}
// </script>

vue コンパイラーは<template>, <style> and <script>、コメントが付けられた場合でもセクションを認識しますが、フロー タイプ チェッカーはそれらを無視し、適切な JavaScript セクションのみを処理します。

残念ながら、Flow は (Vue コンポーネント自体に) 接続されている関数やオブジェクトをチェックできないため、これで 100% のタイプ カバレッジを得ることはできませんがthis、外部関数への呼び出しの Flow のタイプ チェックの恩恵を受けることができます (例: Vuex アクションとゲッター、他の JavaScript インポート モジュール)、およびコンポーネントのメソッド内でビジネス ロジックを拡張した場合、メソッド パラメーターを操作するときに、ある程度のタイプ セーフを取得できます。

于 2016-10-18T14:48:43.043 に答える