TypeScript01：TypeScript的安装和配置

一、TypeScript

官方网站：https://www.tslang.cn/docs/index.html 

练习场：https://www.typescriptlang.org/zh/play 

 JS 开发中的问题：

• 使用了不存在的变量、函数或成员；
• 把一个不确定的类型当作一个确定的类型处理；
• 在使用 null 或者 undefined 的成员。

 JS 的原罪：

•  js 语言本身的特性，决定了该语言无法适应大型的复杂的项目；
• 弱类型：某个变量，可以随时更换类型。
• 解释型：错误发生的时间是在运行时发生。

前端开发中，大部分的时间都是在排错。 

好处：

1. 强类型语言，对 JS 弱类型的一个良好补充；
2.  TS 利于大型项目团队合作，可以一定程度上提高研发效率，避免低级错误；
3.  TS 的研发成本是比较高的，会多些一些额外的代码。

二、TS的特点 

 TypeScript 是 JS 的超集，是一个可选的、静态的类型系统。

 TS 不参与任何运行时的代码检查。

类型系统：对代码中所有的标识符（变量、函数、参数、返回值）进行类型检查。

可选的：学习曲线非常平滑。

静态的：静态的类型检查发生的时间，在编译的时候，而非运行的。无论是浏览器环境，还是 node 环境，无法直接识别 ts 。 

 TS 的常识：

1. 2012年微软发布；
2. 开源、拥抱ES标准；

三、安装TypeScript 

在 node 环境中搭建 TS 开发环境。

npm i -g typescript // 全局安装

使用 tsc 命令对 .ts 文件进行编译，输出 .js 文件，这个 .js 文件是我们需要运行的文件。

 index.ts ：

let say:string = "hello" 

 运行命令：

tsc index.ts

输出 index.js ：

var say = "hello";

生成 index.js 文件后，在 .ts 文件中会看到这样的报错：

是因为默认情况下， TS 会做出下面几种假设：

1. 假设当前的执行环境是 dom 即浏览器环境；
2. 如果代码中没有使用模块化语句（ import、export ），便认为该代码是全局执行；
3. 编译的目标代码是 ES3 。

有两种方式更改以上假设：

1. 使用 tsc 命令行的时候，加上选项参数；
2. 使用 ts 配置文件，更改编译选项。

四、TS配置文件 

使用了配置文件后，使用 tsc 进行编译时，不能跟上文件名，如果跟上文件名，会忽略配置文件。

第一种方法：新建一个 tsconfig.json 文件，在里面配置；

第二种方法：命令行 tsc --init ，初始化一个 tsconfig.json 文件。

{
  "compilerOptions": { // 编译选项
    "target":"es2016", // 配置编译木匾代码的版本标准，默认es3
    "module": "commonjs", //配置编译目标使用的模块化标准，默认commonjs
    "lib":["es2016"], // 配置编译器运行的环境，在node运行环境，需要安装@type/node开发依赖
    "outDir": "./dist" // 配置编译结果目录
  },
  "include":["./src"] // 配置编译的文件夹
  // "files":["./src/index.ts"] // 配置编译的文件，只编译这个文件和这个文件所依赖的文件
}

 @types/node 安装命令： npm i -D @types/node 

 @types 是一个 ts 官方的类型库，其中包含了很多对 js 代码的类型描述。

例：

 JQuery ： 用 js 写的，没有类型检查。
 安装 @types/jquery ，为 jquery 库添加类型定义。

五、 使用第三方库简化流程

  1.ts-node：将 ts 代码在内存中完成编译，同时完成运行；

npm i -g ts-node // 安装

ts-node src/index.ts // ts-node 运行文件路径

 2.nodemon：用于检测文件的变化；

npm i -g nodemon // 安装

nodemon --exec ts-node src/index.ts // 当文件改变时执行tsnode命令

可以将命令放在 package.json 的 script 脚本中运行。

"-e ts" ：监控扩展名为 ts 的文件。

"--watch src"：监控 src 目录下的文件。

{
  "scripts": {
    "dev":"nodemon --watch src -e ts --exec ts-node src/index.ts"
  },
  "devDependencies": {
    "@types/node": "^20.11.21"
  }
}

 运行命令：

npm run dev