Vue3+ElementPlus+TypeScript 开发常见问题/警告/错误 (持续补充......）

el-popconfirm 事件冒泡

// 在confirm添加stop无效，需要在按钮上添加 @click.native.stop
<el-popconfirm :title="tip" @confirm.stop="onConfirm">
    <template #reference>
      <el-button size="small" type="danger" link @click.native.stop>
        删除
      </el-button>
    </template>
  </el-popconfirm>

TS2339: Property ‘id’ does not exist on type ‘{}’

// 原代码
const xxx = (row:object) => {
  const {id} = row
}
// 修改后
const xxx = (row: { id: string }) => {
  const {id} = row
}

TS2322: Type ‘HTMLElement | null’ is not assignable to type
‘HTMLElement | undefined’. Type ‘null’ is not assignable to type
‘HTMLElement | undefined’

// 原代码
const dom = document.getElementById('container')
// 修改后
const dom: (HTMLElement | null) = document.getElementById('container')

Vue3+TS ref定义类型

// 定义
const screenWidth = ref<number>(window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth)

ts类型嵌套

  interface node {
    id: string,
    x: number,
    y: number,
    width: number,
    height: number,
    label: string
  }

  interface edges {
    source: string,
    target: string
  }

  interface nodeInfo {
    nodes: node[],
    edges: edges
  }

ts2691:TypeScript 中 An import path cannot end with a ‘.ts’ extension

  要解决该错误，需要在导入文件时删除 .ts 扩展名。
  import {mousewheel} from './commonConfig.ts';
  // 修改后
  import {mousewheel} from './commonConfig';

1208 Cannot compile namespaces when the ‘–isolatedModules’ flag is provided

  修改 tsconfig.json
 "isolatedModules": false,