?? 個(gè)人主頁(yè):不叫貓先生,公眾號(hào):前端舵手
???♂? 作者簡(jiǎn)介:2022年度博客之星前端領(lǐng)域TOP 2,前端領(lǐng)域優(yōu)質(zhì)作者、阿里云專家博主,專注于前端各領(lǐng)域技術(shù),共同學(xué)習(xí)共同進(jìn)步,一起加油呀!
??優(yōu)質(zhì)專欄:vue3+vite+typeScript從入門到實(shí)踐
?? 資料領(lǐng)?。呵岸诉M(jìn)階資料可以找我免費(fèi)領(lǐng)取
?? 摸魚學(xué)習(xí)交流:我們的宗旨是在「工作中摸魚,摸魚中進(jìn)步」,期待大佬一起來(lái)摸魚(文末有我wx或者私信)。
背景
當(dāng)我們新建vue3項(xiàng)目,package.json文件會(huì)自動(dòng)給我添加一些配置選項(xiàng),這寫選項(xiàng)基本沒(méi)有問(wèn)題,但是在實(shí)際操作過(guò)程中,當(dāng)項(xiàng)目越來(lái)越復(fù)雜就會(huì)出現(xiàn)問(wèn)題。本文列舉一個(gè)目前我遇到的一個(gè)問(wèn)題:打包后報(bào)了一堆TS類型錯(cuò)誤,怎么消除這些錯(cuò)誤?
項(xiàng)目環(huán)境:Vue3 + Vite + TS
問(wèn)題描述
當(dāng)項(xiàng)目進(jìn)行打包時(shí)候,突然發(fā)現(xiàn)終端有幾十項(xiàng)報(bào)錯(cuò)
npm run build
詳細(xì)報(bào)錯(cuò)信息如下:
src/view/testDemo/index.vue:6:9 - error TS2339: Property 'proxy' does not exist on type 'ComponentInternalInstance | null'.
6 const { proxy } = getCurrentInstance();
~~~~~
src/view/echarts/index.vue:7:9 - error TS2339: Property 'proxy' does not exist on type 'ComponentInternalInstance | null'.
7 const { proxy } = getCurrentInstance();
~~~~~
src/view/webRTC/index.vue:5:23 - error TS2322: Type 'string | number' is not assignable to type 'string | undefined'.
Type 'number' is not assignable to type 'string'.
5 <img :src=" item" alt="" />
~~~
node_modules/@vue/runtime-dom/dist/runtime-dom.d.ts:616:3
616 src?: string
~~~
The expected type comes from property 'src' which is declared here on type 'ElementAttrs<ImgHTMLAttributes>'
src/view/webRTC/index.vue:13:55 - error TS2322: Type '(deviceId: string) => Promise<void>' is not assignable to type '(evt: MouseEvent) => any'.
Types of parameters 'deviceId' and 'evt' are incompatible.
Type 'MouseEvent' is not assignable to type 'string'.
13 <el-button type="primary" size="default" @click="handleDeviceChange">
~~~~~
src/layout/index.vue:14:22 - error TS2322: Type '{}' is not assignable to type 'IntrinsicAttributes & Partial<{ readonly disabled: boolean; readonly showTimeout: number; readonly hideTimeout: number; readonly popperAppendToBody: EpPropMergeType<BooleanConstructor, unknown, unknown>; readonly popperOffset: number; }> & Omit<...>'.
Property 'index' is missing in type '{}' but required in type 'Omit<Readonly<ExtractPropTypes<{ readonly index: { readonly type: PropType<string>; readonly required: true; readonly validator: ((val: unknown) => boolean) | undefined; __epPropKey: true; }; readonly showTimeout: EpPropFinalized<...>; ... 8 more ...; readonly collapseOpenIcon: { ...; }; }>> & VNodeProps & AllowedCo...'.
14 <el-sub-menu>
~~~~~~~~~~~
node_modules/element-plus/es/components/menu/index.d.ts:363:14
363 readonly index: {
~~~~~
'index' is declared here.
src/view/testDemo/index.vue:27:32 - error TS2345: Argument of type 'HTMLElement | null' is not assignable to parameter of type 'HTMLElement'.
Type 'null' is not assignable to type 'HTMLElement'.
27 var myChart = echarts.init(document.getElementById("trendLIne-content"));
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
src/view/testDemo/index_.vue:41:40 - error TS2552: Cannot find name 'myData'. Did you mean 'data'?
41 value: myData[dataIndex],
~~~~~~
src/view/testDemo/index_.vue:7:5
7 let data = reactive([
~~~~
'data' is declared here.
src/view/echarts/index.vue:40:32 - error TS2345: Argument of type 'HTMLElement | null' is not assignable to parameter of type 'HTMLElement'.
Type 'null' is not assignable to type 'HTMLElement'.
40 var myChart = echarts.init(document.getElementById("trendLIne-content"));
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
src/view/testDemo/index.vue:42:40 - error TS2552: Cannot find name 'myData'. Did you mean 'data'?
42 value: myData[dataIndex],
~~~~~~
src/view/testDemo/index.vue:7:5
7 let data = reactive([
~~~~
'data' is declared here.
src/layout/index.vue:65:20 - error TS2339: Property '$fil' does not exist on type 'ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}>'.
65 console.log(proxy?.$fil, "proxy");
~~~~
src/view/webRTC/index.vue:136:5 - error TS2322: Type '{ facingMode: string; }' is not assignable to type 'boolean'.
136 constraints.video = {
~~~~~~~~~~~~~~~~~
src/view/webRTC/index.vue:146:13 - error TS2304: Cannot find name 'ElMessage'.
146 ElMessage.success("切換成功");
~~~~~~~~~
src/view/webRTC/index.vue:150:13 - error TS2304: Cannot find name 'ElMessage'.
150 ElMessage.error("你的設(shè)備不支持切換前后攝像頭");
~~~~~~~~~
src/view/webRTC/index.vue:156:28 - error TS2304: Cannot find name 'multiavatar'.
156 const blob = new Blob([multiavatar(val + new Date().getTime())], {
~~~~~~~~~~~
src/view/testDemo/index.vue:168:9 - error TS1117: An object literal cannot have multiple properties with the same name.
168 grid: {
~~~~
src/directives/canvasMakeWaterMark.ts:30:3 - error TS18047: 'ctx' is possibly 'null'.
30 ctx.rotate((rotate * Math.PI) / 180);
~~~
src/directives/canvasMakeWaterMark.ts:31:3 - error TS18047: 'ctx' is possibly 'null'.
31 ctx.font = "16px normal";
~~~
src/directives/canvasMakeWaterMark.ts:32:3 - error TS18047: 'ctx' is possibly 'null'.
32 ctx.fillStyle = "rgba(180, 180, 180, 0.3)";
~~~
src/directives/canvasMakeWaterMark.ts:33:3 - error TS18047: 'ctx' is possibly 'null'.
33 ctx.textAlign = "left";
~~~
src/directives/canvasMakeWaterMark.ts:34:3 - error TS18047: 'ctx' is possibly 'null'.
34 ctx.textBaseline = "middle";
~~~
src/directives/canvasMakeWaterMark.ts:35:3 - error TS18047: 'ctx' is possibly 'null'.
35 ctx.fillText('請(qǐng)勿外傳', canvas.width / 3, canvas.height / 2);
~~~
src/directives/canvasMakeWaterMark.ts:59:26 - error TS2554: Expected 0 arguments, but got 1.
59 const url = getDataUrl(binding);
~~~~~~~
src/directives/canvasMakeWaterMark.ts:68:3 - error TS18047: 'parentElement' is possibly 'null'.
68 parentElement.setAttribute("style", "position: relative;");
~~~~~~~~~~~~~
src/directives/canvasMakeWaterMark.ts:71:3 - error TS18047: 'parentElement' is possibly 'null'.
71 parentElement.appendChild(waterMark);
~~~~~~~~~~~~~
src/directives/canvasMakeWaterMark.ts:81:23 - error TS18047: 'el.parentElement' is possibly 'null'.
81 const waterMarkEl = el.parentElement.querySelector(".water-mark");
~~~~~~~~~~~~~~~~
src/directives/canvasMakeWaterMark.ts:87:25 - error TS18047: 'waterMarkEl' is possibly 'null'.
87 const currStyle = waterMarkEl.getAttribute("style");
~~~~~~~~~~~
src/directives/canvasMakeWaterMark.ts:116:20 - error TS2345: Argument of type 'HTMLElement | null' is not assignable to parameter of type 'Node'.
Type 'null' is not assignable to type 'Node'.
116 observer.observe(el.parentElement, {
~~~~~~~~~~~~~~~~
截圖圖片如下:
分析
打包執(zhí)行的是npm run build
命令,那么具體執(zhí)行了什么呢?我們查看package.json
中配置項(xiàng)。
"scripts": {
"dev": "vite",
"build": "vue-tsc --noEmit && vite build",
"preview": "vite preview"
},
可以發(fā)現(xiàn)在build
時(shí),執(zhí)行了vue-tsc --noEmit && vite build
,其中
-
vue-tsc
:Vue 官方提供的命令,用于執(zhí)行 TS 的類型檢查。它在執(zhí)行時(shí)會(huì)根據(jù)項(xiàng)目中的 tsconfig.json 文件配置進(jìn)行類型檢查 -
--noEmit
:TS 編譯器的選項(xiàng),使用 --noEmit 選項(xiàng)后,編譯器僅執(zhí)行類型檢查,而不會(huì)生成任何實(shí)際的編譯輸出
所以可以看出了,在打包的時(shí)候編譯器執(zhí)行了TS類型檢查,所以才報(bào)了一堆錯(cuò),類型錯(cuò)誤最終不會(huì)影響項(xiàng)目的正常運(yùn)行
解決
根據(jù)上面分析,package.json
中的"scripts"
修改如下:
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
另外項(xiàng)目通常在編譯時(shí)候,也會(huì)對(duì)我們引入的一些依賴包進(jìn)行類型校驗(yàn),我們并不需要這個(gè)操作,所以可以在tsconfig.json
中設(shè)置如下:
"compilerOptions": {
"skipLibCheck": true
},
設(shè)置后編譯器不會(huì)檢查庫(kù)文件中的類型定義是否正確,也不會(huì)對(duì)庫(kù)文件的使用進(jìn)行類型檢查。
再次打包就非常順利~文章來(lái)源:http://www.zghlxwxcb.cn/news/detail-510604.html
文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-510604.html
到了這里,關(guān)于vue-tsc --noEmit導(dǎo)致打包報(bào)TS類型錯(cuò)誤的文章就介紹完了。如果您還想了解更多內(nèi)容,請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持TOY模板網(wǎng)!