React+TypeScript项目：配置路径别名

已于 2024-08-06 18:09:58 修改
阅读量27 收藏
点赞数 1
文章标签： react.js typescript 前端
于 2024-08-06 18:07:06 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/panghuangang/article/details/140958614
版权

项目是使用npm create vite@latest react-jike-mobile -- --template react-ts命令创建的。

让Vite做路径解析（真实的路径转换）

安装node类型包

执行命令npm i @types/node -D：
在这里插入图片描述

安装完成后，package.json文件中自动更新了依赖：
在这里插入图片描述

修改vite.config.ts配置

在这里插入图片描述

让Vscode做制能路径提示（开发者体验）

修改tsconfig.app.json文件

首先看看文件结构，tsconfig.json文件引入了tsconfig.app.json和tsconfig.node.json：
在这里插入图片描述

修改tsconfig.app.json文件：
在这里插入图片描述

现在输入@/就有路径提示了：
在这里插入图片描述

听海边涛声
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
react+ts+vite配置路径别名
要胖的博客
02-28 673
vite+react配置路径别名 配置VSCode智能提示
React+Antd+Vite+TypeScript 项目实战教程
IT飞牛
05-10 4986
本教程属于react入门教程，课程围绕如何搭建一个简单的登录页面展开，会带你快速了解react、redux、redux-devtool、react-router-dom、axiox这些常见技术的使用方式，教程最后会附上项目源码。
react+typescript配置项目目录别名
weixin_42971933的博客
07-19 239
又开始学习react，搭配typescript，这里想要配置项目有3个步骤： 1. 首先yarn eject暴露配置信息（npm同理）; 2. 找到config下的webpack.config.js文件, 修改alias，在最末尾新增——'@': paths.appSrc, 3. 因为使用了typescript,所以还需要在typescript.json中配置——"paths": { "@/*": ["./src/*"] } 4. 重启项目，即可使用，此时的@相当于src 配图： webpack.
vite + react +typescript 环境搭建，小白入门级教程
二三的博客
12-23 2089
使用vite创建项目，node 版本需要大于12.0.0，可以使用node -v查看自己当前的node版本。
从零开始搭建React+TypeScript+webpack开发环境-基础配置
断线的风筝
10-29 270
return {visitor: {if () {${return {const {// 检查 state.file.metadata 是否存在，不存在则初始化为空对象 if(!} // 检查 state.file.metadata.fileModules 是否存在，不存在则初始化为空数组 if(!} // 将需要启用 CSS Modules 的文件路径保存到文件属性中 const filePath = state . file . opts . filename;
【React+TS】从零开始搭建react+typescript+router+redux+less+pxToVw自适应+sass+axios反向代理+别名@+Antd-mobile
weixin_42582523的博客
12-08 8676
【React+TS】从零开始搭建react+typescript+router+redux+less+px2rem自适应+sass+axios反向代理+别名@+antd-mobil，如有问题，请及时留言，看到后会及时解答的 本次修改原因：提供两种方式px2rem和pxToVw配置自适应，删减重复步骤
react + typescript 项目配置别名
weixin_44763349的博客
05-12 483
react + typescript 项目配置别名 第一步 首先需要生成一个配置文件 npm run eject 第二步 然后在config文件下面的webpack.config.js 中找到resolve 下面的 alias,写入 "@": path.resolve(__dirname, '../src')， 我这里默认配置文件路径在config目录下，跟src平级，所以使用…/src。 第三步 找到tsconfig.json文件，修改experimentalDecorators为true, 然后在co
react+typescript+esLint+prettier初始化项目
shadowfall的博客
11-20 1110
使用create-react-app 脚手架
【React+TS】从零开始搭建react+typescript+router+redux+less+px2rem自适应+sass+axios反向代理+别名@+Antd-mobile
aoliei的博客
03-17 1813
一、通过create-react-app脚手架创建项目 npx create-react-app testproject --template typescript 在vscode中打开项目，可以看到顺利生成了react项目且组件的后缀为tsx,此时说明成功创建了react+typescript项目的雏形 在项目根目录下，运行npm run start，成功启动项目 npm start 二、配置路由 npm i react-router-dom@5.2.0 react-ro..
ReactiveStream
shangxianjiao的博客
08-02 260
消息传递是响应式核心ReactiveStream规范核心接口。
React前端面试每日一试 6.空标签(Fragment)＜＞＜/＞是什么？它有什么作用？
weixin_42900858的博客
08-05 266
空标签是React中的一个非常有用的特性，允许开发者在不引入额外DOM节点的情况下返回多个元素。它使得代码更加简洁，减少了不必要的嵌套，并且有助于提升渲染性能。通过理解和使用Fragment，可以编写更高效、可维护的React代码。
react如何父子组件传参
最新发布
ggq53219的博客
08-05 319
在React中，父子组件之间的传参主要通过props（属性）来实现。子组件通过props接收来自父组件的数据，而父组件则可以通过在子组件标签上设置属性（即props）来传递数据。下面是一个简单的例子来说明这个过程。
React hooks优势
zhang20040217的博客
08-05 236
React Hooks 是 React 16.8 版本引入的一个全新特性，它允许你在不编写类的情况下使用 state 和其他 React 特性。Hooks 的引入为 React 组件带来了许多优势，主要包括以下几个方面：函数组件也能使用状态和其他 React 特性：逻辑复用：避免地狱式嵌套：更简单的代码：组件间的通信变得更容易：更容易的测试：支持并发渲染：总的来说，React Hooks 通过将 React 的特性引入函数组件，提高了组件的复用性、简洁性和可测试性，使得 React 应用的开发变得更加高效和
React 常用 Hooks 和使用的易错点
qq_25416827的博客
08-05 279
typescript复制代码const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);typescript复制代码const memoizedCallback = useCallback(() => {中没有正确地清理副作用，导致内存泄漏。中忘记依赖数组，导致没有性能优化效果。中忘记依赖数组，导致无限循环。：性能优化，记住计算结果。：性能优化，记住函数定义。函数中返回新的状态对象。中返回一个清理函数。
React 函数式组件在更新渲染时，整个函数体都会执行吗？
前端原创分享，常年坚持记录和分享，全网阅读量超百万
08-02 287
在 React 函数式组件更新渲染时,整个函数体都会重新执行。这是 React 函数式组件的一个重要特性。理解函数组件的这一特性对于编写高效的 React 应用非常重要,可以帮助开发者更好地处理状态、副作用和性能优化。尽管函数体重新执行,但 React 会保留组件的状态。由于函数体每次都会重新执行,所以 Hooks 必须在函数的顶层调用,不能在条件语句中使用。可以在函数体内使用条件语句来控制渲染内容,但整个函数体仍会执行。每次组件重新渲染时,函数组件的整个函数体都会从头到尾重新执行。
比较一下React与Vue
zhang20040217的博客
08-05 549
React和Vue都是优秀的JavaScript库，它们各自具有独特的特点和优势。选择哪个框架取决于项目的具体需求和开发团队的技术储备。React在组件化开发、庞大的生态系统和性能优化方面表现优异，适合复杂的大型项目；而Vue则在快速开发、易于上手和生态系统丰富性方面具有优势，适合小型项目和新手开发者。需要注意的是，选择合适的前端框架并非一蹴而就的决策，需要在实际项目中实践和评估。
antd react form.list动态增减表单项Switch受控
u010234868的专栏
08-02 376
这个代码示例展示了如何使用Ant Design的Form和Form.List组件来创建一个可动态增减表单项的表单，并且每个表单项旁边都有一个Switch组件，这些Switch组件是受控的，即它们的状态会被保存在组件的状态中。当用户提交表单时，表单的数据以及Switch的状态都会被打印出来。
React 组件：构建现代 Web 应用的基础
lly202406的博客
08-05 278
React 组件是 React 应用中的基本单元，用于描述用户界面的一部分。每个组件都有自己的状态和属性，可以独立地渲染和管理。React 组件可以定义为类组件或函数组件。
使用react+ typescript
05-13
React 和 TypeScript 可以很好地结合使用，TypeScript 是一种静态类型语言，可以帮助我们检查代码中的错误并提供更好的代码提示。下面是一些使用 React 和 TypeScript 的基本步骤： 1. 安装 TypeScript：可以使用 npm 或者 yarn 安装 TypeScript ```bash npm install -g typescript ``` 2. 创建 React 应用：可以使用 create-react-app 创建一个简单的 React 应用 ```bash npx create-react-app my-app --template typescript ``` 3. 开始编写 TypeScript 代码：在创建的应用中，可以编写 TypeScript 代码，例如： ```tsx import React from 'react'; interface Props { name: string; } const Hello: React.FC<Props> = ({ name }) => { return <div>Hello, {name}!</div>; }; export default Hello; ``` 在上面的代码中，我们定义了一个名为 `Hello` 的 React 组件，它接受一个 `name` 属性，并使用 `React.FC` 类型进行声明。 4. 运行应用程序：可以使用 `npm start` 命令启动应用程序，然后在浏览器中访问 `http://localhost:3000` 查看效果。 以上是使用 React 和 TypeScript 的基本步骤，你可以根据需要进行更多的配置和开发。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值