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坑中，痛並快樂着！