使用 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