React react-app-env.d.ts是 TypeScript 的全局类型声明文件,它的作用

src/react-app-env.d.ts 是 TypeScript 的全局类型声明文件,在这个项目中承担以下几个作用:

  1. 引入 React 脚手架内置类型
clike 复制代码
/// <reference types="node" />
/// <reference types="react" />
/// <reference types="react-dom" />`在这里插入代码片`

三条三斜线指令,让 TypeScript 自动加载 Node.js、React、ReactDOM 的类型定义,无需在每个文件里手动 import。

  1. 扩展 process.env 的类型
dart 复制代码
declare namespace NodeJS {
  interface ProcessEnv { ... }
}

定义了项目自定义的环境变量(如 REACT_APP_Version_Code),使访问 process.env.REACT_APP_Version_Code 时有类型提示和检查。

  1. 声明静态资源模块类型
dart 复制代码
declare module '*.png' { ... }
declare module '*.svg' { ... }

告诉 TypeScript:import logo from './logo.png' 这类导入是合法的,并且知道导出的是 string 类型。

  1. 声明样式文件模块类型
dart 复制代码
declare module '*.less' {}           // 普通 less,副作用导入
declare module '*.css' {}            // 普通 css,副作用导入
declare module '*.module.less' { ... } // CSS Modules,有具名导出
declare module '*.module.css' { ... }  // CSS Modules,有具名导出

区别:*.module.less 有 export default classes 是因为 CSS Modules 会导出一个类名映射对象;而普通 *.less 只是副作用导入(注入样式),不需要导出值,所以声明为空 {}。

  1. 扩展 Window 全局对象
dart 复制代码
interface Window {
  hubConnection: HubConnection;
}

让 window.hubConnection 访问时不报 TS 错误,对应 App.tsx 里直接挂载 SignalR 连接对象到 window 上的做法。

相关推荐
潍坊老登1 天前
Flutter踩坑中
前端
大尚来也1 天前
驾驭并发:.NET多线程编程的挑战与破局之道
java·前端·算法
快乐小土豆~~1 天前
echarts柱状图的X轴label过长被重叠覆盖
前端·javascript·vue.js·echarts
hhcccchh1 天前
1.1 HTML 语义化标签(header、nav、main、section、footer 等)
java·前端·html
小李子呢02111 天前
前端八股2---Proxy 代理
前端·javascript·vue.js
bjzhang751 天前
使用 HTML + JavaScript 实现组织架构图
前端·javascript·html·组织架构图
军军君011 天前
Three.js基础功能学习十六:智能黑板实现实例三
前端·javascript·css·vue.js·3d·前端框架·threejs
海上彼尚1 天前
SVG矢量图形快速入门
前端·html5
嗷o嗷o1 天前
Android App Functions 深入理解
前端
UXbot1 天前
AI原型设计工具评测:从创意到交互式Demo,5款产品全面解析
前端·ui·设计模式·ai·ai编程·原型模式