Web 开发的 Dynamic Duo

TypeScript 正在成为现代组织最流行的编程语言之一。

TypeScript 是经过编译的、严格类型化的 JavaScript 上标(建立在 JavaScript 语言之上)。 这种由 Microsoft 开发和维护的静态类型语言支持面向对象的概念,例如它的子集 JavaScript。

这种开源编程语言有很多用例,例如创建 Web、大型和移动应用程序。 TypeScript 可用于前端和后端开发。 它还具有各种框架和库,可简化开发并扩展其用例。

为什么在 Node.js 中使用 TypeScript? 本文将讨论为什么 TypeScript 被认为比 JavaScript “更好”,如何使用 Node.js 安装它,如何使用 TypeScript 和 Node.js 配置和创建一个小程序。

带有 Node.js 的 TypeScript:好处

  • 可选的静态类型:JavaScript 是动态类型的,这意味着变量的数据类型是在运行时而不是在编译时确定的。 另一方面,TypeScript 提供了可选的静态类型,这意味着一旦你声明了一个变量,它就不会改变它的类型,只会采用特定的值。
  • 可预测性:在处理 TypeScript 时,可以保证您定义的所有内容都将保持不变。 例如,如果您将某个变量声明为布尔值,则它永远不会在此过程中更改为字符串。 作为开发人员,您可以放心,您的功能将保持不变。
  • 易于及早发现错误:TypeScript 及早发现大多数类型错误,因此它们转移到生产环境的可能性很低。 这减少了工程师在后期阶段测试代码的时间。
  • 大多数 IDE 都支持:TypeScript 适用于大多数集成开发环境 (IDE)。 这些 IDE 中的大多数都提供代码完成和语法突出显示。 本文将使用微软的另一款产品 Visual Studio Code。
  • 易于重构代码:您可以在不改变其行为的情况下更新或重构您的 TypeScript 应用程序。 导航工具的存在和理解您的代码的 IDE 使得重构代码库变得容易而毫不费力。
  • 利用现有的包:您不必从头开始创建所有内容; 您可以将现有的 NPM 包与 TypeScript 一起使用。 这种语言还有一个强大的社区,可以维护和创建流行包的类型定义。

如何在 Node.js 中使用 TypeScript

尽管 TypeScript 具有这些优势,但现代浏览器无法以纯格式读取其代码。 因此,必须先将 TypeScript 代码转译为 JavaScript 代码才能在浏览器上运行。 生成的代码将具有与原始 TypeScript 代码相同的功能以及 JavaScript 中不具备的额外功能。

  为什么远程团队需要密码管理器 [+4 Tools]

先决条件

  • Node.js:Node 是一个跨平台的运行时环境,允许在浏览器环境之外运行 JavaScript 代码。 您可以使用此命令检查节点是否安装在您的机器上;

节点-v

否则,您可以从官方网站下载 Node.js。 安装完成后再次运行上述命令,检查是否配置好。

  • 节点包管理器:您可以使用 NPM 或 Yarn。 前者在安装 Node.js 时默认安装。 在本文中,我们将使用 NPM 作为包管理器。 使用此命令检查其当前版本;

npm -v

使用 Node.js 安装 TypeScript

第 1 步:设置项目文件夹

我们将从为 TypeScript 项目创建一个项目文件夹开始。 您可以根据自己的喜好为该文件夹命名。 您可以使用这些命令开始;

mkdir 打字稿节点

cd 打字稿节点

第二步:初始化项目

使用 npm 使用此命令初始化您的项目;

npm 初始化 -y

上面的命令将创建一个 package.json 文件。 命令中的 -y 标志告诉 npm 包含默认值。 生成的文件将具有类似的输出。

{

  "name": "typescript-node",

  "version": "1.0.0",

  "description": "",

  "main": "index.js",

  "scripts": {

    "test": "echo "Error: no test specified" && exit 1"

  },

  "keywords": [],

  "author": "",

  "license": "ISC"

}

使用 Node.js 配置 TypeScript

第 1 步:安装 TypeScript 编译器

您现在可以将 TypeScript 编译器安装到您的项目中。 运行这个命令;

npm install –save-dev 打字稿

命令行上的输出将与此类似;

added 1 package, and audited 2 packages in 26s

found 0 vulnerabilities

注意:上述方法会在您正在处理的项目文件夹中本地安装 TypeScript。 您可以在您的系统上全局安装 TypeScript,这样您就不必在每次处理项目时都安装它。 使用此命令全局安装 TypeScript;

npm install -g typescript

您可以使用此命令检查是否已安装 TypeScript;

tsc -v

第 2 步:为 TypeScript 添加环境 Node.js 类型

  如何列出 Mac 上的所有应用程序

TypeScript 有不同的类型,例如 Implicit、Explicit 和 Ambient。 环境类型总是被添加到全局执行范围。 使用此命令添加环境类型;

npm install @types/node –save-dev

第 3 步:创建 tsconfig.json 文件

这是指定所有 TypeScript 编译选项的配置文件。 运行这个定义了几个编译选项的命令;

npx tsc --init --rootDir src --outDir build 

--esModuleInterop --resolveJsonModule --lib es6 

--module commonjs --allowJs true --noImplicitAny true

这将在终端上输出;

将生成包含一些默认值和注释的 tsconfig.json 文件。

tsconfig.json 文件

这是我们配置的:

  • rootDir 是 TypeScript 查找代码的地方。 我们已将其定向到 /src 文件夹,我们将在其中编写代码。
  • outDir 文件夹定义了编译代码的存放位置。 此类代码被配置为存储在 build/ 文件夹中。

在 Node.js 中使用 TypeScript

第一步:创建src文件夹和index.ts文件

现在我们有了基本配置。 我们现在可以创建一个简单的 TypeScript 应用程序并编译它。 TypeScript 文件的文件扩展名为 .ts。 在我们在前面的步骤中创建的文件夹中运行这些命令;

mkdir 源文件

触摸 src/index.ts

第 2 步:将代码添加到 TypeScript 文件 (index.ts)

您可以从一些简单的事情开始;

console.log('Hello world!')

第 3 步:将 TypeScript 代码编译为 JavaScript 代码

运行这个命令;

npx tsc

您可以检查构建文件夹 (build/index.js),您将看到使用此输出生成了一个 index.js;

TypeScript 已被编译成 JavaScript 代码。

第 4 步:运行编译后的 JavaScript 代码

请记住,TypeScript 代码无法在浏览器上运行。 因此,我们将在构建文件夹中运行 index.js 中的代码。 运行这个命令;

node build/index.js

这将是输出;

第 5 步:配置 TypeScript 以自动编译为 JavaScript 代码

  8 种最常见的加密货币骗局以及如何避免它们

每次更改 TypeScript 文件时手动编译 TypeScript 代码会浪费时间。 您可以安装 ts-node(直接运行 TypeScript 代码,无需等待编译)和 nodemon(检查您的代码是否有更改并自动重启服务器)。

运行这个命令;

npm install --save-dev ts-node nodemon

然后您可以转到 package.json 文件并添加此脚本;

"scripts": {

   "start": "ts-node ./src/index.ts"

}

我们可以使用一个新的代码块来进行演示;

function sum (num1:number, num2:number, num3:number){

    return num1 + num2 +num3;

}

console.log(sum(10,15,30))

删除 index.js 文件 (/build/index.js) 并运行 npm start。

您的输出将与此类似;

3个数字的总和

使用 eslint 配置 TypeScript Linting

第一步:安装eslint

如果您想保持代码一致性并在运行前捕获错误,那么 Linting 会很有用。 使用此命令安装 eslint;

npm install --save-dev eslint

第二步:初始化eslint

您可以使用此命令初始化 eslint;

npx eslint --init

初始化过程将带您完成几个步骤。 使用以下屏幕截图指导您完成;

一旦该过程结束,您将看到一个名为 .eslintrc.js 的文件,其内容与此类似;

module.exports = {

  env: {

    browser: true,

    es2021: true

  },

  extends: 'standard-with-typescript',

  overrides: [

  ],

  parserOptions: {

    ecmaVersion: 'latest',

    sourceType: 'module'

  },

  rules: {

  }

}

第 3 步:运行 eslint

运行此命令检查并检查所有扩展名为 .ts 的文件;

npx eslint . --ext .ts

第 4 步:更新 package.json

在此文件上添加一个 lint 脚本以进行自动 linting。

"scripts": {

    "lint": "eslint . --ext .ts",

  },

TypeScript 与 Node.js:最佳实践

  • 让 TypeScript 保持最新:TypeScript 开发人员总是在发布新版本。 确保您在计算机/项目文件夹中安装了最新版本,并从新功能和错误修复中受益。
  • 启用严格模式:当您在 tsconfig.json 文件上启用严格模式时,您可以在编译时捕获常见的编程错误。 这将减少您的调试时间,从而提高工作效率。
  • 启用严格的空值检查:您可以通过在 tsconfig.json 文件上启用严格的空值检查来在编译时捕获所有空值和未定义的错误。
  • 使用支持 TypeScript 的代码编辑器:存在大量代码编辑器。 一个好的做法是选择通过插件支持 TypeScript 的代码编辑器,例如 VS Code、Sublime Text 或 Atom。
  • 使用类型和接口:使用类型和接口,您可以定义可在整个项目中重用的自定义类型。 这种方法将使您的代码更加模块化并且易于维护。

包起来

您现在已经有了在 Node.js 上使用 TypeScript 创建的应用程序的基本结构。 您现在可以使用常规的 Node.js 包,但仍然可以使用 TypeScript 编写代码并享受后者带来的所有额外功能。

如果您刚刚开始使用 TypeScript,请确保您了解 TypeScript 和 JavaScript 之间的区别。