背景

當(dāng)我們新建vue3項目，package.json文件會自動給我添加一些配置選項，這寫選項基本沒有問題，但是在實(shí)際操作過程中，當(dāng)項目越來越復(fù)雜就會出現(xiàn)問題。本文列舉一個目前我遇到的一個問題：打包后報了一堆TS類型錯誤，怎么消除這些錯誤？

項目環(huán)境：Vue3 + Vite + TS

問題描述

當(dāng)項目進(jìn)行打包時候，突然發(fā)現(xiàn)終端有幾十項報錯

npm run build

詳細(xì)報錯信息如下：

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('請勿外傳', 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中配置項。

  "scripts": {
    "dev": "vite",
    "build": "vue-tsc --noEmit && vite build",
    "preview": "vite preview"
  },

可以發(fā)現(xiàn)在build時，執(zhí)行了vue-tsc --noEmit && vite build，其中

• vue-tsc：Vue 官方提供的命令，用于執(zhí)行 TS 的類型檢查。它在執(zhí)行時會根據(jù)項目中的 tsconfig.json 文件配置進(jìn)行類型檢查
• --noEmit：TS 編譯器的選項，使用 --noEmit 選項后，編譯器僅執(zhí)行類型檢查，而不會生成任何實(shí)際的編譯輸出

所以可以看出了，在打包的時候編譯器執(zhí)行了TS類型檢查，所以才報了一堆錯，類型錯誤最終不會影響項目的正常運(yùn)行

解決

根據(jù)上面分析，package.json中的"scripts"修改如下：

  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },

另外項目通常在編譯時候，也會對我們引入的一些依賴包進(jìn)行類型校驗(yàn)，我們并不需要這個操作，所以可以在tsconfig.json中設(shè)置如下：

 "compilerOptions": {
    "skipLibCheck": true
  },

設(shè)置后編譯器不會檢查庫文件中的類型定義是否正確，也不會對庫文件的使用進(jìn)行類型檢查。

再次打包就非常順利～

到此這篇關(guān)于vue-tsc --noEmit導(dǎo)致打包報TS類型錯誤的文章就介紹到這了,更多相關(guān)vue-tsc --noEmit打包報TS錯誤內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論