TypescriptのVueプロジェクトでの使用

最近TypescriptのVueプロジェクトでの使用を試してみましたが、途中でいくつかの問題に遭遇し、忘れられないように、出会った問題を記録しました.
TypescriptでVue、JSONファイルを認識する方法
Typescriptでは.vueファイルがデフォルトで認識されないため、.vueファイルを参照するとロードエラーが表示されます.そのため、.d.tsファイルを自分で作成して以下の内容を追加する必要があります.これはTypescriptが.Vueで終わるインポートされたものがVueコンストラクション関数自体と同じ形状であることを示している.

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

また、プロジェクトでは.jsonのプロファイルが使用されることは避けられません.参照時にもTypescriptが認識できないため、*.d.tsのプロファイルを自分で宣言する必要があります.

// .d.ts
declare module "*.json" {
  const value: any;
  export default value;
}

注意が必要な場合、これらの.d.tsファイルはプロジェクト実行エントリファイルの上位ディレクトリに配置できません.そうしないと、Type scriptはこれらの宣言を見つけられず、ファイルタイプを正しく認識できません.
アクセラレータを使用してコンポーネントを定義するには
VueプロジェクトではTypescriptを使用し、定義.vueファイルは一般にReactのようなClass形式を使用するので、ここではClassという形式の書き方のみを記録する.この方法では、コンポーネントを定義するために装飾器を使用する必要があります.これには、vue-property-decoratorとvue-property-decoratorの2つのパッケージが追加されます.vue-property-decoratorはvue-class-componentに依存します.この2つのパッケージでは、アクセサリーを使用してコンポーネントのメソッド、プロパティ、watchなどの内容を定義できます.
vue-class-decoratorでは@Emit、@Inject、@Mixins、@Model、@Prop、@Provide、@Watch、@Componentの8種類のデコレーションが提供されていますが、具体的な使い方はここではあまり紹介しませんので、詳しくはこちらをご覧ください.Mixins、@Componentはvue-class-componentに継承されます.
Computed、Data、Methods
ここではコンポーネントのdataとmethods属性を取り消し,従来dataがオブジェクトに返す属性,methodsのメソッドはClassに直接定義され,クラスの属性とメソッドとして用いられていた.

@Component
export default class HelloDecorator extends Vue {
    count: number = 123

    increment() {
      // xxxx
    }
}

Computedはここでもキャンセルされ、getとset付きのクラスメソッドになりました.

@Component
export default class HelloDecorator extends Vue {
    count: number = 123

    //       
    get total(): number {
      return this.count + 1
    }

    //       
    set total(param:number): void {
      this.count = param
    }
}

@Component(vue-class-componentから継承)
Component装飾器Vueコンポーネントとして明記されているため、オプションを設定していなくても省略できません.name、components、filters、directives、カスタムプロパティなどの定義が必要な場合は、Componentデザイナで定義できます.

@Component({
  name: 'xComponent',
  pageName: 'page title', //      
  components: {
    // xxxx
  },
  filters: {
    // xxxx
  },
  directives: {
    // xxxx
  }
})
export default class HelloDecorator extends Vue {
}

コンポーネント名については、nameプロパティを設定しないと、コンポーネント名にクラス名が使用されます.優先度:name>クラス名.
コンポーネントのカスタム属性も定義しましたが、Vueはカスタム属性の宣言サポートを提供していません.カスタム属性を定義する場合は、.d.tsファイルでComponentOptionsを拡張し、独自に定義した属性を宣言する必要があります.

declare module 'vue/types/options' {
  interface ComponentOptionsextends Vue> {
    //       
    pageName?: string;
  }
}

@Prop
Propアクセラレータを使用してプロパティを定義する場合、tsconfig.jsプロファイルのstrictpropertyinitializeオプションを開いたら、追加する必要があります.定義された属性を与えます.これはTypeScriptに「ねえ、リラックスして、他の人はこの属性に値をつけます」と伝えます.そうしないと、Type Scriptは「ねえ、この属性はまだ初期化されていないことに注意してください」と教えてくれます.プロパティにdefault値を設定するのは、上の初期化ではありません.初期化を遅らせたり、再初期化したりするシーンで便利です.

@Component
export default class YourComponent extends Vue {
  @Prop(Number) propA!: number
  @Prop({ default: 'default value' }) propB!: string
  @Prop([String, Boolean]) propC: string | boolean
}

上記の問題は、@Inject、@Modelデコレーションにも適用されます.

// @Inject
@Component
export class MyComponent extends Vue {
  @Inject() foo!: string
  @Inject('bar') bar!: string

  @Provide() foo = 'foo'
  @Provide('bar') baz = 'bar'
}

// @Model
@Component
export default class YourComponent extends Vue {
  @Model('change', { type: Boolean }) checked!: boolean
}

$refsの使用
エレメントまたはコンポーネントにrefプロパティを追加して、エレメントにコンポーネントのプロパティとメソッドを操作およびアクセスします.しかし、ここで$refsを使用する必要がある場合は、Typescriptが正しいタイプ判断を行うために、refsコンテンツのタイプを事前に宣言する必要があります.

<div ref="div">div>

<e-component ref="cComponent">e-componen>

import eComponent form 'xxxx'

@Component({
  components: {
    'e-component': eComponent
  }
})
export default class YourComponent extends Vue {
  //         
  $refs!: {
    div: HTMLDivElement, // html  
    cComponent: eComponent // Typescript                
  }
}

Vuex-class
Vuex-classは、Vuexとvue-class-componentをバインドしたパッケージです.今のところまだ問題にぶつかっていないので,詳しく説明しない.使用方法については、ドキュメントを参照してください.
上は現在VueプロジェクトでTypescriptを使用して発生している問題と注意点であり、その他の問題は後で発生した後に補充する.
転載先:https://juejin.im/post/5b8c9e23f265da433207332d