Vue.js と TypeScript 言語の組み合わせ、保守可能なエンタープライズレベルのフロントエンドプロジェクトを構築する実践-Vue.js-php.cn

Vue.js と TypeScript 言語の組み合わせ、保守可能なエンタープライズレベルのフロントエンドプロジェクトを構築する実践

王林

リリース： 2023-08-01 14:37:20

オリジナル

1373 人が閲覧しました

Vue.js は人気のあるフロントエンドフレームワークですが、TypeScript は JavaScript の厳密に型指定されたスーパーセットです。これら 2 つのツールを併用すると、コードの保守性と開発効率が向上します。この記事では、Vue.js と TypeScript を使用して保守可能なエンタープライズレベルのフロントエンドプロジェクトを構築する方法を説明し、コード例を示します。

1. 準備

まず、Vue.js プロジェクトを迅速に構築できるように、最新バージョンの Vue CLI がインストールされていることを確認してください。 Vue CLI は、次のコマンドでインストールできます:

npm install -g @vue/cli

ログイン後にコピー

次に、プロジェクトのデフォルト言語として TypeScript を使用してプロジェクトを作成します:

vue create my-project

ログイン後にコピー

プロジェクトの作成時に、手動構成を選択し、次に TypeScript を選択しますデフォルトの言語として。プロンプトに従って構成し、作成が完了するまで待ちます。

2. TypeScript の設定

デフォルトでは、Vue CLI によって TypeScript 関連の設定が構成されています。プロジェクトのルートディレクトリに tsconfig.json ファイルがあり、TypeScript 構成情報が含まれています。

このファイルでは、TypeScript のコンパイルオプションと型チェックルールを構成できます。たとえば、厳密モードを有効にしたり、出力ディレクトリを構成したりできます。以下は簡単な tsconfig.json の例です:

{
  "compilerOptions": {
    "strict": true,
    "outDir": "dist"
  }
}

ログイン後にコピー

3. コンポーネントの作成

TypeScript を使用して Vue.js コンポーネントを開発する場合、型を正しく定義する必要があります。コンポーネントの。 Vue.js は、コンポーネントで使用できる Vue 型を提供します。

以下は簡単な TypeScript コンポーネントの例です:

<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="onClick">Click me</button>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';

@Component
export default class MyComponent extends Vue {
  private message: string = 'Hello, world!';

  private onClick(): void {
    alert('Button clicked');
  }
}
</script>

ログイン後にコピー

この例では、 import { Component, Vue } から 'vue-property-decorator' Component デコレータと Vue タイプ。 @Component デコレータは、コンポーネントが Vue.js によって正しく処理されることを保証するために、コンポーネント定義で使用されます。

コンポーネントはプライベートプロパティ message を定義しており、その型は文字列です。 {{ メッセージ }} は、テンプレートで表示するために使用されます。さらに、ボタンの click イベントで onClick メソッドが呼び出されます。

4. 型チェック

TypeScript は、コードを記述するときに型チェックを実行して、よくある間違いを回避するのに役立ちます。 Vue.js コンポーネントでは、デコレーターと型アノテーションを使用して型チェックを強化できます。

上記の例では、:string を使用して、属性 message のタイプに注釈を付けました。こうすることで、TypeScript は文字列値を message にのみ割り当てることができるようになります。

コンポーネントで間違った型を使用すると、コンパイラは対応するエラープロンプトを表示します。これにより、デバッグ中のエラーが大幅に減少します。

5. インターフェイスを使用する

実際のプロジェクトでは、API 応答のデータ形式、コンポーネントの小道具、Vuex 状態など、いくつかの複雑なデータ構造を定義する場合があります。インターフェイスを使用してこれらのデータ構造を定義することにより、コードの保守性と可読性を向上させることができます。

次はインターフェイスの使用例です:

interface User {
  name: string;
  age: number;
}

@Component
export default class MyComponent extends Vue {
  private user: User = {
    name: '',
    age: 0
  };
}

ログイン後にコピー

この例では、User という名前のインターフェイスを定義します。これには 2 つのプロパティがあります: name と 年齢 。このインターフェイスは、user オブジェクトを定義し、そのプロパティを初期化するためにコンポーネントで使用されます。

このようにして、コンポーネントで user を使用する場合、TypeScript は name プロパティと age プロパティ、およびそれらのプロパティにのみアクセスできるようにします。タイプは正しいです。

6. クラスデコレーターを使用する

Vue.js コンポーネントでクラスデコレーターを使用すると、ライフサイクルフック関数やミックスインの追加など、より多くの機能を提供できます。 Vue.js は、これらの関数を実装するための vue-class-component という名前のパッケージを提供します。

以下はクラスデコレータの使用例です:

import { Component, Vue } from 'vue-property-decorator';

@Component({
  mixins: []
})
export default class MyComponent extends Vue {
  // ...
}

ログイン後にコピー

この例では、 import { Component, Vue } from 'vue-property-decorator' を渡します。 Component デコレータと Vue タイプをインポートしました。また、mixins 属性を含むオブジェクトは @Component デコレーターに渡され、他のオブジェクトと混合するために使用できます。

クラスデコレータを使用すると、重複するコードを減らしながら、コンポーネントをより簡単に定義および保守できるようになります。