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

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

フロントエンド テクノロジの継続的な開発により、Vue.js は非常に人気のあるフロントエンド フレームワークになりました。 TypeScript は JavaScript のスーパーセットとして、強力な型指定、オブジェクト指向、モジュール性などの機能を提供し、コードをより読みやすく、保守しやすくします。この記事では、Vue.js と TypeScript を組み合わせて、保守可能なエンタープライズ レベルのフロントエンド プロジェクトを構築する方法を紹介します。

1. プロジェクトの初期化

まず、Vue.js プロジェクトを作成する必要があります。コマンド ラインを開き、プロジェクトのルート ディレクトリを入力し、次のコマンドを実行します。

vue create my-project

これにより、my-project という名前の Vue.js プロジェクトが作成されます。プロジェクトでは、Vue.js の TypeScript 型宣言ファイルと関連する依存関係をインストールする必要があります。次のコマンドを実行します。

cd my-project
yarn add vue @types/node @types/vue

インストールが完了したら、TypeScript を使用して Vue.js コードの記述を開始できます。 。

2. TypeScript サポートの追加

まず、TypeScript コンパイル オプションを構成するために tsconfig.json ファイルを作成する必要があります。プロジェクトのルート ディレクトリに tsconfig.json ファイルを作成し、次の内容を追加します:

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "moduleResolution": "node",
    "esModuleInterop": true,
    "noImplicitAny": false,
    "allowSyntheticDefaultImports": true,
    "experimentalDecorators": true
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

この構成ファイルでは、コンパイル ターゲット、モジュール仕様、厳密モードなどを含む、いくつかの TypeScript コンパイル オプションを設定します。同時に、TypeScript ファイルの包含ルールと除外ルールも構成しました。

次に、TypeScript をサポートするためにプロジェクト内のいくつかの構成ファイルを変更する必要があります。まず、src/main.js ファイルを開き、名前を src/main.ts に変更し、内容を次のように変更します。

import Vue from 'vue'
import App from './App.vue'

new Vue({
  render: h => h(App),
}).$mount('#app')

次に、# を開きます。 ##src/App.vue ファイルの名前を src/App.ts に変更し、内容を次のように変更します。

<template>
  <div>
    <h1>{{ msg }}</h1>
  </div>
</template>

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

@Component
export default class App extends Vue {
  msg: string = 'Hello, TypeScript!'
}
</script>

<style scoped>
 /* 样式代码 */
</style>

この例では、vue-property -decorator ライブラリは、クラス コンポーネントを使用して Vue.js コンポーネントを作成するために使用され、TypeScript はコンポーネントの型を定義するために使用されます。

さらに、

babel.config.js ファイルの内容を次のコードに変更する必要もあります:

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ]
}

このようにして、 TypeScript の設定 作業が完了したら、TypeScript を使用して Vue.js コードの記述を開始できます。

3. TypeScript を使用して Vue.js コンポーネントを作成する

TypeScript を使用して Vue.js コンポーネントを作成する場合、デコレータを使用してコンポーネントをマークし、型アノテーションを使用してデータとメソッドを宣言できます。タイプ。以下に例を示します。

<template>
  <div>
    <h1>{{ name }}</h1>
    <button @click="sayHello">Say Hello</button>
  </div>
</template>

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

@Component
export default class HelloWorld extends Vue {
  name: string = 'Vue.js'

  sayHello(): void {
    alert(`Hello, ${this.name}!`)
  }
}
</script>

<style scoped>
/* 样式代码 */
</style>

この例では、

@Component デコレータを使用してこれを Vue.js コンポーネントとしてマークし、型アノテーションを通じて を宣言します。 name 属性は string、sayHello メソッドの戻り値は void です。

結論

この記事の導入部を通じて、Vue.js と TypeScript を組み合わせて保守可能なエンタープライズ レベルのフロントエンド プロジェクトを構築する方法を学びました。 TypeScript を使用すると、より適切な型チェックとコード プロンプトが提供され、プロジェクトの開発効率とコード品質が向上します。この記事が Vue.js と TypeScript で開発する際のお役に立てれば幸いです。

以上がVue.js と TypeScript 言語を組み合わせて、保守可能なエンタープライズ レベルのフロントエンド プロジェクトを構築します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。