TypeScript学习笔记(2)-开发环境准备

本地开发环境

我的环境是 win11

git -v

node -v

npm -v

包管理器(npm)

 Node.js 是用于服务器端应用程序的 JavaScript 库,TypeScript用不到 。但是安装node后会有包管理器npm，这是JavaScript语言的包管理器，后面将用npm 来安装 TypeScript 包。

获取当前的详细版本信息

npm version

安装 TypeScript 编译器

全局安装 TypeScript （任何文件都可使用）

局部安装（只在项目级别使用）

在大的，复杂项目中使用TypeScript建议使用局部安装，即在项目中安装，可以更好的保持项目一致性。

Vscode 已经内置支持TypeScript，但是为了转为JacaScript 需要安装 TypeScript库 该库包含了 TypeScript 编译器，称为Tsc。

全局安装命令

npm install -g typescript

然后再cmd命令窗口执行 即可

tsc -v

编译 TypeScript 文件

打开vscode 创建一个工程目录 msts 在新建一个文件 index.ts

生成 tsconfig.json 文件

在当前工程目录下输入

tsc --init

此文件定义了 TypeScript 项目设置，例如编译器选项和应包括的文件等
比如修改
编译目标
target

编译文件保存到一个统一目录
修改 outDir即可

若要详细了解 tsconfig.json 文件，请参阅 TSConfig 参考。

 将 TypeScript 编译为 JavaScript

添加一个 JavaScript 代码

function addNumbers(x, y) {
  return x + y;
}
console.log(addNumbers(3, 6));

 即使尚未编译代码，Visual Studio Code 已使用其内置的 TypeScript 支持来进行类型检查。addNumbers 函数的两个参数存在类型错误。如图

 我们使用编辑器快速修复 根据使用情况推断参数类型，参数就变成下面这样

 然后使用 tsc命令编译 index.ts 生成index.js 文件

tsc

最后使用node 命令运行index.js 查看结果

node index.js

知识检查

1. TypeScript 和 JavaScript 之间有什么关系？
        TypeScript 是 JavaScript 的一个超集。
2. 为什么需要先将 TypeScript 代码编译（或转译）为 JavaScript 才能在应用程序中使用？
        TypeScript 包含与浏览器不兼容的代码功能。
3. npm install -g typescript 命令有什么作用？
        在计算机上全局安装 TypeScript 编译器。