typescript模块导入与全局变量踩坑日志

2024年4月2日 314次阅读 来源: zhoutk

背景

在调整typescript项目结构，全局变量尽量少用，但还是必不可少的，既要合理的引入，又要能用上vscode的智能提示。上篇日志已经记录了，在vscode中开发，全局变量的定义与声名是分开的，要做好对应。

需求描述

  • 全局自定义工具类，本团队自主开发的小工具，需要能有智能提示
  • 加入常用的第三方工具到全局，也需要能有智能提示
  • 用bluebird替换全局Promise

源代码目录结构

  • src/common/globUtils.ts，这是本团队自主开发小工具
  • src/inits/global.ts，这是全局变量的代码定义文件
  • src/globals.d.ts，这是全局变量声名文件
├── src
│   ├── app.ts
│   ├── common
│   │   └── globUtils.ts
│   ├── config
│   │   └── log4js.ts
│   ├── globals.d.ts
│   ├── index.ts
│   └── inits
│       ├── global.ts
│       └── tasks.ts
├── tsconfig.json
├── tslint.json

自定义工具模板

export default class GlobUtils {
    isDev() {
        return global.NODE_ENV !== 'prod'
    }
}

注意事项：

  • 导出时必须给出类名称， 不然vscode会提示出错。
  • 其实这最好用静态方法，但vscode的智能提示会忽略掉静态方法，放弃。
  • 在全局定义时，因为此处给出了类名，导入的是类，不是实例。

全局变量代码定义

import * as lodash from 'lodash'
import * as Bluebird from 'bluebird'
import GlobUtils from '../common/globUtils'

export default {
    async init() {
        Object.assign(global, {
            ROOT_PATH: process.cwd(),
            NODE_ENV: process.env.NODE_ENV || 'dev',    //dev - 开发; prod - 生产； test - 测试;
            Promise: Bluebird,
            __: lodash,
            globUtils: new GlobUtils(),
        })
    }
}

注意事项：

  • import引入形式必须为 import * as lodash from ‘lodash’，vscode建议的形式会出错
  • 用Object.assign来将新属性加到global上
  • globUtils需要的是实例，注意几种导入形式，及默认导出时，类名给不给出，导入的结果是不同的，这里是类，需要new出实例来。

全局变量声名文件

import { Logger } from 'log4js'
import GlobUtils from './common/globUtils'
import * as lodash from 'lodash'
type LODASH = typeof lodash
declare global {    
    namespace NodeJS {        
        interface Global {
            logger: Logger,
            NODE_ENV: string,
            ROOT_PATH: string,
            globUtils: GlobUtils,
            __: LODASH,
        }
    }
}

注意事项：

  • 第一种导入方式，Logger引入类，直接声明为全局变量，import后已经实例化
  • 第二种导入方式，lodash为命名空间，type LODASH声明为全局变量
  • 第三种导入方式，GlobUtils为默认命名导出，import后为类，还未实例化

用bluebird替换全局的Promise

用@types/bluebird-global替换@types/bluebird，即可完成替换。我们只需要在代码定义中增加它的定义就好了。
注意事项：

  • Promise直接调用，其它全局变量在global下，虽然在实际环境中，两个都存在，智能检测只认一边，这也有利于我们编码时区分全局变量。

代码地址

代码是这个项目的基础，此项目我准备将express+mysql的成功经验移植到koa2中来。

https://github.com/zhoutk/gels

使用方法

git clone https://github.com/zhoutk/gels
cd gels
git checkout 9ea084f
yarn

tsc -w
用vscode打开项目，并按F5运行

小结

终于迈入typescript坑中，痛并快乐着！

    原文作者：zhoutk
    原文地址: https://segmentfault.com/a/1190000016485619
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞