TypeScript のサポート

Vue CLI は、組み込みの TypeScript ツールサポートを提供します。

ディレクトリ

NPM パッケージとしてリリースされた公式声明ファイル
##推奨構成
開発ツールチェーン

#プロジェクト作成
- エディターサポート
基本的な使用方法
クラスベースの Vue コンポーネント
拡張タイププラグインを使用するには
戻り値に注釈を付ける

##NPM パッケージの公式宣言ファイルとして公開されています

静的型システムは、多くの潜在的なランタイムエラーを効果的に防止するのに役立ちます。成熟するにつれてさらに顕著になります。そのため、Vue は、Vue コアの TypeScript の

公式型宣言

を提供するだけでなく、

Vue Router および Vuex に対応する宣言ファイルも提供します。さらに、これらを NPM に公開しました。最新バージョンの TypeScript は、NPM パッケージからの型宣言をそれ自体で解析する方法を認識しています。つまり、NPM 経由で正常にインストールされていれば、Vue で TypeScript を使用するために追加のツール支援は必要なくなります。

推奨構成

// tsconfig.json
{
  "compilerOptions": {
    // 与 Vue 的浏览器支持保持一致
    "target": "es5",
    // 这可以对 `this` 上的数据属性进行更严格的推断
    "strict": true,
    // 如果使用 webpack 2+ 或 rollup，可以利用 tree-shake:
    "module": "es2015",
    "moduleResolution": "node"
  }
}

を導入する必要があることに注意してください。 strict : true (または少なくとも strict

パターンの一部である

noImplicitThis: true

) で this の型チェックを利用します。それ以外の場合は、常に any 型として扱われます。詳細については、TypeScript コンパイラオプションのドキュメント (英語) を参照してください。

#開発ツールチェーン

##プロジェクトの作成

Vue CLI 3 TypeScript を使用して新しいプロジェクトを生成できます。作成方法:

# 1. 如果没有安装 Vue CLI 就先安装
npm install --global @vue/cli

# 2. 创建一个新工程，并选择 "Manually select features (手动选择特性)" 选项
vue create my-project-name

エディタサポート

TypeScript を使用して Vue アプリケーションを開発するには、次のことを強くお勧めします。 TypeScript に優れた「すぐに使える」サポートを提供する Visual Studio Code を使用することをお勧めします。 Single File Components (SFC) を使用している場合は、SFC サポートやその他の便利な機能を提供する Vetur プラグインをインストールできます。

WebStorm は、TypeScript と 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: '<button @click="onClick">Click!</button>'
})
export default class MyComponent extends Vue {
  // 初始数据可以直接声明为实例的属性
  message: string = 'Hello!'
  // 组件方法也可以直接声明为实例的方法
  onClick (): void {
    window.alert(this.message)
  }
}

プラグインで使用する拡張タイプ

#Plugins Vue のグローバル/インスタンスプロパティとコンポーネントオプションを追加できます。このような場合、TypeScript でプラグインを作成するには型宣言が必要です。幸いなことに、TypeScript には

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<V extends 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 オプションを使用すると、これらの注釈のないメソッドを見つけるのに役立ちます。