Vue3 + TS4.8的一些类型标注踩坑记录

本文记录一些使用Vue3 + TS4.8的类型标注踩坑记录，持续更新：

ts是"typescript": "~4.8.4"

先上我的基本package.json配置：

{
  "name": "vue-project",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "dev": "vite",
    "build": "run-p type-check build-only",
    "preview": "vite preview",
    "test:unit": "vitest",
    "build-only": "vite build",
    "type-check": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false",
    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .eslintignore",
    "format": "prettier --write src/"
  },
  "dependencies": {
    "pinia": "^2.0.32",
    "vue": "^3.2.47",
    "vue-router": "^4.1.6"
  },
  "devDependencies": {
    "@rushstack/eslint-patch": "^1.2.0",
    "@types/jsdom": "^21.1.0",
    "@types/node": "^18.14.2",
    "@vitejs/plugin-vue": "^4.0.0",
    "@vitejs/plugin-vue-jsx": "^3.0.0",
    "@vue/eslint-config-prettier": "^7.1.0",
    "@vue/eslint-config-typescript": "^11.0.2",
    "@vue/test-utils": "^2.3.0",
    "@vue/tsconfig": "^0.1.3",
    "editorconfig": "^1.0.2",
    "eslint": "^8.34.0",
    "eslint-plugin-vue": "^9.9.0",
    "husky": "^8.0.3",
    "jsdom": "^21.1.0",
    "npm-run-all": "^4.1.5",
    "prettier": "^2.8.4",
    "typescript": "~4.8.4",
    "vite": "^4.1.4",
    "vite-plugin-vue-setup-extend": "^0.4.0",
    "vitest": "^0.29.1",
    "vue-tsc": "^1.2.0"
  }
}

第一个坑：在导入类型的时候eslint报错：

'PiniaPluginContext' is a type and must be imported using a type-only import when 'preserveValueImports' and 'isolatedModules' are both enabled.ts(1444)

原因：ts 4.5之后，导入type类型的内容，需要显示指定为type，

解决方案：

1，在类型前面加一个type：

import { createPinia, type PiniaPluginContext } from 'pinia'

 2，直接用import type：

import type {PiniaPluginContext } from 'pinia'
import { createPinia } from 'pinia'

参考文档：

https://devblogs.microsoft.com/typescript/announcing-typescript-4-5-rc/#type-on-import-names