TypeScript跨包调用导入类静态方法报错：Log未定义求助

我来帮你搞定这个问题，顺便把TypeScript里调用导入类静态方法的正确方式讲清楚。

问题排查：为什么Log会变成undefined？ #

你遇到的Cannot read property 'test' of undefined本质是导入的Log类没有被正确解析成有效引用，大概率是下面几个原因：

1. 包x的编译与配置有问题 #

如果package x是你本地开发的包，没正确编译或者package.json配置不对，会导致y包导入的是无效内容：

• 首先确认你有没有编译package x的TypeScript代码：运行tsc后，是否生成了对应的JavaScript文件（比如dist/Log.js）和类型声明文件（dist/Log.d.ts）？
• 检查package x的package.json关键配置：

  {
    "name": "x",
    "main": "dist/index.js", // 指向编译后的入口文件
    "types": "dist/index.d.ts", // 指向类型声明入口
    "scripts": {
      "build": "tsc" // 确保有编译脚本
    }
  }
  

• 还要确保package x有导出入口：比如在x/src/index.ts里写export { Log } from './Log';，这样外部包才能通过import {Log} from 'x'找到类。

2. 本地包的链接问题 #

如果是本地开发两个包，没有通过npm/yarn link建立关联，y包会尝试从npm仓库拉取名为x的包（显然不存在），导致导入失败：

• 先在package x的根目录运行：npm link
• 再到package y的根目录运行：npm link x
  这样y包就能正确引用本地的x包了。

3. 导入路径错误 #

如果你没配置包链接，直接用相对路径导入的话，要确保路径指向编译后的文件，比如：

// 假设x包在y包的上级目录
import {Log} from '../x/dist';

TypeScript中调用导入类静态方法的正确姿势 #

其实你写的调用方式Log.test()是完全正确的！只要导入的Log是有效的类引用，静态方法/属性的调用就和在同一个包内一样：

正确流程示例 #

1. package x的完整结构：

   x/
   ├── src/
   │   ├── Log.ts
   │   └── index.ts
   ├── package.json
   └── tsconfig.json
   

   • Log.ts代码：

     export class Log { 
       static test(){console.info('hello from test');} 
     }
     

   • index.ts代码：

     export { Log } from './Log';
     

   • 运行npm run build编译出dist目录。

2. package y中的调用：

   import {Log} from 'x'; 
   class y1{ 
     constructor(){ 
       // 直接通过类名调用静态方法，和你写的一样
       Log.test(); 
       // 如果有静态属性，也是同样方式访问：Log.staticProperty
     } 
   }
   
   // 测试一下
   new y1(); // 应该输出"hello from test"
   

验证步骤 #

1. 先确保package x编译完成，package.json配置正确
2. 建立本地包链接（或调整导入路径）
3. 编译package y的代码，运行后就能正常调用静态方法了

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