Vue プロジェクトで TS (TypeScript) を使用するための入門チュートリアル

npm インストール vue-class-component vue-property-decorator --save
npm で ts-loader typescript tslint tslint-loader tslint-config-standard --save-dev をインストールします。

  解決する： {
    拡張子: ['.js', '.vue', '.json', '.ts'],
    エイリアス: {}
  }

モジュール: {
    ルール:
      {
        テスト: /\.ts$/,
        除外: /node_modules/、
        強制: 'pre'、
        ローダー: 'tslint-loader'
      },
      {
        テスト: /\.tsx?$/,
        ローダー: 'ts-loader',
        除外: /node_modules/、
        オプション:
          追加Tsサフィックス: [/\.vue$/]
        }
      }
    ]
  }

{
  // コンパイラオプション "compilerOptions": {
    // 出力ディレクトリ "outDir": "./output",
    // デバッグに使用できるソースマップを含めるかどうか
    "ソースマップ": true,
    // 厳密モードで解析する "strict": false,
    // 使用されるモジュールシステム "module": "esnext",
    // モジュールの処理方法 "moduleResolution": "node",
    // ターゲット ES バージョンをコンパイルして出力します "target": "es5",
    // デフォルトのエクスポートを設定していないモジュールからのデフォルトのインポートを許可する "allowSyntheticDefaultImports": true,
    // 各ファイルを個別のモジュールとして扱う "isolatedModules": false,
    // デコレータを有効にする "experimentalDecorators": true,
    // デザインタイプメタデータを有効にする（リフレクション用）
    "emitDecoratorMetadata": true、
    // エラー "noImplicitAny": false、式と宣言に暗黙の any 型がある場合
    // 関数のすべての戻りパスが値を返すわけではないため、エラーが報告されます。
    "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": [
      「ドム」、
      "es2015",
      「es2015.約束」
    ]
  }
}

  {
    "拡張": "tslint-config-standard",
    「グローバル」: {
      「必須」: 真
    }
  }

モジュール '*.vue' を宣言します。
  'vue' から Vue をインポートします。
  デフォルトの Vue をエクスポートします。
}

<script lang="ts">
「vue-property-decorator」から Component、Vue をインポートします。
@成分
デフォルトのクラスTestをエクスポートし、Vueを拡張します。
  
};
</スクリプト>

デフォルトのクラスTestをエクスポートし、Vueを拡張します。
 公開メッセージ1: 文字列 = "heimayu";
 public message2: string = "本当に美しいですね";
}

@プロパティ()
propA:文字列

@プロパティ()
propB:数値

 // 元の記述: this.$emit('bindSend')
  // ここで this.bindSend() と記述します
  // 複数の定義 @Emit()
  bindSend():文字列{
      このメッセージを返す
  }

  // 元の記述: this.$emit('bindSend', msg)
  // 直接書きます: this.bindSend(msg)
  // @Emit() の下に複数の定義があります
  bindSend(メッセージ:文字列){
      // 何かをする
  }

  // ここで、test はコンポーネント参照を変更する @ イベント名です。この場合、@bindSend2 の代わりに @test と記述する必要があります。
  @Emit('テスト)
  プライベートbindSend2(){
      
  }

  //原文を見る:{}

  @Watch('propA',{
      深い:本当
  })
  テスト(新しい値:文字列、古い値:文字列){
      console.log('propA の値が変更されました' + newValue);
  }

パブリック get computedMsg(){
      return '計算されたプロパティはここにあります' + this.message;
 }
パブリックセットcomputedMsg(メッセージ: 文字列) {
 }

<テンプレート>
  <div class="テストコンテナ">
    {{メッセージ}}
    <input type="button" value="クリックして親メソッドをトリガー" @click="bindSend"/>
    <input type="button" value="クリックして親メソッドをトリガー" @click="handleSend"/>
    <input type="button" value="クリックして親メソッドをトリガー" @click="bindSend2"/>
    <!-- <こんにちは></こんにちは> -->
  </div>
</テンプレート>
<script lang="ts">
「vue-property-decorator」から { Component、Prop、Vue、Watch、Emit } をインポートします。
「./HelloWorld.vue」からHelloをインポートします。
// このクラスがvueコンポーネントであることを示す @Component({
  コンポーネント:
    こんにちは
  }
})
デフォルトのクラスTestをエクスポートし、Vueを拡張します。
  // 元のデータのデータが展開され、ここに書き込まれます public message: string = "asd";
  //元のプロパティのデータを展開して、@Prop({
    タイプ: 数値、
    デフォルト: 1,
    必須: false
  })
  propA?: 数字
  @プロパティ()
  propB:文字列
  //元の計算値
  パブリック get computedMsg(){
      return '計算されたプロパティはここにあります' + this.message;
  }
  パブリックセットcomputedMsg(メッセージ: 文字列) {
  }
  //元のウォッチ属性 @Watch('propA',{
      深い:本当
  })
  パブリックテスト(新しい値:文字列、古い値:文字列){
      console.log('propA の値が変更されました' + newValue);
  }
  // 以前は、親に値を渡す必要がある場合、メソッド内でのみemitを使用できました。現在は@Emit()を処理するためにemitを使用する必要があります。
  プライベートbindSend():文字列{
      このメッセージを返す
  }
  @エミット()
  プライベートbindSend1(msg:文字列,love:文字列){
      // 処理したくない場合は、次のように記述する必要はありません。パラメータは自動的に返されます // msg += 'love';
    // メッセージを返します。
  }
  //メソッド内の元のメソッドがレイアウトされます public handleSend():void {
      this.bindSend1(this.message、'love');
  }
  // ここでのemitのパラメータは、前の$emit('parent defined method')と同様に、親が受け入れるものを示します。
  @Emit('テスト')
  プライベートbindSend2(){
      'これはテストで受け入れられます' を返します。
  }
}
</スクリプト>