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

背景

在调整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坑中，痛并快乐着！