vueシリーズ:vueでtypescriptを使用する

文書ディレクトリ

取付

1、足場

を通る

2、カスタムインストール

2.1取付

2.2 webpack

の構成

2.3 tsconfigを追加する.json

2.4 tslintを追加する.json

2.5はtsを認識する.vue

2.6改造.vueファイル

テスト

インストール
1、足場を通る
vue/cli 3の足場はデフォルトのインストールtsを選択することができ、私たち自身の構成を省くことができます.
2、カスタムインストール
2.1インストール

//   vue     
npm i vue-class-component vue-property-decorator --save

// ts-loader typescript     ，             
npm i ts-loader typescript tslint tslint-loader tslint-config-standard --save-dev

vue-class-component:強化Vueアセンブリ、TypeScript/デコレーションを使用した強化Vueアセンブリ

vue-property-decorator:vue-class-component上でより多くのVue特性を結合する装飾器

を強化する

ts-loader:TypeScriptはWebpackにts-loaderを提供したが、実はwebpackに認識させるためである.ts .tsxファイル

tslint-loader tslint:あなたもいると思います.ts .tsxファイル制約コードフォーマット(eslintと同等)

tslint-config-standard:tslint構成standardスタイルの制約

2.2 webpackの構成
まず./を見つけます.build/webpack.base.conf.js
見つけたアプリはmain.jsをmainに変更します.ts、ついでにプロジェクトファイルのmain.jsもmainに変更しました.ts,中身は変わらない

entry: {
  app: './src/main.ts'
}

見つけたextensionsに追加します.ts接尾辞(後で.tsを導入するために.tsを書かない)

resolve: {
  extensions: ['.js', '.vue', '.json', '.ts'],
  alias: {
    '@': resolve('src')
  }
}

moduleを見つけたrules webpackペアを追加します.tsの解析

module: {
  rules: [
    {
      test: /\.(js|vue)$/,
      loader: 'eslint-loader',
      enforce: 'pre',
      include: [resolve('src'), resolve('test')],
      options: {
        formatter: require('eslint-friendly-formatter')
      }
    },
//               
    {
      test: /\.ts$/,
      exclude: /node_modules/,
      enforce: 'pre',
      loader: 'tslint-loader'
    },
    {
      test: /\.tsx?$/,
      loader: 'ts-loader',
      exclude: /node_modules/,
      options: {
        appendTsSuffixTo: [/\.vue$/],
      }
    },
//      
  }
}

ts-loaderは現在のディレクトリの下のtsconfigを取得する.jsonファイルは、中で定義されたルールに基づいて解析する.tsファイル(.babelrcの役割と同じ)
tslint-loader作用はeslint-loaderに等しい
2.3 tsconfigを追加する.json
次にルートパスの下にtsconfigを作成する.jsonファイル
ここには参考になるtsconfigがあります.json構成、完了した構成はtsconfigをクリックしてください.json:

{
  //     
  "compilerOptions": {
    //     
    "outDir": "./output",
    //          debug   sourceMap
    "sourceMap": true,
    //        
    "strict": true,
    //        
    "module": "esnext",
    //       
    "moduleResolution": "node",
    //        ES   
    "target": "es5",
    //                    
    "allowSyntheticDefaultImports": true,
    //             
    "isolatedModules": false,
    //      
    "experimentalDecorators": true,
    //          （    ）
    "emitDecoratorMetadata": true,
    //             any     
    "noImplicitAny": false,
    //                    。
    "noImplicitReturns": true,
    //   tslib        :   __extends，__rest 
    "importHelpers": true,
    //           
    "listFiles": true,
    //     
    "removeComments": true,
    "suppressImplicitAnyIndexErrors": true,
    //     javascript  
    "allowJs": true,
    //              
    "baseUrl": "./",
    //          
    "paths": {
      "jquery": [
        "node_modules/jquery/dist/jquery"
      ]
    },
    //                 
    "lib": [
      "dom",
      "es2015",
      "es2015.promise"
    ]
  }
}

足場に付属の配置を貼る

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "baseUrl": ".",
    "types": [
      "webpack-env",
      "jest"
    ],
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

2.4 tslint.の追加json
ルートパスの下にtslintを作成するjsonファイル
ここで簡単なのはtsのstandard仕様を導入することです

{
  "extends": "tslint-config-standard",
  "globals": {
    "require": true
  }
}

2.5 tsに認識させる.vue
TypeScriptのデフォルトでは*はサポートされていません.vue接尾辞のファイルなので、vueプロジェクトに導入する際にvue-shimを作成する必要があります.d.tsファイル、src/vue-shimなどのプロジェクトプロジェクト対応使用ディレクトリの下に置く.d.ts

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

TypeScript*.vue接尾辞のファイルはvueモジュールに渡して処理できます.
コードに*をインポートする.vueファイルの場合、書く必要があります.vue接尾辞.理由はやはりTypeScriptがデフォルトで*のみ認識するためである.tsファイル、認識*.vueファイル:

import Component from 'components/component.vue'

2.6改造vueファイル
vue-class-component vue-class-componentはVueコンポーネントをカプセル化し、TypeScript構文を結合した後、Vueコンポーネント構文をより平坦化します.

<template>
  <div>
    <input v-model="msg">
    <p>msg: {{ msg }}</p>
    <p>computed msg: {{ computedMsg }}</p>
    <button @click="greet">Greet</button>
  </div>
</template>

<script lang="ts">
  import Vue from 'vue'
  import Component from 'vue-class-component'

  @Component
  export default class App extends Vue {
    //      
    msg = 123

    //       
    mounted () {
      this.greet()
    }

    //     
    get computedMsg () {
      return 'computed ' + this.msg
    }

    //   
    greet () {
      alert('greeting: ' + this.msg)
    }
  }
</script>

に等しい

export default {
  data () {
    return {
      msg: 123
    }
  }

  //       
  mounted () {
    this.greet()
  }

  //     
  computed: {
    computedMsg () {
      return 'computed ' + this.msg
    }
  }

  //   
  methods: {
    greet () {
      alert('greeting: ' + this.msg)
    }
  }
}

vue-property-decorator vue-property-decoratorは、vue-class-componentでVueの特性を組み合わせた装飾器を強化し、この7つの装飾器を追加しました.

@Emit

@Inject

@Model

@Prop

@Provide

@Watch

@Component(vue-class-componentから継承)

例:

import { Component, Emit, Inject, Model, Prop, Provide, Vue, Watch } from 'vue-property-decorator'

@Component
export class MyComponent extends Vue {
  
  @Prop()
  propA: number = 1

  @Prop({ default: 'default value' })
  propB: string

  @Prop([String, Boolean])
  propC: string | boolean

  @Prop({ type: null })
  propD: any

  @Watch('child')
  onChildChanged(val: string, oldVal: string) { }
}

次のようになります.

export default {
  props: {
    checked: Boolean,
    propA: Number,
    propB: {
      type: String,
      default: 'default value'
    },
    propC: [String, Boolean],
    propD: { type: null }
  }
  methods: {
    onChildChanged(val, oldVal) { }
  },
  watch: {
    'child': {
      handler: 'onChildChanged',
      immediate: false,
      deep: false
    }
  }
}

テスト

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view/>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import Component from 'vue-class-component'

@Component({})
export default class App extends Vue {
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

</style>

最後にvue公式サイトのtsサポートもお勧めします