Getting Started Tutorial on Using TS (TypeScript) in Vue Project

npm install vue-class-component vue-property-decorator --save
npm install ts-loader typescript tslint tslint-loader tslint-config-standard --save-dev

  resolve: {
    extensions: ['.js', '.vue', '.json', '.ts'],
    alias: {}
  }

module: {
    rules:
      {
        test: /\.ts$/,
        exclude: /node_modules/,
        enforce: 'pre',
        loader: 'tslint-loader'
      },
      {
        test: /\.tsx?$/,
        loader: 'ts-loader',
        exclude: /node_modules/,
        options:
          appendTsSuffixTo: [/\.vue$/]
        }
      }
    ]
  }

{
  // Compiler options "compilerOptions": {
    // Output directory "outDir": "./output",
    // Whether to include sourceMap that can be used for debugging
    "sourceMap": true,
    // Parse in strict mode "strict": false,
    // Module system used "module": "esnext",
    // How to handle modules "moduleResolution": "node",
    // Compile and output target ES version "target": "es5",
    // Allow default imports from modules that do not set a default export "allowSyntheticDefaultImports": true,
    // Treat each file as a separate module "isolatedModules": false,
    // Enable decorators "experimentalDecorators": true,
    // Enable design type metadata (for reflection)
    "emitDecoratorMetadata": true,
    // Error "noImplicitAny": false, if there is an implicit any type in expressions and declarations
    // Not all return paths of a function return a value and an error is reported.
    "noImplicitReturns": true,
    // Import external helper libraries from tslib: such as __extends, __rest, etc. "importHelpers": true,
    // Print file names during compilation "listFiles": true,
    // Remove comments "removeComments": true,
    "suppressImplicitAnyIndexErrors": true,
    // Allow compilation of javascript files "allowJs": true,
    // Base directory for parsing non-relative module names "baseUrl": "./",
    //Specify the path of special modules "paths": {
      "jquery": [
        "node_modules/jquery/dist/jquery"
      ]
    },
    // List of library files that need to be introduced during compilation "lib": [
      "dom",
      "es2015",
      "es2015.promise"
    ]
  }
}

  {
    "extends": "tslint-config-standard",
    "globals": {
      "require": true
    }
  }

declare module '*.vue' {
  import Vue from 'vue';
  export default Vue;
}

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
@Component
export default class Test extends Vue {
  
};
</script>

export default class Test extends Vue {
 public message1: string = "heimayu";
 public message2: string = "It's really beautiful";
}

@Prop()
propA:string

@Prop()
propB:number

 // Original writing: this.$emit('bindSend')
  // Now just write this.bindSend()
  // Multiple definitions @Emit()
  bindSend():string{
      return this.message
  }

  // Original writing: this.$emit('bindSend', msg)
  // Now write directly: this.bindSend(msg)
  // Multiple definitions below @Emit()
  bindSend(msg:string){
      // to do something
  }

  // Here, test is the @ event name that changes the component reference. In this case, you should write @test instead of @bindSend2
  @Emit('test)
  private bindSend2(){
      
  }

  //Original writing watch:{}

  @Watch('propA',{
      deep:true
  })
  test(newValue:string,oldValue:string){
      console.log('propA value changed' + newValue);
  }

public get computedMsg(){
      return 'Here is the calculated property' + this.message;
 }
public set computedMsg(message: string) {
 }

<template>
  <div class="test-container">
    {{message}}
    <input type="button" value="Click to trigger parent method" @click="bindSend"/>
    <input type="button" value="Click to trigger parent method" @click="handleSend"/>
    <input type="button" value="Click to trigger parent method" @click="bindSend2"/>
    <!-- <Hello></Hello> -->
  </div>
</template>
<script lang="ts">
import { Component, Prop, Vue, Watch, Emit } from "vue-property-decorator";
import Hello from "./HelloWorld.vue";
// Indicate that this class is a vue component @Component({
  components:
    Hello
  }
})
export default class Test extends Vue {
  // The data in the original data is expanded and written here public message: string = "asd";
  //Expand the data in the original props to write @Prop({
    type: Number,
    default: 1,
    required: false
  })
  propA?: number
  @Prop()
  propB:string
  //Original computed
  public get computedMsg(){
      return 'Here is the calculated property' + this.message;
  }
  public set computedMsg(message: string) {
  }
  //Original watch attribute @Watch('propA',{
      deep:true
  })
  public test(newValue:string,oldValue:string){
      console.log('propA value changed' + newValue);
  }
  // In the past, when you needed to pass a value to the parent, you could just use emit in the method. Now you need to use emit to handle @Emit()
  private bindSend():string{
      return this.message
  }
  @Emit()
  private bindSend1(msg:string,love:string){
      // If you don't want to process, you don't need to write the following, the parameters will be automatically returned // msg += 'love';
    // return msg;
  }
  //The original method in methods is laid out public handleSend():void {
      this.bindSend1(this.message,'love');
  }
  // The parameters in emit here indicate what the parent accepts, similar to the previous $emit('parent defined method')
  @Emit('test')
  private bindSend2(){
      return 'This can be accepted by test';
  }
}
</script>