Vue 3 + TypeScript 專案,為什麼 serve 和 build 的時候都不報任何 TS 編譯錯誤?

Vue.js shintendo • at 2021-02-23 16:09:57 • 4 Views

我在元件的<script>段裡寫了一些錯誤的語句,VSCode 檢查出來了並且標紅了,但當我執行 npm run serve 的時候,都能順利跑起來並且沒有任何報錯,請問這個情況是否正常?如果不正常的話,我稍後可以提供程式碼。

Total: 15
  • avastms 2021-02-22 19:17:26
    正常,vue 預設的 tsconfig 是 transpileOnly, 新一點的 vite 工具鏈甚至都不用 tsc,對 TypeScript 的態度就是鬧著玩
  • Jirajine 2021-02-22 19:18:26
    很正常啊, 忽略型別檢查能加快編譯打包速度,而 typescript 提供的型別檢查功能可以直接通過 language server 使用。
  • beginor 2021-02-23 00:16:09
    只能說 vue 對 ts 的支援比較差, 比 angular 和 react 差很多, 我在 vue 專案中都要設定 skipLibraryCheck 為 true 才能執行 tsc, 否則一大堆錯誤
  • faceRollingKB 2021-02-23 10:19:04
    終於看到踩坑 vue3 的了
  • shintendo 2021-02-23 10:20:04
    @faceRollingKB 個人專案玩玩
  • shintendo 2021-02-23 10:20:04
    @avastms
    @Jirajine
    那請問有什麼配置選項可以開啟檢查嗎?比如我希望有型別錯誤的時候中止編譯
  • zmlq7 2021-02-23 12:17:04
    @beginor 還好吧 我用腳手架生成的 ts 版 3.0 的 ,沒報錯欸。然後用 tsx 去寫,感覺程式碼提示上和 react 差距不是很大了。
  • zhangyuang 2021-02-23 14:16:17
    vue+ts 不是用來檢查型別的。你可以單獨搞一個 server:types: tsc -p 用 tsc 來單獨檢測型別錯誤
  • shintendo 2021-02-23 14:18:17
    @zhangyuang 呃,不太明白,那 vue+ts 僅僅為了程式碼提示嗎?
  • Jirajine 2021-02-23 15:15:41
    @shintendo 當然可以,配置取決於你的打包工具,一般為了打包速度會預設使用 babel 或 esbuild 來轉譯 ts,你可以顯式指定為 tsc,並配置好 tsconfig.json 。
    但這樣其實沒太大必要,會大幅度拖慢打包速度。型別檢查 language server 已經幫你做了,有錯誤都能提示出來。
    換用 snowpack/vite 這些基於 esm 的開發工具能快一些。
  • zhangyuang 2021-02-23 15:16:41
    @shintendo 你可以這麼理解。。其實 react+ts 也只是為了程式碼提示。因為 ts-loader 和 babel-react-app 的 ts 選項也都不會進行型別檢查。只是單純的 transform 程式碼
  • shintendo 2021-02-23 15:17:41
    @Jirajine
    我是 vue-cli 生成的專案,你說的“顯式指定為 tsc”是在什麼地方配置的呢?
    關於 language server 的提示,我的問題是它只提示當前開啟的檔案中的錯誤,而不檢查專案中其它檔案中可能存在的錯誤,這個是我的設定問題嗎?
  • Jirajine 2021-02-23 16:15:41
    @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 2021-02-23 22:19:53
    這不是對 ts 不友好,而是一種優化手段,可能小專案不會感覺 tsc 有多慢,在我軟 ts 大型專案比比皆是,編譯起來速度感人。
    一般型別檢查通過編輯器就能解決一大部分,如果實在要檢查的話一般是用這個外掛 https://www.npmjs.com/package/fork-ts-checker-webpack-plugin
  • charlie21 2021-02-25 11:18:40
    一個 lint 為什麼要報錯?
    “(在型別擦除的層面看) TypeScript 本質上是一個 JS linter (給出報錯提示,在編輯器裡,在編輯時)”
    https://www.cnblogs.com/powertoolsteam/p/13500668.html
    https://www.typescriptlang.org/docs/handbook/typescript-from-scratch.html#erased-types
Add a reply
For Commenting you need to Login. If you dont have a Account you need to Register.