vue2.6使用ts关于@和定义变量的问题

Question

第一个问题：

import Header from '@/components/Header.vue'

我使用如上引入一个组件，页面都有显示了，编译也没有报错，能正常运行，但是就是在vscode中有个红色的波浪线Cannot find module '@/components/Header.vue'.，请教大佬tslint该怎么设置才能将这个波浪线掉。

第二个问题：
之前我将一些变量定义在export default之外，原因是不涉及到页面变化我就喜欢定义在外面而不是data中，（因为小程序写在data中而页面没有使用到的变量发生变化了同样也会重新渲染页面这里就习惯这样写了），而在使用ts之后如下方式写@Component那里编译就报错了Decorators are not valid here.，所以想请教一下大佬该怎么在外面定义变量？

import { Component, Vue } from 'vue-property-decorator'

@Component({
  components: {
    Header,
  },
})

let authTimeTimer: null | number = null

export default class Components extends Vue {}

Answer 1

第二个问题
@Component 是装饰器 用来装饰 class Components 的
你在装饰器和被装饰类之间插入语句是几个意思？？？

改成如下

import { Component, Vue } from 'vue-property-decorator'

let authTimeTimer: null | number = null

@Component({
  components: {
    Header,
  },
})
export default class Components extends Vue {}

Answer 2

第一个问题：
这个和tslint没关系，这是vscode中jsconfig.json配置引起的，jsconfig.json是为了让你能快速跳入到引用的资源文件中
基本配置如下

{
  "compilerOptions": {
    "target": "ES6",
    // "module": "umd",
    "allowSyntheticDefaultImports": true,
    "baseUrl": "./",
    "paths": {
      "@/*": ["src/*"],
    },
  },
  "exclude": [
    "node_modules",
    "**/node_modules/*"
  ]
}