TypeScript中Module1.Class报找不到命名空间错误，括号为何能修复？

场景复现 #

遗留JS模块代码（module1.js） #

// module1.js
class Class {
    constructor() { console.log('hello') }
}
const exported = {
    Class: Class,
}
module.exports = exported

TypeScript使用代码（module2.ts） #

// module2.ts
import Module1 from './module1'

class Subclass extends Module1.Class { // 此处VS Code报错：Cannot find namespace 'Module1'. ts(2503)
    // ...
}

现象说明 #

• VS Code的TS语言服务会提示Cannot find namespace 'Module1'. ts(2503)错误
• tsc编译无错误，代码可正常运行
• 修改为class Subclass extends (Module1).Class {后，VS Code的错误消失

相关tsconfig配置 #

{
    "target": "es2019",
    "module": "commonjs",
    "allowJs": true,
    "checkJs": false,
    "esModuleInterop": true
}

注：使用import Module1 = require('./module1')导入时问题依旧，与esModuleInterop无关。

错误原因 #

TypeScript的语法解析器在处理extends后的Identifier.Identifier格式代码时，会优先将第一个标识符识别为命名空间（namespace），而非值空间的变量。但这里的Module1是导入的CommonJS模块对象，属于值空间的变量，并非命名空间，因此VS Code的实时语法检查会触发TS2503错误。

而tsc编译阶段会进行完整的语义分析，能够正确识别Module1是导入的值，所以不会报错。

括号的作用 #

添加括号(Module1).Class后，强制TypeScript将Module1作为表达式解析。表达式的解析优先级高于命名空间的匹配规则，TS会先确认括号内的Module1是导入的变量，再访问其Class属性，从而避免了命名空间的误判，错误也就消失了。

内容的提问来源于stack exchange，提问作者zapl