如何在TypeScript中引用JS/TS资源但不合并到输出JS文件？

我懂你这个头疼的问题——查了TS Handbook还搜了半天，结果用三斜线指令引用JS文件的时候，编译输出居然把那个JS库的代码也塞进去了，完全不是你想要的效果对吧？毕竟你肯定希望这个JS文件是单独加载的（比如页面里通过script标签引入），而不是被打包到你的TS编译产物里。

下面给你几个实用的解决办法，都是社区里常用的方案：

1. 为JS文件创建类型声明文件（.d.ts） #

这是最标准的做法，既让TypeScript能识别JS文件的类型，又不会把JS代码编译进输出。

举个例子，如果你的目标JS文件是my-library.js，你可以新建一个my-library.d.ts文件，内容如下：

declare module 'my-library' {
  // 这里根据你的JS文件导出内容定义类型，比如：
  export function calculateTotal(prices: number[]): number;
  export const version: string;
}

之后在my-app.ts里直接用模块导入：

import { calculateTotal } from 'my-library';

calculateTotal([10, 20, 30]);

这样TypeScript会自动识别这个模块的类型，编译的时候只会处理你的TS代码，不会把my-library.js的内容打包进去——前提是你已经通过script标签或者CDN把my-library.js加载到页面里了。

2. 处理全局挂载的JS库 #

如果你的JS文件是直接挂载到全局对象（比如window）上的，那可以在声明文件里扩展全局类型：

declare global {
  interface Window {
    MyGlobalLib: {
      showMessage(msg: string): void;
      isDebug: boolean;
    };
  }
}

// 必须加这行，让TS把这个文件当作模块处理
export {};

之后在TS文件里直接用全局变量就行：

window.MyGlobalLib.showMessage('Hello!');

同样，编译后的JS文件不会包含这个全局库的代码，只要页面里已经加载了对应的JS文件就行。

3. 避免使用/// <reference path="..." /> #

你之前用的三斜线指令/// <reference path="..." />之所以会把JS代码合并进去，是因为它告诉TypeScript把这个文件当作编译输入的一部分，自然会被打包到输出里。

如果一定要用三斜线指令，应该用/// <reference types="..." />来引用类型声明，而不是直接引用JS文件的路径，但更推荐上面的声明文件方案，更规范。

4. 配合打包工具配置外部依赖（可选） #

如果你的项目用了Webpack、Rollup这类打包工具，还可以通过配置externals来明确告诉工具：这个模块是外部的，不要打包进去。

比如Webpack的配置：

module.exports = {
  // ...其他配置项
  externals: {
    // 键是你import的模块名，值是全局变量名
    'my-library': 'MyLibrary'
  }
};

这样打包的时候，工具会把import 'my-library'替换成全局的MyLibrary变量，完全不会把库的代码打包进来。

总结一下核心思路：用类型声明告诉TypeScript“这个JS文件的类型是什么”，但不要让TS把它当作编译输入的一部分，同时确保JS文件在运行时已经被加载到环境中。

内容的提问来源于stack exchange，提问作者Nicolas Dion-Bouchard