Vueコンポーネントの型チェックを改善する4つの方法

TypeScriptはますます新しいプロジェクトを開始するときに行くことになっている.それは緩く型付けされたコードから生じている厄介なバグを捕えて、より大きなコードベースのリファクタリングを容易にするということを証明しました.そのために永遠に感謝します🙌.
しかし、Vueを使用してtypescriptを使用することになるといくつかの痛みポイントです.主な原因は、単一のファイル構成要素であり、typescriptコンパイラによって完全に精査されない.エラー<template> タグは検出されず、生産環境に行き詰まることができます.コンポーネントのプロパティ違反は、実行時にのみ検出されます.
ここでVueコンポーネントの100 %を確認する4つの方法を概説します.

1 .Vue JSX Factory
最初の2つの勧告は、JSXを支持する単一のファイルコンポーネントを分類します.
結局は.vue ファイルはVueや他のコミュニティ管理プロジェクトだけで知られている独自の構文です.JSXは標準ではありませんが、typescriptの世界ではそのように考えられます.我々はそれを利用することができます!
Vue JSX工場は、我々が直接使うことができる唯一の方法ですtsc (またはesbuild )コードをコンパイルする.バベルはオプションの強化-要件ではありませんので、我々のプロジェクトのセットアップは非常に軽量です.実際には、唯一の必要なパッケージですvue-jsx-factory . 更新後tsconfig.json 次に示す

{
  "compilerOptions": {
    "jsx": "react",
    "jsxFactory": "j"
  }
}

コンポーネントはJSXを使用して定義できます.重要なのはj 関数は、コンポーネントを定義するときにスコープ内になければなりません:

// Header.tsx
import { j } from "vue-jsx-factory";
import { defineComponent } from "@vue/composition-api";

export const Header = defineComponent({
  name: "Header",
  props: {
    title: {
      type: String,
      required: true,
    },
  },
  render() {
    return (
      <header>
        <h1>{this.title}</h1>
      </header>
    );
  },
});

いくつかのディレクティブでは失われます.v-model ), これらは後日有効になった.このルートを下るとVue LoaderやVue Jestのようなふわふわ依存性がたくさん削除されます.

2 .Babel Preset JSX
JSXはまた、バベルプリセットの助けを借りて書かれることができます.それは公式にVueコアチームに支えられて、Vue JSX工場より多くの特徴を持ちます.Babelはすでにプロジェクトに統合されており、パッケージをインストールしてBabel設定を更新しています.

npm install -D @vue/babel-preset-jsx @vue/babel-helper-vue-jsx-merge-props

// babel.config.js

module.exports = {
  presets: ["@vue/babel-preset-jsx"],
};

いくつかのバベルマジックのおかげで、レンダリング関数は自動的にスコープにインポートされますので、コンポーネントファイルに手動でインポートする必要はありません.

3 .Vetur Terminal Interface (VTI) ⚠
有名なvetur対コードプラグインへの拡張とコマンドラインツールとしても利用できます.残念なことに、それがまだ不安定であるとマークされます、しかし、私がどこに向かうかについて見るために興奮しています!この記事を書く時には、一つのコマンドで実行できます.

npx vti # at project root

4 .TypeCheck for Vue
最後に、しかし、少なくとも、Vue開発者の経験は、チェックアウト、別の方法を単一のファイルコンポーネントをチェックするために、私たちを提供します.現在、それはあなたのビルドと並んでコマンドとして実行され、VTIのように、まだ初期です最初の公開リリース2020年12月28日です!

結論
Veueを使用すると、タイムススクリプトと一緒に時間が早すぎることができます.タイプの安全性を達成するためのコミュニティを維持する依存関係に頼って危険であり、理想的な世界避けられる.Vue 3とVITEには希望がありますが、生態系が追いつくまでには少し時間がかかります.平均時間では、Vue 2を使用してこれらの追加ツールを保証の余分な層を見つけることができます.
あなたがVUE 3に完全に移行することなく、それらの利点を早く得ることを望むならば、構成APIはVue 2ですでに利用できます.defineComponent より良い型推論Vue.extend またはクラスのコンポーネントの構文soon to be deprecated ).
読書ありがとう!