使用 TypeScript 创建工具函数：管理项目版本与环境变量

使用 TypeScript 创建工具函数：管理项目版本与环境变量

一、前言

在我们的日常开发中，获取项目的版本信息和环境变量是很常见的需求。尤其是在前后端分离的项目中，前端可能需要知道当前的环境（开发环境、测试环境还是生产环境），以便决定如何处理各种情况。

二、代码示例

1、导入项目的 package.json

首先，我们通过 import 语句将项目的 package.json 文件导入到我们的工具函数模块中。

// 导入项目的 package.json 文件，用于获取项目版本等信息
// 需要根据实际情况调整文件路径
import pkg from '../../package.json'

2、获取版本号

我们创建一个名为 getPkgVersion 的函数，返回项目的版本号。

/**
 * @description: 获取版本号
 * @returns: 版本号
 */
export function getPkgVersion(): string {
  return pkg.version
}

3、获取环境变量的值

接下来，我们创建一个通用的 getEnvValue 函数，用于获取环境变量。

/**
 * @description: 获取环境变量的值
 * @param key 环境变量的键
 * @returns: 返回环境变量的值
 */
export function getEnvValue<T = any>(key: string): T {
  // 使用 import.meta.env 获取环境变量
  return (import.meta.env as any)[key] as T
}

4、获取特定的环境变量

有时，我们可能需要获取特定的环境变量，比如 VITE_BASE_URL 和 VITE_UPLOAD_URL。

/**
 * @description: 获取环境变量 VITE_BASE_URL 的值
 * @returns: 返回 VITE_BASE_URL 的值或空字符串
 */
export function getBaseUrl(): string {
  // 返回环境变量 'VITE_BASE_URL' 的值
  return getEnvValue<string>('VITE_BASE_URL')
}

/**
 * @description: 获取环境变量 VITE_UPLOAD_URL 的值
 * @returns: 返回 VITE_UPLOAD_URL 的值或 '/upload'
 */
export function getUploadUrl(): string {
  // 否则，返回环境变量 'VITE_UPLOAD_URL' 的值
  return getEnvValue<string>('VITE_UPLOAD_URL')
}

三、完整代码

1、工具函数

// 导入项目的 package.json 文件，用于获取项目版本等信息
// 需要根据实际情况调整文件路径
import pkg from '../../package.json'

/**
 * @description: 获取版本号
 * @returns: 版本号
 */
export function getPkgVersion(): string {
  return pkg.version
}

/**
 * @description: 获取环境变量的值
 * @param key 环境变量的键
 * @returns: 返回环境变量的值
 */
export function getEnvValue<T = any>(key: string): T {
  // 使用 import.meta.env 获取环境变量
  return (import.meta.env as any)[key] as T
}

/**
 * @description: 获取环境变量 VITE_BASE_URL 的值
 * @returns: 返回 VITE_BASE_URL 的值或空字符串
 */
export function getBaseUrl(): string {
  // 返回环境变量 'VITE_BASE_URL' 的值
  return getEnvValue<string>('VITE_BASE_URL')
}

/**
 * @description: 获取环境变量 VITE_UPLOAD_URL 的值
 * @returns: 返回 VITE_UPLOAD_URL 的值或 '/upload'
 */
export function getUploadUrl(): string {
  // 否则，返回环境变量 'VITE_UPLOAD_URL' 的值
  return getEnvValue<string>('VITE_UPLOAD_URL')
}

2、环境代码示例

# BASE_URL
VITE_BASE_URL = https://localhost:8080

# 上传域名
VITE_UPLOAD_URL = /upload