之前写过和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。