vue 学习值 electron+ts 学习之路

1. electron 7 typescript @types/node v13 问题
   错误信息
   node_modules/electron/electron.d.ts:7145:33 - error TS2689: Cannot extend an interface ‘NodeJS.EventEmitter’. Did you mean ‘implements’?
   原因
   当前electron 7 不支持@types/node 13 版本的
   解决方法

yarn add @types/node@12.12.6 --dev

2.Cannot find module ‘@/components/main/ReadFreq’ or its corresponding type declarations?
原因
ts 默认情况下 认为不带后缀的文件是 ts文件，而此处是导入vue 文件，所以需要加上后缀 .vue
解决方法

import ReadFreq from  '@/components/main/ReadFreq.vue'

3.全局监听 CTRL+V 事件

  private created(){
    remote.globalShortcut.register("CommandOrControl+V",()=>{
      var activename=document.activeElement; // 当前获取焦点的对象

      if(!!activename && activename.tagName === 'INPUT'){
        (<HTMLInputElement>activename).value = clipboard.readText()
      } else {
        //获取剪切板内容  主要是从excel 中复制的表格
        /**
         *  格式 1 2 3 4 \r\n5 6 7 8 \r\n
         */
        let clip = clipboard.readText().split(/\r\n/g)
        !clip[clip.length-1] && clip.pop()                      //删除最后多余 \r\n 导致的元素

        //以字符串分割，得到单个值
        let text = clip.map((value:string) => {
          return value.split(/\s/g)
        })
        text[text.length-1].length<4 && text.pop()              //删除最后多余的元素
        
        //判断每层是否都有四个元素
        let flag = text.every((val: string[]) => {
          return val.length === 4
        })

        if(!flag){
          this.$message.warning("粘贴内容格式不对！")
        }else if(text.length < this.maxLayer){                  //如果当前内容的层数小于最大层数
          this.$message.warning("粘贴内容层数不对！"+`最少${this.maxLayer}层`)
        }else {
          text.map((value:string[],index:number) => {
            this.$set(this.coeff[index], 'coef', value[0].slice(0,6))
            this.$set(this.coeff[index], 'power', value[1].slice(0,6))
            this.$set(this.coeff[index], 'air', value[2].slice(0,6))
            this.$set(this.coeff[index], 'water', value[3].slice(0,6))
          })
        }
      }
    })
  }

  private beforeDestroy(){
    remote.globalShortcut.unregisterAll()
  }

4.窗口尺寸

 1. 无菜单栏   Menu.setApplicationMenu(null);
 2. 无边框	  frame: false
 3. 不可缩放   resizable: false
 4. 最小宽度	  minWidth: 970,
 5. 最小高度   minHeight: 700

5.外部导入模块
错误信息

Could not find a declaration file for module '@serialport/parser-inter-byte-timeout'. 'E:/work/tools/daoguan/node_modules/@serialport/parser-inter-byte-timeout/lib/index.js' implicitly has an 'any' type.
  Try `npm install @types/serialport__parser-inter-byte-timeout` if it exists or add a new declaration (.d.ts) file containing `declare module '@serialport/parser-inter-byte-timeout';`

解决方法
在src 目录下建立一个 types/ 目录 然后新建 index.d.ts 文件，并添加如下内容

declare module 'ant-design-vue/lib/locale-provider/zh_CN'
declare module '@serialport/parser-inter-byte-timeout'

declare module '*.json' {
  const value: any
  export default value
}