本文记录一些使用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'
参考文档: