上一主题 下一主题
ScriptCat,新一代的脚本管理器脚本站,与全世界分享你的用户脚本油猴脚本开发指南教程目录
返回列表 发新帖

vue3 jsx关于import vue组件错误无提示,编译时后ts报错情况猜想

[复制链接]
  • TA的每日心情
    擦汗
    昨天 09:20
  • 签到天数: 192 天

    [LV.7]常住居民III

    687

    主题

    5428

    回帖

    6365

    积分

    管理员

    非物质文化遗产社会摇传承人

    积分
    6365

    荣誉开发者管理员油中2周年生态建设者喜迎中秋

    发表于 2022-7-14 23:07:50 | 显示全部楼层 | 阅读模式

    比如写了一段代码

    import { defineComponent } from "vue";
    
    import HelloWorld from "./components/HelloWorld.vue";
    export default defineComponent({
      setup() {
        return () => (
          <div>
            <HelloWorld></HelloWorld>
          </div>
        );
      },
    });
    

    在写代码的时候是不会报错的
    因为在shims-vue.d.ts

    /* eslint-disable */
    declare module '*.vue' {
      import type { DefineComponent } from 'vue'
      const component: DefineComponent<{}, {}, any>
      export default component
    }

    导出了一个默认类型,而没有导出组件自身的类型
    所以我们写什么都不会报错
    而在我们build的时候会检测各种各样的的类型,如prop等
    会产生报错
    这里个人感觉是intellsense与build的差异导致的
    但是找了很久也没有找到答案

    个人猜测

    注意,该没有结果经过任何调试确认
    仅为个人猜想
    因为我实在不知道哪里下手调了
    个人猜测是vue在编译的过程中变成了ts文件并推断出了类型
    出现了具体类型
    在require的时候得到了函数的类型
    所以才在build得到了组件的具体类型导致错误
    关于这个可以查看对于vue官网的
    https://staging-cn.vuejs.org/guide/typescript/overview.html#note-on-vue-cli-and-ts-loader

    对 Vue CLI 和 ts-loader 的说明

    在像 Vue CLI 这样的基于 webpack 搭建的项目中,一般是在模块转换的管道中执行类型检查,例如使用 ts-loader。然而这并不是一个简洁的解决方案,因为类型系统需要了解整个模块关系才能执行类型检查。单个模块的转换步骤并不适合该任务。这导致了下面的问题:

    ts-loader 只能对转换后的代码执行类型检查,这和我们在 IDE 或 vue-tsc 中看到的可以映射回源代码的错误并不一致。

    类型检查可能会很慢。当它和代码转换在相同的线程/进程中执行时,它会显著影响整个应用程序的构建速度。

    我们已经在 IDE 中通过单独的进程运行着类型检查了,因此这一步降低了开发体验但没有带来足够的收益。

    如果你正通过 Vue CLI 使用 Vue 3 和 TypeScript,我们强烈建议你迁移到 Vite。我们也在为 CLI 开发仅执行 TS 语法转译的选项,以允许你切换至 vue-tsc 来执行类型检查。

    混的人。
    ------------------------------------------
    進撃!永遠の帝国の破壊虎---李恒道

    入驻了爱发电https://afdian.net/a/lihengdao666
    个人宣言:この世界で私に胜てる人とコードはまだ生まれていません。死ぬのが怖くなければ来てください。

    发表回复

    本版积分规则

    快速回复 返回顶部 返回列表