Vue と TypeScript の統合構成チュートリアル

この記事では主に vue と TypeScript の統合設定に関する最も簡単なチュートリアル (推奨) を紹介します。興味のある方は参考にしていただければ幸いです。

前書き

Vue の公式ドキュメントには、TypeScript と統合するための具体的な手順が記載されていません。インターネット上の他のチュートリアルには問題があるか、vue-cli で作成されたプロジェクトとは異なるため、開始するのが困難です。

以下に、vue-cliで作成したプロジェクトをTypeScriptと統合する最も簡単な構成を示します。

プロジェクトを初期化する

まずvue-cliでwebpackプロジェクトを作成します。デモンストレーションの便宜上、ここではルーターと eslint は開かれていません。状況に応じて開くことができます。

# vue init webpack vue-typescript

? Project name vue-typescript
? Project description A Vue.js project
? Author
? Vue build standalone
? Install vue-router? No
? Use ESLint to lint your code? No
? Setup unit tests with Karma + Mocha? No
? Setup e2e tests with Nightwatch? No

TypeScript 関連の依存関係とプロジェクトのその他の依存関係をインストールし、npm または cnpm を使用します

# cd /vue-typescript
# npm install typescript ts-loader --save-dev
# npm install

Configuration

ディレクトリ内の bulid/webpack.base.conf.js ファイルを変更します。 file module>rules 次のルールを追加します

{
 test: /\.tsx?$/,
 loader: 'ts-loader',
 exclude: /node_modules/,
 options: {
  appendTsSuffixTo: [/\.vue$/],
 }
},

src ディレクトリに新しいファイル vue-shims.d.ts を作成して、単一ファイル内の ts コードを識別します vue

declare module "*.vue" {
 import Vue from "vue";
 export default Vue;
}

TypeScript 構成ファイルを作成しますプロジェクトのルート ディレクトリの tsconfig .json

{
 "compilerOptions": {
  "strict": true,
  "module": "es2015",
  "moduleResolution": "node",
  "target": "es5",
  "allowSyntheticDefaultImports": true,
  "lib": [
   "es2017",
   "dom"
  ]
 }
}

src の下の main.js の名前を main.ts に変更しますmain.js为main.ts

修改webpack.base.conf.js下的entry>app为'./src/main.ts'

webpack.base.conf を変更します。 js</code >The <code>entry>app under is './src/main.ts'

src の下の App.vue ファイルを変更すると、それが下で行われたかどうかをテストできます

<script lang="ts">

test

統合は成功しました。src/components/Hello.vue ファイルを編集し、変更します

<script lang="ts">
 import Vue, {ComponentOptions} from 'vue'
 export default {
  name: 'hello',
  data() {
   return {
    msg: 'this is a typescript project now'
   }
  }
 } as ComponentOptions

プロジェクトを実行します

# npm run dev

テストは成功しました、今では TypeScipt になりますプロジェクト

上級

設定公式推奨 vue-class-component、https://cn.vuejs.org/v2/guide/typescript.html

開発依存関係をインストール

# npm install --save-dev vue-class-component

ts 設定ファイルを作成し、次の 2 つの設定を追加します

"allowSyntheticDefaultImports": true,
"experimentalDecorators": true,

Hello コンポーネントを書き換えます

<script lang="ts">
 import Vue from 'vue'
 import Component from 'vue-class-component'
 @Component
 export default class Hello extends Vue {
  msg: string = 'this is a typescript project now'  
 }

vue-class-component を使用した後、初期データをインスタンスの属性として直接宣言できます。 data() {return{}} コンポーネントメソッドは、公式インスタンスなど、インスタンスとして直接宣言されたメソッドも使用できます。詳細な使用方法については、公式ドキュメントを参照してください

https://github.com/vuejs/ Vue-Class-Component＃Vue-Class-Component

Rreee-LERETALED推奨：vue VUE 2.5 introductionのタイプスクリプトの改善JavaScriptおよびTypeScript宣言型タイプのintrapscriptのいくつかのヒント

以上がVue と TypeScript の統合構成チュートリアルの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。