?? 個(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

到了這里，關(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)！