手动编写.d.ts文件后，如何生成声明映射？能否手动创建？

是的，即使是手动编写的.d.ts文件，也可以生成对应的声明映射（.d.ts.map），下面提供两种可行方案：

方案1：借助TypeScript编译器自动生成（推荐） #

不需要放弃tsc的能力，哪怕已经手动写好了.d.ts，依然可以让tsc帮你生成映射文件，步骤如下：

1. 保证你的JavaScript源文件（比如utils.js）和手动编写的utils.d.ts文件名对应，放在同一目录或配置好路径关联。
2. 在tsconfig.json中配置以下编译选项：

   {
     "compilerOptions": {
       "allowJs": true,
       "declaration": false,  // 关闭自动生成.d.ts，用你手动写的
       "declarationMap": true,
       "emitDeclarationOnly": true  // 只生成声明映射，不编译JS文件
     },
     "include": ["src/**/*.js", "src/**/*.d.ts"]
   }
   

3. 运行tsc命令，tsc会基于你手动编写的.d.ts和对应的JS源文件，自动生成匹配的.d.ts.map文件。

这种方式无需手动编写复杂的映射编码，能保证映射的准确性，是最省心的方案。

方案2：手动创建.d.ts.map文件 #

声明映射本质是遵循Source Map规范的JSON文件，你可以完全手动编写，核心是关联.d.ts的代码位置到原JS文件的对应位置。

举个简单示例：
假设你有calc.js：

export function multiply(x, y) {
  return x * y;
}

和手动编写的calc.d.ts：

export declare function multiply(x: number, y: number): number;

对应的calc.d.ts.map可以写成（简化版）：

{
  "version": 3,
  "file": "calc.d.ts",
  "sourceRoot": "",
  "sources": ["calc.js"],
  "names": [],
  "mappings": "AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,CAAC;AAEtB,SAAS,KAAK,CAAC,MAAM,EAAE,CAAC"
}

• version：固定为3，是Source Map的标准版本号
• file：当前映射对应的.d.ts文件名
• sources：关联的原始JavaScript文件路径
• mappings：用VLQ编码记录位置映射关系，这部分手动编写极易出错，建议用source-map这类npm工具辅助生成。

除非有特殊场景需求，否则不推荐完全手动编写映射文件。

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