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

绝地灬酷狼 2023-10-15 13:31 4阅读 0赞

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

### 文章目录 ###

*  使用 TypeScript 创建工具函数：管理项目版本与环境变量
 *  一、前言
 *  二、代码示例
 *   *  1、导入项目的 \`package.json\`
     *  2、获取版本号
     *  3、获取环境变量的值
     *  4、获取特定的环境变量
 *  三、完整代码
 *   *  1、工具函数
     *  2、环境代码示例

# 一、前言 #

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

# 二、代码示例 #

## 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