当前位置: 首页 > news >正文

【React】react-app-env.d.ts 文件

在使用 create-react-app 生成的 TypeScript 项目模板中,react-app-env.d.ts 文件的作用是为 React 应用中的全局变量和类型进行声明。

  1. 全局类型声明react-app-env.d.ts 文件会引入 react-scripts 提供的全局类型定义,这些类型定义扩展了 TypeScript 编译器对 React 项目的支持,使得项目能够识别和使用 React 的一些特有全局变量。

  2. 声明 JSX 环境:该文件确保 TypeScript 了解当前项目的 JSX 运行环境,并为 .tsx 文件提供正确的类型检查和代码补全。这样,项目中的 .tsx 文件能够顺利地使用 JSX 语法而不出现类型报错。

  3. 声明静态资源类型:默认情况下,TypeScript 对导入的静态资源(例如图片、CSS 文件等)并没有类型支持。react-app-env.d.ts 文件包含静态资源的类型声明,允许项目中直接导入这些资源,例如 import logo from './logo.svg';,使 TypeScript 识别这些资源为特定类型(如 string)。

/// <reference types="react-scripts" />// 手动声明添加额外的类型定义
declare namespace NodeJS {// interface 类型定义合并到源码类型中的 NodeJS.ProcessEnvinterface ProcessEnv {readonly REACT_APP_BASE_URL: string;}
}

上述是我在全局定义了环境变量:

// 1. 根据环境变量区分接口地址
// let BASE_URL: string;
// if (process.env.NODE_ENV === "development") {
//   BASE_URL = "http://codercba.com:9002"
// } else {
//   BASE_URL = "http://codercba.com:9002"
// }// 2. 通过创建 .env 文件来自定义环境变量
const BASE_URL  = process.env.REACT_APP_BASE_URLexport { BASE_URL }
http://www.lryc.cn/news/478085.html

相关文章:

  • 设计模式讲解01-建造者模式(Builder)
  • wflow-web:开源啦 ,高仿钉钉、飞书、企业微信的审批流程设计器,轻松打造属于你的工作流设计器
  • Promise 简单介绍及深入挖掘
  • 103 - Lecture 1
  • Ubuntu 20.04禁用或者移除 cloud-init
  • DevOps开发运维简述
  • C++之list的使用
  • nginx配置代理地址
  • 国际版JAVA同城打车源码同城服务线下结账系统源码适配PAD支持Android+IOS+H5
  • AndroidLab:一个系统化的Android代理框架,包含操作环境和可复现的基准测试,支持大型语言模型和多模态模型。
  • Java--正则表达式入门指南
  • 阿里云服务器 篇十(加更二):自动定时备份CSDN博客内容:更新文件最后修改时间,以在个人博客正确展示最近更新
  • Python编程探索:从基础语法到循环结构实践
  • 今天要重新认识下注解@RequestBody
  • 北斗有源终端|智能5G单北斗终端|单兵|单北斗|手持机
  • 【题解】—— LeetCode一周小结44
  • faiss 用于检索10亿向量(维度768)的方法
  • sql专题 之 常用命令
  • Kubernetes Extended Resource 扩展资源使用简介
  • 基于STM32的天气时钟项目教学
  • 神经网络进行波士顿房价预测
  • C++builder中的人工智能(7)如何在C++中开发特别的AI激活函数?
  • 更改lvgl图片的分辨率(减少像素)达到减小内存占用的目的
  • python的socket库的基本使用总目录
  • golang学习3
  • Python解力扣算法题(六)(详解+注释)
  • 【C++】继承和多态常见的面试问题
  • 入门网络安全工程师要学习哪些内容(详细教程)
  • 【游戏引擎之路】登神长阶(十二)——DirectX11教程:If you‘re going through hell, keep going!
  • Python列表(一图秒了)