TypeScript模块扩展变成覆盖原模块的解决方案

之前写过和TS模块机制有关的问题，联想到遇到的一个“奇怪”的问题，在扩展VantUI的类型声明时，曾经遇到这样一个问题，如果这么写，就能正确扩展模块：

// src/shims-vant.d.ts
import { VanComponent } from 'vant/types/component'

declare module 'vant' {
  export class Calendar extends VanComponent {}
}

但是如果这样，就变成了重新声明一个只有Calendar的同名模块：

// src/shims-vant.d.ts
declare module 'vant' {
  import { VanComponent } from 'vant/types/component'
  export class Calendar extends VanComponent {}
}

看一看根目录下的tsconfig.json，里面有这样的配置：

{
  "compilerOptions": {
    "moduleResolution": "node",
    "baseUrl": "."
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],  
}

其实这三行就能解释问题了。"moduleResolution": "node"说明TS采用类似于Node的方式来导入模块，"baseUrl": "."说明是以当前目录为根目录（本来就是根目录hhh），include说明还有这些文件需要包括进去。因为这个声明文件的路径是src/shims-vant.d.ts，所以会被包括进去。

为什么会出现这个问题？还是之前提到的，如果最顶上不是import或者export，这个文件就不会被当成一个模块，也就无法进行模块扩展，而是变成了重新声明一个模块。

所以，如果要对一个模块进行扩展，一定要记得在最前面加上import或者export。

推荐文章

1. TypeScript 模块解析