我尝试通过将这些值添加到tsconfig.json来设置项目中的路径别名:
"compilerOptions": {
"baseUrl": "src",
"paths": {
"@store/*": ["store/*"]
},
如果我创建一个导入,IntelliJ或VSCode都不会打扰我:
import { AppState } from '@store/index';
但是当我编译应用程序时,我收到了以下警告:
The following changes are being made to your tsconfig.json file:
- compilerOptions.paths must not be set (aliased imports are not supported)
然后它会爆说找不到引用:
TypeScript error in C:/xyz.tsx(2,26):
Cannot find module '/store'. TS2307
是否有解决方法或create-react-app --typescript
不支持?
8条答案
按热度按时间db2dz4w81#
在我的例子中,我使用craco和craco-alias解决了这个问题
1.安装craco和craco-alias:
npm install @craco/craco --save && npm i -D craco-alias
1.在根目录中创建
tsconfig.paths.json
1.在
tsconfig.json
中扩展tsconfig.paths.json
1.在根目录中创建
craco.config.js
1.在
package.json
中,将"start": "react-scripts start"
与"start": "craco start"
交换yqlxgs2m2#
craco或重新连接 create-react-app 的别名解决方案是**react-app-alias**,适用于以下系统:第一个
根据所述系统的文档,替换
package.json
中的react-scripts
,然后配置:React应用程序重新连线
饼干
全部
在json中配置别名,如下所示:
并将此文件添加到主typescript配置文件的
extends
部分:aor9mmx13#
编辑- 20/3/20 -上述答案包含一个带有插件的解决方案。
有同样的问题。在发布时,它目前不支持原样。
CRA团队仍在开发该功能:https://github.com/facebook/create-react-app/pull/6116
如果您编辑tsconfig,CRA会移除变更:https://github.com/facebook/create-react-app/issues/6269
这篇文章中有一些技巧:https://github.com/facebook/create-react-app/issues/5118以使别名工作,但是需要定制CRA设置,这不适合我的用例(按原样使用CRA)。
lyr7nygr4#
路径别名在tsconfig.json中不再有效
您也可以这样做,直接导入与
src
目录相关的文件转到
tsconfig.json
文件,将基本URL添加为"."
然后你可以直接从
src
目录导入东西brtdzjyr5#
这是一个老帖子,但我发现了一个非常简单的解决方案,只使用package.json特性。
它可以在node.js和webpack项目中使用
vs3odd8k6#
@oklas。我已经解决了使用config-overrides.js中的以下内容,这与上面的内容相同。但是非常感谢分享这个答案:
p8h8hvxi7#
在2022中,对于那些使用弹出的TypeScript create-react-app的用户,您可以通过
config/webpack.config.js
中的webpack设置别名,如下所示:然后在ts/tsx文件中使用别名,如下所示:
下面是webpack resolve docs的基本知识。
请注意,CRA设置的唯一别名是
src
,因此您可以使用import logo from 'src/assets/logo.svg';
,而无需更改webpack配置。如果别名在未弹出的应用程序中工作,您必须自行检查。s4n0splo8#
我们还使用craco和
ts-loader
解决了该问题-如下所述:https://stackoverflow.com/a/63545611/10813908所述设置基本上允许CRA通过craco覆盖内置webpack配置进行扩展,还允许CRA代码直接引用mono-repo中外部/共享包中的typescript文件。