vue3.0+ts引入详细步骤以及语法校验报错问题解决办法

{
 "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue", "src/main.js"],
 "exclude": ["node_modules"],
 "compilerOptions": {
   "jsx": "preserve",
   "noImplicitAny": false,
   "allowJs": true,
   "target": "es2016",
   "module": "commonjs",
   "baseUrl": "./",
   "paths": {
     "@/*": ["./src/*"]
   },
   "types": ["webpack-env"],
   "esModuleInterop": true,
   "forceConsistentCasingInFileNames": true,
   "strict": true,
   "skipLibCheck": true 
 },
}

import { defineComponent } from 'vue'
export default defineComponent({
  setup() {
    return () => (
      <router-view />
    )
  }
})

import "./index.less"
export default (props, ctx) => {
  return () => (
    <span>123</span>
  )
}

declare module '*.vue' {
  import { ComponentOptions } from 'vue'
  const componentOptions: ComponentOptions
  export default componentOptions
}

declare module '*.less';
declare module '*.png';
declare module '*.json';

interface Navigator {
  getUserMedia(
    constraints: MediaStreamConstraints, 
    successCallback: NavigatorUserMediaSuccessCallback, 
    errorCallback: NavigatorUserMediaErrorCallback
  ): Promise<MediaStream>;
}
declare const navigator: Navigator;

videoEle = document.getElementById("video") as HTMLVideoElement;
videoEle.srcObject = stream;
videoEle.onloadedmetadata = function (e) {
  videoEle.play();
};

let placeholder = ref<string>(props?.placeholder as string)

declare const XLSX: any;

import { defineComponent } from "vue";
import VP from "./components/poker"
interface Props {
  s?: string
}
export default defineComponent({
  props: {
    s: {
      type: String
    }
  },
  setup(props: Props, ctx) {
    let str = props.s as string;
    return () => (
      <>
        {
          str.split("").map(v => {
            return (<VP></VP>)
          })
        }
      </>
    )
  }
})

<template>
  <div class="test-container">
    {{message}}
    <input type="button" value="点击触发父级方法" @click="bindSend"/>
    <input type="button" value="点击触发父级方法" @click="handleSend"/>
    <input type="button" value="点击触发父级方法" @click="bindSend2"/>
    <!-- <Hello></Hello> -->
  </div>
</template>
<script lang="ts">
import { Component, Prop, Vue, Watch, Emit } from "vue-property-decorator";
import Hello from "./HelloWorld.vue";
// 注明此类为一个vue组件
@Component({
  components: {
    Hello
  }
})
export default class Test extends Vue {
  // 原有data中的数据在这里展开编写
 public message: string = "asd";
  //原有props中的数据展开编写
  @Prop({
    type: Number,
    default: 1,
    required: false
  })
  propA?: number
  @Prop()
  propB:string
  //原有computed
  public get computedMsg(){
      return '这里是计算属性' + this.message;
  }
  public set computedMsg(message:string){
  }
  //原有的watch属性
  @Watch('propA',{
      deep:true
  })
  public test(newValue:string,oldValue:string){
      console.log('propA值改变了' + newValue);
  }
  // 以前需要给父级传值的时候直接方法中使用emit就行了，当前需要通过emit来处理
  @Emit()
  private bindSend():string{
      return this.message
  }
  @Emit()
  private bindSend1(msg:string,love:string){
      // 如果不处理可以不写下面的，会自动将参数回传
    //   msg += 'love';
    //   return msg;
  }
  //原有放在methods中的方法平铺出来
  public handleSend():void {
      this.bindSend1(this.message,'love');
  }
  // 这里的emit中的参数是表明父级通过什么接受，类似以前的$emit('父级定义的方法')
  @Emit('test')
  private bindSend2(){
      return '这个可以用test接受';
  }
}
</script>