Vue CLI 3はTypeScriptを用いて新規エンジニアリングを生成できる

Typeスクリプトのサポート
Vue 2.5.0では、デフォルトのオブジェクトベースAPIをよりよく使用するために、タイプ宣言を大幅に改善しました.また、このバージョンでは、開発者が対応するアップグレードを行う必要がある他の変更も導入されています.詳細については、ブログの記事を参照してください.
NPMパッケージとして公開された公式声明ファイル
静的タイプのシステムは、多くの潜在的なランタイムエラーを効果的に防止し、アプリケーションが豊かになるにつれて顕著になります.これは、VueがTypeScriptに対する公式タイプの宣言だけでなく、Vue RouterとVuexにも対応する宣言ファイルを提供している理由です.
また、NPMに公開されており、最新バージョンのType Scriptでも、NPMパッケージからタイプ宣言をどのように解析するかを知っています.これは、NPMでのインストールに成功すれば、追加のツール支援が不要になり、VueでType Scriptを使用できることを意味します.
推奨構成

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

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

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

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

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

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

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

クラスベース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)
 }
}

プラグインの使用に合わせて強化されたタイプ
プラグインは、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 ComponentOptionsextends Vue> {
 myOption?: string
 }
}

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

//     
console.log(Vue.$myGlobal)

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

寸法の戻り値
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オプションを使用すると、これらのマークアップされていない方法を見つけることができます.
 
 
テキストリンク:https://cn.vuejs.org/v2/guide/typescript.html#プロジェクトの作成
転載先:https://www.cnblogs.com/hasubasora/p/9627908.html