你的提案是否与问题相关?
我正在使用 create-react-app 进行 my React workshops 。每个项目都有一个练习文件(未完成的代码)和一个最终文件(已完成的代码)。我正在将它们全部重写为 TypeScript。我不想为练习文件启用严格模式,因为这对于刚接触 TypeScript 的人来说可能会很困难。然而,我确实希望练习版本的最终文件能够使用严格模式进行类型检查(出于我自己的考虑)。
在一个项目中为不同文件设置不同的配置可以使用 project references 配置来实现。以下是我所做的“工作”:kentcdodds/react-fundamentals@84eb9ed
tsconfig.json
{
"files": [],
"references": [
{"path": "config/tsconfig.exercise.json"},
{"path": "config/tsconfig.final.json"}
]
}
config/tsconfig.exercise.json
{
"extends": "./tsconfig.shared.json",
"include": ["../src/exercise/"],
"compilerOptions": {
"strict": false
}
}
config/tsconfig.final.json
{
"extends": "./tsconfig.shared.json",
"exclude": ["../src/exercise/"],
"include": ["../src"],
"compilerOptions": {
"strict": true,
"noUncheckedIndexedAccess": true
}
}
config/tsconfig.shared.json
{
"compilerOptions": {
"target": "es5",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": false,
"forceConsistentCasingInFileNames": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx",
"noFallthroughCasesInSwitch": true
}
}
运行 tsc -b
将使用预期的配置对所有文件进行类型检查。
然而,一旦我运行 react-scripts start
,我的 tsconfig.json
就会出现 changed :
{
"files": [],
"references": [
{
"path": "config/tsconfig.exercise.json"
},
{
"path": "config/tsconfig.final.json"
}
],
"compilerOptions": {
"target": "es5",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx"
},
"include": [
"src"
]
}
随着这些更改,当我尝试运行 tsc
(或 tsc -b
)时,会出现几个错误,例如:
tsconfig.json:4:5 - error TS6306: Referenced project '/Users/kentcdodds/code/epic-react/react-fundamentals/config/tsconfig.exercise.json' must have setting "composite": true.
4 {
~
5 "path": "config/tsconfig.exercise.json"
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
6 },
~~~~~
tsconfig.json:7:5 - error TS6310: Referenced project '/Users/kentcdodds/code/epic-react/react-fundamentals/config/tsconfig.final.json' may not disable emit.
通过将 "noEmit": false
和 "composite": true
设置为 config/tsconfig.shared.json
,我可以进一步前进,但无法摆脱这个错误:
error TS6305: Output file '/Users/kentcdodds/code/epic-react/react-fundamentals/src/final/07.extra-3.d.ts' has not been built from source file '/Users/kentcdodds/code/epic-react/react-fundamentals/src/final/07.extra-3.tsx'.
The file is in the program because:
Matched by include pattern 'src' in '/Users/kentcdodds/code/epic-react/react-fundamentals/tsconfig.json'
tsconfig.json:33:5
33 "src"
~~~~~
File is matched by include pattern specified here.
我尝试了我能想到的所有组合选项,但没有什么能让我让 TypeScript 满意+实现我在 create-react-app 项目中为不同文件设置不同配置的目标。
描述你希望得到的支持
我希望直接支持 references
。我注意到了 ts-loader's page on references 。
除了这个之外,我对环境变量(类似于 SKIP_PREFLIGHT_CHECK
)也很满意,它可以跳过更新 tsconfig.json
并只是相信配置是有效的。
描述你考虑过的替代方案
我考虑过关闭 create-react-app 或者使用其中一个灵活的项目,但我真的不希望这样做。
其他上下文
我认为我已经说了所有需要说的话 😅
6条答案
按热度按时间kzmpq1sx1#
进行了一些调查,注意到 create-react-app 实际上使用 https://github.com/TypeStrong/fork-ts-checker-webpack-plugin 进行 TypeScript 检查。实际上确实支持
references
,但 CRA 有较旧的版本,我不认为它支持引用。不幸的是,当我尝试升级到最新版本时,我遇到了一个错误(没有任何堆栈跟踪):
Cannot read property 'tap' of undefined
。我猜这是因为fork-ts-checker-webpack-plugin
使用了webpack v5中的API,而CRA使用的是webpack v4。升级到v5可能会相当复杂,所以我停止了在那里的调查。
暂时,我决定使用
patch-package
。我的补丁只是在verifyTypeScriptSetup
中提前退出:它“起作用”了,因为 CRA 不再更新我的tsconfig文件,但是当有TS错误时,我在终端或错误覆盖层中没有得到任何输出。这实际上更适合我的用例,所以这个解决方法对我有效。
xkftehaa2#
我也对此感兴趣.我们有一个大型项目,我想在其中 "插入" 一个React Native应用,并利用我们已经拥有的所有代码.这个问题引用了另一个问题,以及其他调查$x_{1e0f1}x$.
2w3kk1z53#
是的,看起来CRA在这个时候还没有解决这个问题,这确实很尴尬。
在CRA项目中,编辑器(VS Code)中一切都运行良好,但项目无法启动。
sauutmhj4#
+1 使用Typescript的单仓库在这里确实会受益。
2ic8powd5#
$1$, $been$ hoping for that feature for years now 🙏
ar7v8xwq6#
+1 难以置信这个问题已经存在了 +3 年