如何在 Next JS 应用路由器的开发过程中消除 TS 错误

Question

当使用 Next JS 应用程序路由器运行

npm run dev

时，我还启动了一个同时运行的专用

tsc --watch

。

简而言之，我这样做是为了在

file b

中更改影响

file a

的内容时获得

file b

中错误的“实时更新”，而我在 IDE 中没有打开该错误。

关于支持和反对这种方法的很多争论的长篇故事可以在 Next JS 存储库的这个讨论中找到，在那里我也得到了这种设置的初步想法。

这在旧的页面路由器上运行得很好，但它会导致应用程序路由器应用程序中出现以下错误：

[TS] error TS6053: File '/path/to/repo/.next/types/app/api/trpc/[trpc]/route.ts' not found.
[TS]   The file is in the program because:
[TS]     Matched by include pattern '.next/types/**/*.ts' in '/path/to/repo/tsconfig.json'
[TS] 
[TS]   tsconfig.json:23:96
[TS]     23   "include": [".eslintrc.cjs", "next-env.d.ts", "**/*.ts", "**/*.tsx", "**/*.cjs", "**/*.mjs", ".next/types/**/*.ts"],
[TS]                                                                                                       ~~~~~~~~~~~~~~~~~~~~~
[TS]     File is matched by include pattern specified here.
[TS] 
[TS] error TS6053: File '/path/to/repo/.next/types/app/layout.ts' not found.
[TS]   The file is in the program because:
[TS]     Matched by include pattern '.next/types/**/*.ts' in '/path/to/repo/tsconfig.json'
[TS] 
[TS]   tsconfig.json:23:96
[TS]     23   "include": [".eslintrc.cjs", "next-env.d.ts", "**/*.ts", "**/*.tsx", "**/*.cjs", "**/*.mjs", ".next/types/**/*.ts"],
[TS]                                                                                                       ~~~~~~~~~~~~~~~~~~~~~
[TS]     File is matched by include pattern specified here.
[TS] 
[TS] error TS6053: File '/path/to/repo/.next/types/app/page.ts' not found.
[TS]   The file is in the program because:
[TS]     Matched by include pattern '.next/types/**/*.ts' in '/path/to/repo/tsconfig.json'
[TS] 
[TS]   tsconfig.json:23:96
[TS]     23   "include": [".eslintrc.cjs", "next-env.d.ts", "**/*.ts", "**/*.tsx", "**/*.cjs", "**/*.mjs", ".next/types/**/*.ts"],
[TS]                                                                                                       ~~~~~~~~~~~~~~~~~~~~~
[TS]     File is matched by include pattern specified here.

应用程序运行得很好，所以这似乎不是一个真正的问题。

文件夹

.next/types/**/*.ts

在我的

includes

中

tsconfig.json

:

"include": [".eslintrc.cjs", "next-env.d.ts", "**/*.ts", "**/*.tsx", "**/*.cjs", "**/*.mjs", ".next/types/**/*.ts"],

当简单地从配置中删除

.next/types/**/*.ts

时，错误就消失了，一切似乎都按预期工作，但是，每次我启动开发服务器时都会自动重新添加，所以我怀疑它真的应该就在那里🤷u200d♂️

仅供参考，我已经使用 create T3 app 引导了我的应用程序，这就是

api/trpc/[trpc]/route.ts

的“来源”。

这是我的具体设置，展示了我如何同时运行

tsc

：

  "scripts": {
    "dev": "concurrently -n NEXT,TS -c grey,green \"next dev\" \"npm run ts:watch\"",
    "ts": "tsc --noEmit --incremental --preserveWatchOutput --pretty",
    "ts:watch": "npm run ts -- --watch"
  },

concurrently

部分是从这里提供的。

ATM 我已经删除了这个并发

tsc --watch

，因为上面显示的错误产生了太多噪音，无论如何我都看不到真正的错误，但我真的很想念它。

我真的很感谢一些关于如何在不看到这些错误的情况下找回我的

tsc --watch

 的帮助。

---

更新附加信息

Next JS GitHub 讨论中的这条评论让我明白了为什么我的 TSC 手表首先显示这些错误：

存在竞争条件，因为当 Next 重建页面时（例如，在开发期间的页面请求等），开始在

.next/types

 内重建文件。然而，TSC Watch 在文件更改时重新编译，这（通常？）发生在页面请求/下一次重建之前，因此 TSC Watch 在这里只是编译“太早”。

Answer 1

我想我找到了一个适合我的解决方案：

创建一个包含以下内容的
• tsconfig.watch.json

  ：
  

  {
    "extends": "./tsconfig.json",
    "exclude": ["node_modules", ".next/types/**/*.ts"]
  }

在我的
• ts:watch

  脚本中使用它：

  npm run ts -- --watch --project tsconfig.watch.json

这样，我在 TSC 手表中的

.next/types

 内的文件中看不到任何错误，但仍会在 IDE 或 

build

 上看到它们，它们仍然使用包含该文件夹的原始 

tsconfig.json

。

我不能 100% 确定是否存在我可能在开发时在观察程序中丢失重要错误的情况，但 ATM 这对我来说看起来很好。