TypeScript类型注解运行时报Unexpected token ':'错误如何解决？

你写的带TypeScript类型注解的代码如下：

let foo: number = 23;
console.log( foo );

直接运行后抛出如下错误：

// let foo: number = 23;
          ^
SyntaxError: Unexpected token ':'
    at Object.compileFunction (node:vm:352:18)
    at wrapSafe (node:internal/modules/cjs/loader:1031:15)
    at Module._compile (node:internal/modules/cjs/loader:1065:27)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:79:12)
    at node:internal/main/run_main_module:17:47

TypeScript是JavaScript的超集，其新增的类型注解、接口等语法不属于原生JavaScript语法规范，Node.js、浏览器等JS运行环境只能直接识别运行标准JS代码，无法解析TS专属语法，直接运行TS文件就会抛出语法错误。

• 方案1：手动编译后运行（适合生产环境）
  首先安装TypeScript编译工具：npm install -g typescript
  对TS文件执行编译：tsc <你的文件名>.ts，执行后会在同级目录生成转译完成的标准JS文件
  用Node.js运行生成的JS文件即可：node <你的文件名>.js
• 方案2：用ts-node工具直接运行（适合本地开发调试）
  ts-node工具内置TS转译逻辑，无需手动执行编译步骤即可直接运行TS文件，首先安装：npm install -g ts-node
  直接执行TS文件：ts-node <你的文件名>.ts
• 方案3：前端项目运行
  如果是在浏览器端运行的前端项目，无需手动处理转译，只需给项目使用的构建工具（如Vite、Webpack）配置对应的TS解析插件即可，构建环节会自动将TS代码转译为浏览器可识别的JS代码。

内容的提问来源于stack exchange，提问作者8BitSoda