V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
vue.js
shintendo
V2EX  ›  Vue.js

Vue 3 + TypeScript 项目,为什么 serve 和 build 的时候都不报任何 TS 编译错误?

  •  
  •   shintendo · 14 天前 · 1013 次点击

    我在组件的<script>段里写了一些错误的语句,VSCode 检查出来了并且标红了,但当我执行 npm run serve 的时候,都能顺利跑起来并且没有任何报错,请问这个情况是否正常?如果不正常的话,我稍后可以提供代码。

    16 条回复    2021-03-04 14:08:42 +08:00
    avastms
        1
    avastms   14 天前   ❤️ 1
    正常,vue 默认的 tsconfig 是 transpileOnly, 新一点的 vite 工具链甚至都不用 tsc,对 TypeScript 的态度就是闹着玩
    Jirajine
        2
    Jirajine   14 天前   ❤️ 1
    很正常啊, 忽略类型检查能加快编译打包速度,而 typescript 提供的类型检查功能可以直接通过 language server 使用。
    beginor
        3
    beginor   14 天前 via Android   ❤️ 1
    只能说 vue 对 ts 的支持比较差, 比 angular 和 react 差很多, 我在 vue 项目中都要设置 skipLibraryCheck 为 true 才能运行 tsc, 否则一大堆错误
    faceRollingKB
        4
    faceRollingKB   13 天前   ❤️ 1
    终于看到踩坑 vue3 的了
    shintendo
        5
    shintendo   13 天前
    @faceRollingKB 个人项目玩玩
    shintendo
        6
    shintendo   13 天前
    @avastms
    @Jirajine
    那请问有什么配置选项可以开启检查吗?比如我希望有类型错误的时候中止编译
    zmlq7
        7
    zmlq7   13 天前   ❤️ 1
    @beginor 还好吧 我用脚手架生成的 ts 版 3.0 的 ,没报错欸。然后用 tsx 去写,感觉代码提示上和 react 差距不是很大了。
    zhangyuang
        8
    zhangyuang   13 天前   ❤️ 1
    vue+ts 不是用来检查类型的。你可以单独搞一个 server:types: tsc -p 用 tsc 来单独检测类型错误
    shintendo
        9
    shintendo   13 天前
    @zhangyuang 呃,不太明白,那 vue+ts 仅仅为了代码提示吗?
    Jirajine
        10
    Jirajine   13 天前 via Android   ❤️ 1
    @shintendo 当然可以,配置取决于你的打包工具,一般为了打包速度会默认使用 babel 或 esbuild 来转译 ts,你可以显式指定为 tsc,并配置好 tsconfig.json 。
    但这样其实没太大必要,会大幅度拖慢打包速度。类型检查 language server 已经帮你做了,有错误都能提示出来。
    换用 snowpack/vite 这些基于 esm 的开发工具能快一些。
    zhangyuang
        11
    zhangyuang   13 天前   ❤️ 1
    @shintendo 你可以这么理解。。其实 react+ts 也只是为了代码提示。因为 ts-loader 和 babel-react-app 的 ts 选项也都不会进行类型检查。只是单纯的 transform 代码
    shintendo
        12
    shintendo   13 天前
    @Jirajine
    我是 vue-cli 生成的项目,你说的“显式指定为 tsc”是在什么地方配置的呢?
    关于 language server 的提示,我的问题是它只提示当前打开的文件中的错误,而不检查项目中其它文件中可能存在的错误,这个是我的设置问题吗?
    Jirajine
        13
    Jirajine   13 天前 via Android   ❤️ 1
    @shintendo 我记得 vue-cli 生成项目用的是 webpack,那你只要配置转译 typescript 的为 ts-loader 而不是 babel-loader,然后 tsconfig.json 里开启需要的选项。
    具体参考 https://cli.vuejs.org/core-plugins/typescript.html
    https://github.com/TypeStrong/ts-loader
    stkevintan
        14
    stkevintan   13 天前 via Android   ❤️ 1
    这不是对 ts 不友好,而是一种优化手段,可能小项目不会感觉 tsc 有多慢,在我软 ts 大型项目比比皆是,编译起来速度感人。
    一般类型检查通过编辑器就能解决一大部分,如果实在要检查的话一般是用这个插件 https://www.npmjs.com/package/fork-ts-checker-webpack-plugin
    charlie21
        15
    charlie21   11 天前
    一个 lint 为什么要报错?
    “(在类型擦除的层面看) TypeScript 本质上是一个 JS linter (给出报错提示,在编辑器里,在编辑时)”
    https://www.cnblogs.com/powertoolsteam/p/13500668.html
    https://www.typescriptlang.org/docs/handbook/typescript-from-scratch.html#erased-types
    Reol
        16
    Reol   4 天前
    加 eslint 是不是应该就能报错?
    关于   ·   帮助文档   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   1436 人在线   最高记录 5497   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 22ms · UTC 18:31 · PVG 02:31 · LAX 10:31 · JFK 13:31
    ♥ Do have faith in what you're doing.