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 模块解析
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值