vueをtypescriptに接続する方法

Vue.js は、複雑な単一ページ アプリケーションの構築に役立つ人気のあるフロントエンド フレームワークです。ただし、JavaScript の弱い型付け特性により、Vue.js を使用すると潜在的な型エラーが必然的に発生します。この問題を解決するには、TypeScript を使用してコードの可読性と保守性を向上させます。この記事では、Vue.js プロジェクトに TypeScript を統合する方法を紹介します。

1. Vue.js と TypeScript をインストールする

始める前に、Vue.js と TypeScript をインストールする必要があります。 npm または Yarn を使用してインストールを完了できます。次のコマンドを実行してください:

# 安装 Vue.js
npm install vue

# 安装 TypeScript
npm install -g typescript

# 安装 TypeScript Definitions for Vue.js
npm install --save-dev @types/vue

2. TypeScript プロジェクトの初期化

vue-cli を使用して Vue.js プロジェクトを初期化します。このコマンドは、基本的な Vue.js アプリケーションを迅速に作成するのに役立ちます。次のコマンドを実行してください:

# 安装 vue-cli
npm install -g vue-cli

# 创建一个带有 TypeScript 的 Vue.js 项目
vue init webpack my-project --typescript

このコマンドは、TypeScript 構成を使用して Vue.js プロジェクトを作成します。プロジェクト名の代わりに my-project を使用できます。プロジェクト フォルダーに、tsconfig.json や src/main.ts などのいくつかの新しいファイルとフォルダーが表示されます。

3. TypeScript の構成

TypeScript プロジェクトでは、次のようにいくつかの設定を追加する必要があります:

3.1 tsconfig.json の構成

# #tsconfig.json は TypeScript のメイン設定ファイルです。 TypeScript が .vue ファイルを処理できるように、Vue.js プロジェクトにいくつかの設定を追加する必要があります。次のコードを tsconfig.json ファイルに追加してください:

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["esnext", "dom"],
    "experimentalDecorators": true,
    "module": "esnext",
    "moduleResolution": "node",
    "sourceMap": true,
    "noImplicitAny": true,
    "noImplicitThis": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "strict": true
  },
  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"],
  "exclude": ["node_modules"]
}

3.2

webpack.config.js

で webpack.config.js

を構成します。ファイルにいくつかの設定を追加する必要があります。次のコードを resolve オブジェクトの下に追加してください:

{
  resolve: {
    extensions: [".ts", ".js", ".vue", ".json"],
    alias: {
      vue$: "vue/dist/vue.esm.js"
    }
  }
}

この設定は、Webpack にさまざまなファイル拡張子を解決する方法を指示します。また、ファイル解析によるエラーを避けるために、

vue のエイリアスが正しいファイルを指すようにする必要があります。

4. Vue.js 単一ファイル コンポーネント (SFC) のビルド

Vue.js では、

.vue ファイルを使用して単一ページ コンポーネントを作成します。 TypeScript は .vue ファイルをサポートしていないため、.tsx ファイルに置き換える必要があります。

src/components フォルダーに新しい .tsx ファイル (例: HelloWorld.tsx) を作成します。これらのコンポーネントで Vue.js 固有の機能を使用する場合は注意してください (例: this.$router、this.$store、this.$refs) 、this.$emit など)、これらのコンポーネントに正しい型定義を追加する必要があります。

@Component デコレータを使用してコンポーネントを定義できます。例:

import Vue from 'vue';
import Component from 'vue-class-component';

@Component({
  props: {
    msg: String
  }
})
export default class HelloWorld extends Vue {
  // ...
}

5. コンポーネントの導入

src/App.vue ファイルで、コンポーネントと d477f9ce7bf77f53fbcf36bec1b69b7a# を導入できます。 ## の部分に次のコードを含めます: <pre class='brush:html;toolbar:false;'>&lt;template&gt; &lt;div id=&quot;app&quot;&gt; &lt;img src=&quot;./assets/logo.png&quot;&gt; &lt;HelloWorld msg=&quot;Welcome to Your Vue.js App with TypeScript&quot;/&gt; &lt;/div&gt; &lt;/template&gt;</pre> 次に、

App.vue

コンポーネントを src/main.ts に導入する必要があります: <pre class='brush:typescript;toolbar:false;'>import Vue from 'vue'; import App from './App.vue'; new Vue({ el: '#app', render: h =&gt; h(App) });</pre>6. アプリケーションの実行

Vue.js と TypeScript の構成が完了したので、次のコマンドを使用してアプリケーションを起動できます:

npm run serve

これにより、開発サーバーが起動します。ブラウザでアプリケーションを表示できるようにします。 TypeScript を使用して拡張された Vue.js コンポーネントを作成できるようになりました。

結論

この記事では、TypeScript を接続し、Vue.js プロジェクトで単一ページ コンポーネントを構築する方法を紹介しました。 Vue.js と TypeScript を組み合わせると、保守可能な Web アプリケーションをより効率的に開発できます。この記事がお役に立てば幸いです!

以上がvueをtypescriptに接続する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。