React应用程序配置TypeScript

发布时间：2025-11-03 03:25:00 来源：创站工坊 作者：系统运维

 前言最近在学习TypeScript的应用程一些知识用到了 react,记录一下 react 创建应用项目和支持 TypeScript。

React 是序配一个用于构建用户界面 UI 的 JavaScript 库,它的创建默认是不支持 TypeScript 的,本文使用的是 React16.13.1

在使用 react 的库的时候我们需要安装下面的几个组件:

阅读本文将学到:

创建项目这里默认我们拥有 node 环境,使用 npx 快速安装 React 的应用程序

在网络条件不错的情况下,速度还是可观的吧

创建好程序之后，应用程我们记录一下此时的序配目录:

tsconfig 的基本配置首先需要安装TypeScript:

生成我们需要的服务器租用tsconfig.json文件之后,我们根据自己的需求去修改即可:

使用 React 中的 tsx 组件tsx 是相当于 jsx 的 TypeScript 版本,在目录中我们将.js 后缀结尾的改成.tsx 结尾

tsx 中图片编译失败在修改完文件名字后发现图片编译失败

在使用 Webpack，使用静态资源，应用程如图片和字体，序配工作方式类似于 CSS。应用程可以直接在 TypeScript 模块中导入文件。序配这告诉 Webpack 将该文件包含在 bundle 中。应用程与 CSS 导入不同，序配导入一个文件会给你一个字符串值。应用程这个值是序配您可以在代码中引用的最终路径，例如，应用程作为图像的序配 src 属性或指向 PDF 的链接的 href。

为了减少对服务器的高防服务器应用程请求数量，导入少于 10,000 字节的映像将返回一个数据 URI 而不是路径。这适用于以下文件扩展名: bmp、 gif、 jpg、 jpeg 和 png。SVG 文件被排除。

在开始之前，必须将每种类型定义为有效的模块格式。否则，TypeScript 编译报错

要在 TypeScript 中导入这些文件，请在项目中创建一个新的类型定义文件，并将其命名为 assets.d.ts。然后，为需要导入的每种类型的资产添加一行:

配置之后需要npm start重新启动项目才能生效。

相关文章