在vscode运行ts脚本 (mac)

在vscode运行ts脚本 (mac)

1. 安装 node.js 和 TypeScript

原理

TypeScript 编译器(tsc)是通过 Node.js 的 npm 包管理器分发的,因此安装 Node.js 是为了能够使用 npm 来安装 TypeScript。以下是一些原因解释为什么要安装 Node.js:

  1. npm 包管理器: Node.js 自带了一个强大的包管理器,称为 npm(Node Package Manager)。npm 提供了一种方便的方式来安装、管理和共享 JavaScript 和 TypeScript 代码包。TypeScript 本身以及其他与 TypeScript 相关的工具通常通过 npm 进行分发和安装。
  2. TypeScript 编译器(tsc): TypeScript 代码需要被编译成 JavaScript 以在浏览器或 Node.js 等环境中运行。TypeScript 编译器(tsc)是一个命令行工具,它是通过 npm 进行安装的。Node.js 的安装将使您能够全局安装 TypeScript 编译器。
  3. 依赖解决: 当您在项目中使用 npm 安装 TypeScript 和其他依赖时,npm 负责解析和安装所有依赖项,以确保项目中的所有组件和工具都能正确协同工作。
  4. 运行 JavaScript 和 TypeScript 代码: 如果您想要运行 JavaScript 或 TypeScript 代码,您需要一个 JavaScript 运行时环境。Node.js 提供了一个强大的 JavaScript 运行时环境,可以用于在命令行中运行 JavaScript 和 TypeScript 代码。
  5. 总体而言,安装 Node.js 为 JavaScript 和 TypeScript 开发提供了一种方便的工具链,并使得管理和使用相关工具、库和框架变得更加容易。

方法

Node.js

nvm(Node Version Manager)是一个用于管理多个Node.js版本的工具。使用nvm可以轻松地在不同项目中切换Node.js版本。以下是使用nvm在Mac上安装Node.js的步骤:

  1. 安装 nvm: 打开终端(Terminal)并运行以下命令来安装nvm

    bashCopy code
    curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash
    

    安装完成后,按照终端的提示,可能需要关闭当前终端窗口并重新打开,或者运行 source ~/.bashrcsource ~/.zshrc,以使nvm生效。

  2. 安装 Node.js 使用 nvm: 然后,使用nvm安装所需的Node.js版本。例如,安装最新的LTS版本可以执行:

    bashCopy code
    nvm install --lts
    

    这将安装最新的长期支持版本。

  3. 选择 Node.js 版本: 如果你安装了多个Node.js版本,可以使用以下命令选择需要使用的版本:

    bashCopy code
    nvm use <version>
    

    <version> 是你想要使用的Node.js版本号。

  4. 验证安装: 使用以下命令验证Node.js和npm的版本:

    bashCopy code
    node -v
    npm -v
    

通过这些步骤,你就可以使用nvm在Mac上安装和管理Node.js版本。


Typescript

JavaScript 引擎不能直接编译 TypeScript 脚本,因为 TypeScript 包含了一些 JavaScript 不支持的特定语法和类型系统。TypeScript 是 JavaScript 的超集,它引入了静态类型、接口、泛型等功能,而这些在标准的 JavaScript 中是不存在的。

要在浏览器或 Node.js 运行 TypeScript 代码,您需要将 TypeScript 代码转换为相应版本的 JavaScript 代码。这个转换的过程就是编译,而 TypeScript 编译器(tsc)负责执行这个任务。

  1. 确保已安装 Node.js 和 npm: TypeScript需要在Node.js环境中运行,所以首先确保你已经安装了Node.js。你可以按照前面提到的方法安装Node.js。

  2. 安装 TypeScript(全局安装): 打开终端并运行以下命令来全局安装 TypeScript:

    bashCopy code
    npm install -g typescript
    

    这将在你的系统上安装全局的 TypeScript 包。

  3. 验证 TypeScript 安装: 在终端中运行以下命令,检查 TypeScript 版本:

    bashCopy code
    tsc -v
    

在这里插入图片描述

看起来你遇到了一个关于使用 nullish 合并运算符(??)的 SyntaxError。这个运算符是在 ECMAScript 2020 中引入的,可能不被你使用的 Node.js 版本支持。

根据错误消息,你正在使用 Node.js 版本 10.24.1。要使用 nullish 合并运算符,你需要升级到支持 ECMAScript 2020 特性的 Node.js 版本。你可以考虑升级到一个更近期的 Node.js 版本(12 版本或更高)。

你可以使用类似 NVM(Node Version Manager)这样的版本管理器来更新 Node.js。以下是一个安装 Node.js 版本 14 的示例命令:

bashCopy code
nvm install 14

在安装更高版本后,你可以将其设置为默认版本:

bashCopy code
nvm use 14

然后,尝试再次运行 TypeScript 编译器(tsc)命令。

记得根据你的项目需求或特定需求调整版本号。

  1. 初始化 TypeScript 项目(如果需要): 如果你已经有一个现有的项目,你可以在项目的根目录运行以下命令,初始化 TypeScript 配置文件 tsconfig.json

    bashCopy code
    tsc --init
    

    这将创建一个基本的 tsconfig.json 文件,你可以根据项目的需要进行修改。

  2. 使用 TypeScript: 在项目中的 TypeScript 文件使用 .ts 扩展名。你可以使用任何文本编辑器编写 TypeScript 代码,并通过以下命令将 TypeScript 代码编译成 JavaScript:

    bashCopy code
    tsc yourfile.ts
    

    如果有 tsconfig.json 文件,你只需运行 tsc 命令,它将根据配置文件编译整个项目。

现在,你已经成功安装了 TypeScript 并可以在项目中使用它。如果你使用的是编辑器如 Visual Studio Code,通常会提供对 TypeScript 的本地支持,使得开发更加方便。

在这里插入图片描述

2.配置 TypeScript 编译选项

如果您的项目中没有 tsconfig.json 文件,您可以使用以下命令生成:

bashCopy code
tsc --init

这会在项目根目录下创建一个 tsconfig.json 文件,其中包含 TypeScript 编译器的配置选项。您可以根据需要调整这些选项。

原理

tsconfig.json 是 TypeScript 的配置文件,用于指定 TypeScript 项目的编译选项和其他设置。当你在项目中运行 TypeScript 编译器 (tsc) 时,它会查找并使用 tsconfig.json 文件中的配置。

以下是一个简单的 tsconfig.json 示例:

jsonCopy code
{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true
  },
  "include": [
    "src/**/*.ts"
  ],
  "exclude": [
    "node_modules"
  ]
}

这个例子包含了一些基本的配置选项:

  • compilerOptions
    包含 TypeScript 编译器的选项。
    • target: 指定编译后的 JavaScript 代码要符合的 ECMAScript 版本。在这个例子中,目标是 ES5。
    • module: 指定生成模块的类型。在这个例子中,使用 CommonJS。
    • strict: 启用所有严格的类型检查选项。
    • esModuleInterop: 启用对 CommonJS 模块的默认导出的支持。
  • include: 包含要编译的文件或文件夹的 glob 模式。在这个例子中,编译 src 目录下的所有 .ts 文件。

  • exclude: 排除不需要编译的文件或文件夹的 glob 模式。在这个例子中,排除了 node_modules

你可以根据你的项目需求修改和扩展这些配置。完整的配置选项列表可以在 TypeScript 官方文档中找到:Compiler Options。

在大多数情况下,你只需要创建一个基本的 tsconfig.json 文件,并在需要的时候根据项目的具体要求进行调整。

3.创建ts文件,运行

创建

在这里插入图片描述

运行
ts-node test2.ts

可能出现问题:

  • 找不到typescript模块

    Cannot find module typescript
    在这里插入图片描述
    这个错误表明 ts-node 无法找到 TypeScript 模块。在这种情况下,您可以尝试以下步骤来解决问题:

  1. 重新安装 TypeScript 和 ts-node: 在终端中运行以下命令,先卸载再重新安装 TypeScript 和 ts-node:

    bashCopy code
    npm uninstall -g typescript ts-node
    npm install -g typescript ts-node
    
  • exports is not defined in ES module scope

在这里插入图片描述

解决办法:

尝试删除"type": "module"package.json

package.json 文件中 type 属性值为缺省值 或 等于 commonjs ,那么采用 CommonJS 标准解析执行 .js 文件;如果 type 属性等于 module,那么采用 ECMAScript 标准解析执行 .js 文件。

扩充

一、 CommonJS 与 ECMAScript

Node.js中CommonJS和ECMAScript有什么区别?

二、package-lock.json

package-lock.json 是 npm 5.x 之后引入的新特性,用于锁定安装时的依赖版本。它记录了项目中每个依赖包的确切版本号以及该依赖包的依赖关系树。

当您执行 npm install 命令时,npm 会根据 package.json 中的依赖信息安装相应的包,并生成 package-lock.json 文件。这个文件确保了在不同的机器上或者不同的安装环境下,安装的依赖包版本都是一致的,从而避免了因为版本不一致而导致的问题。

package-lock.json 的主要作用包括:

  1. 确保版本一致性: 记录了每个依赖包的确切版本号,确保在不同的环境中安装的依赖版本一致。
  2. 提高安装速度: 通过锁定依赖版本,可以避免每次安装时都重新解析依赖树,从而提高了安装速度。
  3. 安全性和可靠性: 通过记录依赖的完整版本信息,可以减少意外升级到不稳定或不安全的版本的风险。

package-lock.json 通常不需要手动编辑,而是由 npm 在执行 npm install 时自动生成和更新。在大多数情况下,您可以将其纳入版本控制系统,以确保团队中的每个人都使用相同的依赖版本。

总结

想要在vscode上运行ts脚本,首先得安装node.js,主要作用是相当于一个js代码引擎(内置v8引擎),把js代码翻译成电脑能认识的机器码;然后安装ts编译器,相当于将ts代码翻译成js代码的一个工具。然后又因为node.js的版本不同,导致一个问题:是否支持es6的新特性。说到这什么是es6的新特性了,他是js协会创办的一个代码规范,所有实现js引擎的开发商实现js引擎时底层的代码都必须符合对应的规范,例如:某个原生对象应该提供哪些接口等等。不同版本的node.js可能符合的规范不一样,导致你写的某些代码用到了比较新的规范,而老版本的js引擎并不支持这个规范。所以就必须安装对应版本的node.js,而且在对应的tsconfig.json中配置对应使用的es规范的版本。

chatgpt优化:

当在VSCode上运行TypeScript脚本时,需要完成以下步骤:

  1. 安装 Node.js:
    • Node.js 是一个 JavaScript 运行时环境,用于在服务器端运行 JavaScript。您需要安装 Node.js,它提供了一个 JavaScript 运行时以及一系列内置模块,使得您能够构建服务器端应用程序。
  2. 安装 TypeScript:
    • TypeScript 是 JavaScript 的超集,添加了静态类型检查和一些 ECMAScript 新特性的支持。通过 TypeScript 编译器 (tsc),您可以将 TypeScript 代码转译为标准的 JavaScript 代码,以便在支持 JavaScript 的环境中运行。
  3. Node.js 版本和规范支持:
    • 不同版本的 Node.js 对 ES6+ 特性的支持程度有所不同。确保您的 Node.js 版本符合您在项目中使用的 ECMAScript 版本,以避免兼容性问题。
  4. 配置 tsconfig.json
    • 在项目的根目录下创建 tsconfig.json 文件,并配置 "target" 选项,确保 TypeScript 编译器的输出 ECMAScript 版本与您目标的 Node.js 版本兼容。
  • 27
    点赞
  • 17
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值