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

152 阅读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 编译器。