如何在Chrome/Edge开发者控制台使用TypeScript避免语法错误

临时快速方案：手动剔除TS专属语法 #

直接删掉代码里的类型声明（比如: string、: number）、接口、类型别名等TS特有的内容，剩下的纯JS代码就能直接在控制台执行。
示例：
原TS代码：

function calcSum(a: number, b: number): number {
  return a + b;
}
console.log(calcSum(2, 3));

修改后可直接运行的JS代码：

function calcSum(a, b) {
  return a + b;
}
console.log(calcSum(2, 3));

批量处理方案：用正则自动移除类型标注 #

如果代码片段较长，可先在控制台定义一个简易转译函数，批量清理TS语法后执行：

function runTS(code) {
  // 移除参数/变量的类型标注
  code = code.replace(/:\s*[a-zA-Z_\d\|]+/g, '');
  // 移除函数返回值类型标注
  code = code.replace(/:\s*[a-zA-Z_\d\|]+\s*\{/g, '{');
  // 移除类型断言
  code = code.replace(/as\s*[a-zA-Z_\d\|]+/g, '');
  // 移除interface、type类型定义
  code = code.replace(/(interface|type)\s+\w+\s*\{[^}]+\}/g, '');
  eval(code);
}

使用时把TS代码作为字符串传入即可：

runTS(`
function calcSum(a: number, b: number): number {
  return a + b;
}
console.log(calcSum(2, 3));
`);

注：这个函数仅处理常规TS语法，复杂场景（如泛型）需补充正则规则。

长期调试方案：用DevTools Workspaces关联本地TS文件 #

1. 本地创建TS文件，通过tsconfig.json配置自动编译为JS（设置outDir指定输出目录）
2. 打开Chrome DevTools的「Sources」面板，点击左侧「Filesystem」标签，添加本地代码目录
3. 完成映射后，修改本地TS文件会自动编译为JS，控制台可直接调用编译后的函数，还能在Sources面板调试TS代码

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