尝试在VSCode上调试TypeScript程序时出现"SyntaxError: Cannot use import statement outside a module“

这个错误信息 "SyntaxError: Cannot use import statement outside a module" 表示你尝试在非模块环境中使用了ES6的模块导入语法（import）。在TypeScript中，这通常是因为你的文件没有被正确地配置为模块，或者你的环境不支持ES6模块。

基础概念

• 模块：在JavaScript和TypeScript中，模块是一种封装代码的方式，允许你将代码分割成多个文件，并通过import和export语句来共享代码。
• ES6模块：ES6引入了原生的模块系统，使用import和export关键字。

解决方法

要解决这个问题，你可以采取以下几种方法：

方法一：配置tsconfig.json

确保你的项目根目录下有一个tsconfig.json文件，并且它包含了以下配置：

{
  "compilerOptions": {
    "module": "commonjs", // 或者 "esnext" 如果你的环境支持
    "target": "es6",
    "moduleResolution": "node",
    "outDir": "./dist",
    "strict": true,
    "esModuleInterop": true
  },
  "include": ["src/**/*.ts"],
  "exclude": ["node_modules"]
}

方法二：使用正确的文件扩展名

确保你的TypeScript文件使用.ts或.tsx扩展名，而不是.js。

方法三：在HTML文件中使用type="module"

如果你是通过浏览器运行TypeScript代码，确保在HTML文件中正确引用TypeScript编译后的JavaScript文件，并且使用type="module"属性：

<script type="module" src="path/to/your/compiled/script.js"></script>

方法四：检查VSCode设置

确保VSCode的TypeScript版本是最新的，并且你的项目配置正确。

示例代码

假设你有一个简单的TypeScript文件src/index.ts：

// src/index.ts
export function greet(name: string) {
  return `Hello, ${name}!`;
}

然后你在另一个文件中尝试导入它：

// src/main.ts
import { greet } from './index';

console.log(greet('World'));

确保你的tsconfig.json配置正确，然后编译并运行：

tsc
node dist/main.js

参考链接

• TypeScript Handbook
• Module Resolution in TypeScript

通过以上步骤，你应该能够解决"SyntaxError: Cannot use import statement outside a module"的问题。