前端 - 笔记 - 【TypeScript 】 - 【安装运行TS】

一、准备工作

1.1 安装 TS

npm install -g typescript / yarn global add typescript

1.2 检测是否安装成功

• 能看到版本号就表示安装成功；

tsc -v

1.3 更新 TypeScript 的版本

npm update -g typescript**@latest

1.4 ❌ 运行 TS 文件（不推荐）

运行命令： tsc 文件路径 （有些时候tsc不行，tsc.cmd 文件路径）；

会生成对应的js文件， 运行js文件即可；

1.5 ✅ 简化 运行TS 步骤（推荐）

全局安装 ts-node 包：npm i -g ts-node / yarn global add ts-node

使用方式：ts-node 文件路径

解释：ts-node命令在内部偷偷的将TS转换为JS，然后，在运行JS代码，此命令并没有生成一个 JS 文件，只是在内部将TS转换为JS（如果之前有JS文件，修改TS文件并用此命令运行后，JS里的内容还是之前的，并没有同步）；

注意：

• 在使用这种方式运行 ts 文件时，可能会报错:
  • error TS2584: Cannot find name 'console'. Do you need to change your target library? Try changing the 'lib' compiler option to include 'dom'.
• 原因：console不属于 ECMAScript 标准。DOM里面的 console 是浏览器环境下的（是 window 对象里面的），属于浏览器 BOM API，Node 里面的 console 是 NodeJS 里面的，由 NodeJS 自己定义的API，两者虽然由同样的功能，但是并不是同一个东西；
• 解决方法：
  • 安装 npm i -D tslib @types/node;
    • 该命令是安装 TypScript 助手的运行库，包含所有 TypeScript 辅助函数；
  • 安装到哪里根据自己定义，你也可以选择安装到全局（将 -D 改成 -g 即可）；

1.6 TS 和 JS 的区别

1. TypeScript 是 JS 的超集，TS 提供了 JS 的 所有功能，并且额外的增加了：类型系统；
2. 所有的JS代码都是TS代码；
3. JS有类型（number、string、boolean、null、undefined、object、array……），但是 JS不会检查变量的类型是否发生变化。而TS会检查；
4. TypeScript类型系统的主要优势：可以显示标记出代码中的意外行为，从而降低了发生错误的可能性；