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

4

背景

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


如果觉得我的文章对你有用,请随意赞赏

你可能感兴趣的

载入中...