国产 无码 综合区,色欲AV无码国产永久播放,无码天堂亚洲国产AV,国产日韩欧美女同一区二区

vue-tsc --noEmit導(dǎo)致打包報(bào)TS類型錯(cuò)誤

這篇具有很好參考價(jià)值的文章主要介紹了vue-tsc --noEmit導(dǎo)致打包報(bào)TS類型錯(cuò)誤。希望對(duì)大家有所幫助。如果存在錯(cuò)誤或未考慮完全的地方,請(qǐng)大家不吝賜教,您也可以點(diǎn)擊"舉報(bào)違法"按鈕提交疑問(wèn)。

?? 個(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, {
                       ~~~~~~~~~~~~~~~~

截圖圖片如下:
vue-tsc --noEmit導(dǎo)致打包報(bào)TS類型錯(cuò)誤

分析

打包執(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)行類型檢查。

再次打包就非常順利~

vue-tsc --noEmit導(dǎo)致打包報(bào)TS類型錯(cuò)誤文章來(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)!

本文來(lái)自互聯(lián)網(wǎng)用戶投稿,該文觀點(diǎn)僅代表作者本人,不代表本站立場(chǎng)。本站僅提供信息存儲(chǔ)空間服務(wù),不擁有所有權(quán),不承擔(dān)相關(guān)法律責(zé)任。如若轉(zhuǎn)載,請(qǐng)注明出處: 如若內(nèi)容造成侵權(quán)/違法違規(guī)/事實(shí)不符,請(qǐng)點(diǎn)擊違法舉報(bào)進(jìn)行投訴反饋,一經(jīng)查實(shí),立即刪除!

領(lǐng)支付寶紅包贊助服務(wù)器費(fèi)用

相關(guān)文章

  • vite vue3項(xiàng)目打包,跳過(guò)ts檢查

    vite vue3項(xiàng)目打包,跳過(guò)ts檢查

    遇到這個(gè)問(wèn)題是因?yàn)関ue文件中script標(biāo)簽沒(méi)有寫lang造成的? 剩下的ts類型檢查錯(cuò)誤 ?\\\"build\\\": \\\"vue-tsc --noEmit --skipLibCheck vite build\\\",是因?yàn)檫@個(gè)vue-tsc打包對(duì)ts進(jìn)行了類型檢查,需要全部解決了才行,可以關(guān)閉,直接改成\\\"build\\\": \\\"vite build\\\",

    2024年02月16日
    瀏覽(97)
  • Vue使用ts的枚舉類型

    Vue使用ts的枚舉類型

    vue項(xiàng)目中要使用ts的枚舉類型需要為script標(biāo)簽的lang屬性添加ts屬性值 ?首先要聲明一下(我這里是聲明了一個(gè)名稱一個(gè)顏色): 接下來(lái)是頁(yè)面中的標(biāo)簽使用(用的是element表格的組件): 效果:?

    2024年02月09日
    瀏覽(15)
  • [學(xué)習(xí)筆記](méi)解決因C#8.0的語(yǔ)言特性導(dǎo)致EFCore實(shí)體類型映射的錯(cuò)誤

    [學(xué)習(xí)筆記](méi)解決因C#8.0的語(yǔ)言特性導(dǎo)致EFCore實(shí)體類型映射的錯(cuò)誤

    今天下午在排查一個(gè)EF問(wèn)題時(shí),遇到了個(gè)很隱蔽的坑,特此記錄。 使用ef執(zhí)行Insert對(duì)象到某表時(shí)報(bào)錯(cuò),此對(duì)象的Address為空: 檢查數(shù)據(jù)庫(kù)和遷移文件時(shí)發(fā)現(xiàn)Address這個(gè)字段被意外設(shè)置成 nullable: false ,而其它的字段卻正常,按理來(lái)說(shuō)對(duì)于string類型的屬性,EFCore在codefirst模式下應(yīng)該

    2024年02月05日
    瀏覽(13)
  • vue3 組件TS 類型聲明

    要說(shuō)今年最熱門的前端技術(shù),Vue3 和 TS 絕對(duì)榜上有名了。據(jù)了解,已經(jīng)有很多公司在使用 Vue3 + TS + Vite 開發(fā)新項(xiàng)目了。那么我們也不能落后,今天就給大家分享一下如何在 Vue3 組件中結(jié)合 Composition-Api 使用 TS 類型。如果有不會(huì)或者不熟的小伙伴,一起學(xué)起來(lái)吧! 當(dāng)使用 這被

    2023年04月08日
    瀏覽(29)
  • Electron+Vue3+TS 打包exe客戶端

    Electron + Vue3 + TS 實(shí)戰(zhàn) - 掘金 如果報(bào)錯(cuò)loaderContext.getOptions is not a function ts-loader版本不一致導(dǎo)致的問(wèn)題。 解決方案:npm install ts-loader@8.0.0 --save

    2024年02月11日
    瀏覽(24)
  • Vue3通透教程【十三】TS簡(jiǎn)單類型詳解

    專欄介紹: 涼哥作為 Vue 的忠實(shí) 粉絲輸出過(guò)大量的 Vue 文章,應(yīng)粉絲要求開始更新 Vue3 的相關(guān)技術(shù)文章,Vue 框架目前的地位大家應(yīng)該都曉得,所謂三大框架使用人數(shù)最多,公司選型最多的框架,涼哥之前在文章中也提到過(guò)就是 Vue 框架之所以火起來(lái)的原因,和 Vue 框架相比其

    2024年02月05日
    瀏覽(28)
  • Vue3通透教程【十二】TS類型聲明優(yōu)勢(shì)

    專欄介紹: 涼哥作為 Vue 的忠實(shí) 粉絲輸出過(guò)大量的 Vue 文章,應(yīng)粉絲要求開始更新 Vue3 的相關(guān)技術(shù)文章,Vue 框架目前的地位大家應(yīng)該都曉得,所謂三大框架使用人數(shù)最多,公司選型最多的框架,涼哥之前在文章中也提到過(guò)就是 Vue 框架之所以火起來(lái)的原因,和 Vue 框架相比其

    2023年04月20日
    瀏覽(29)
  • vite+vue3+ts搭建項(xiàng)目八(打包性能優(yōu)化三:使用CDN)

    vite+vue3+ts搭建項(xiàng)目八(打包性能優(yōu)化三:使用CDN)

    使用vite-plugin-cdn-import 下載npm包 官方github:https://github.com/MMF-FE/vite-plugin-cdn-import 開發(fā)環(huán)境使用本地的npm包,cdn是打包時(shí)候才生效 在vite.config.ts中通過(guò)importToCDN引入 注意事項(xiàng) :網(wǎng)上很多教程,還需要在 build 的 rollupOptions 添加對(duì)應(yīng)的 external ,如上注釋所示,其實(shí)是不需要的,

    2024年02月02日
    瀏覽(98)
  • Vue3通透教程【十四】TS復(fù)雜類型詳解(一)

    專欄介紹: 涼哥作為 Vue 的忠實(shí) 粉絲輸出過(guò)大量的 Vue 文章,應(yīng)粉絲要求開始更新 Vue3 的相關(guān)技術(shù)文章,Vue 框架目前的地位大家應(yīng)該都曉得,所謂三大框架使用人數(shù)最多,公司選型最多的框架,涼哥之前在文章中也提到過(guò)就是 Vue 框架之所以火起來(lái)的原因,和 Vue 框架相比其

    2024年02月02日
    瀏覽(32)
  • vue3(ts)類型“EventTarget”上不存在屬性“value”

    vue3(ts)類型“EventTarget”上不存在屬性“value”

    萌新一枚,記錄自己學(xué)習(xí)ts遇到的坑,幫助加強(qiáng)記憶。 一、問(wèn)題: 封裝自定義input組件,在獲取e.target.value時(shí)出現(xiàn)如下報(bào)錯(cuò)。類型“EventTarget”上不存在屬性“value” ? 二、原因: e.target默認(rèn)為HTMLElement類型,是所有HTML元素類型的父類,不能確保身上一定有value屬性。因此需要

    2024年02月12日
    瀏覽(49)

覺(jué)得文章有用就打賞一下文章作者

支付寶掃一掃打賞

博客贊助

微信掃一掃打賞

請(qǐng)作者喝杯咖啡吧~博客贊助

支付寶掃一掃領(lǐng)取紅包,優(yōu)惠每天領(lǐng)

二維碼1

領(lǐng)取紅包

二維碼2

領(lǐng)紅包