319、Vue学習ノート25-【Type Scriptサポート】2020.04.20

0、目次

1、NPMパッケージとして公開された公式声明文書

2、推奨構成

3、開発ツールチェーン

3.1プロジェクト作成

3.2エディタは

をサポート

4、基本用法

5、クラスベースのVueコンポーネント

6、エンハンスメントタイプ

をプラグインに合わせて使用

7、寸法戻り値

8、参照リンク

1、NPMパッケージとして発行された公式声明ファイル
静的タイプのシステムは、多くの潜在的なランタイムエラーを効果的に防止し、アプリケーションが豊かになるにつれて顕著になります.これは、VueがTypeScriptに対する公式タイプの宣言だけでなく、Vue RouterとVuexにも対応する宣言ファイルを提供している理由です.
また、NPMに公開されており、最新バージョンのType Scriptでも、NPMパッケージからタイプ宣言をどのように解析するかを知っています.これは、NPMでのインストールに成功すれば、追加のツール支援が不要になり、VueでType Scriptを使用できることを意味します.
2、推奨構成

// tsconfig.json
{
  "compilerOptions": {
    //   Vue           
    "target": "es5",
    //      `this`               
    "strict": true,
    //      webpack 2+   rollup，     tree-shake:
    "module": "es2015",
    "moduleResolution": "node"
  }
}

コンポーネントメソッドのthisのタイプチェックを利用するには、strict:true(または少なくともnoImplicitThis:true、これはstrictモードの一部)を導入する必要があります.そうしないと、anyタイプと見なされます.
詳細については、Type Scriptコンパイラオプションドキュメント(英)を参照してください.
3、開発ツールチェーン
3.1プロジェクトの作成

Vue CLI 3      TypeScript      。    ：

# 1.        Vue CLI     
npm install --global @vue/cli

# 2.        ，    "Manually select features (      )"   
vue create my-project-name

3.2エディタのサポート
TypeScriptを使用してVueアプリケーションを開発するには、Visual Studio Codeを使用することを強くお勧めします.これにより、TypeScriptに優れた「開梱即用」サポートが提供されます.単一ファイルコンポーネント(SFC)を使用している場合は、SFCのサポートやその他の実用的な機能を提供するVeturプラグインをインストールできます.
WebStormは同様にType ScriptとVueに「開梱即用」のサポートを提供しています.
4、基本的な使い方
TypeScriptでVueコンポーネントオプションのタイプを正しく推定するには、Vueを使用します.コンディションかVueextend定義コンポーネント:

import Vue from 'vue'
const Component = Vue.extend({
  //        
})

const Component = {
  //          ，
  //    TypeScript        Vue      
}

5、クラスベースのVueコンポーネント
コンポーネントを宣言するときにクラスベースのAPIが好きな場合は、公式メンテナンスのvue-class-component装飾器を使用します.

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

// @Component             Vue   
@Component({
  //               
  template: 'Click!'
})
export default class MyComponent extends Vue {
  //                 
  message: string = 'Hello!'

  //                  
  onClick (): void {
    window.alert(this.message)
  }
}

6、拡張タイプはプラグインに合わせて使用する
プラグインは、Vueのグローバル/インスタンスプロパティとコンポーネントオプションを追加できます.これらの場合、Typeスクリプトでプラグインを作成するにはタイプ宣言が必要です.幸いなことに、Typeスクリプトには、モジュール補完(module augmentation)という既存のタイプを補完する特性があります.
たとえば、stringタイプのインスタンス属性$myPropertyを宣言します.

// 1.                'vue'
import Vue from 'vue'

// 2.       ，          
//      types/vue.d.ts   Vue        
declare module 'vue/types/vue' {
// 3.     Vue      
  interface Vue {
    $myProperty: string
  }
}

宣言ファイルとして上記のコードがプロジェクトに含まれている場合(my-property.d.tsなど)、Vueインスタンスで$myPropertyを使用できます.

var vm = new Vue()
console.log(vm.$myProperty) //         

追加のプロパティとコンポーネントオプションを宣言することもできます.

import Vue from 'vue'

declare module 'vue/types/vue' {
  //      `VueConstructor`   
  //        
  interface VueConstructor {
    $myGlobal: string
  }
}

// ComponentOptions     types/options.d.ts   
declare module 'vue/types/options' {
  interface ComponentOptions {
    myOption?: string
  }
}

上記の宣言により、次のコードがスムーズにコンパイルされます.

//     
console.log(Vue.$myGlobal)

//        
var vm = new Vue({
  myOption: 'Hello'
})

7、寸法戻り値
Vueの宣言ファイルは生まれつき循環性があるため,TypeScriptはあるメソッドのタイプを推定する際に困難がある可能性がある.したがって、renderまたはcomputedのメソッドに戻り値をマークする必要がある場合があります.

import Vue, { VNode } from 'vue'

const Component = Vue.extend({
  data () {
    return {
      msg: 'Hello'
    }
  },
  methods: {
    //       `this`           
    greet (): string {
      return this.msg + ' world'
    }
  },
  computed: {
    //     
    greeting(): string {
      return this.greet() + '!'
    }
  },
  // `createElement`      ，   `render`        
  render (createElement): VNode {
    return createElement('div', this.greeting)
  }
})

タイプの導出やメンバーの補完が機能していないことに気づいたら、この問題を解決するのに役立つ方法をマークします.--noImplicitAnyオプションを使用すると、これらのマークアップされていない方法を見つけることができます.
8、参考リンク
[01]TypeScriptサポート-Vue.js公式ドキュメント