本地开发环境
我的环境是 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 编译器。