TypeScript 介绍与环境搭建TypeScript 是什么？引用官方原话通俗的理解：由微软开发的一个开源项目

TypeScript 是什么？

引用官方原话

TypeScript 是 JavaScript 类型的超集，它可以编译成纯 JavaScript。TypeScript 可以在任何浏览器、任何计算机和任何操作系统上运行，并且是开源的。

通俗的理解：

由微软开发的一个开源项目，对 javascript 的一个扩展
弥补了许多 javascript 的不足（比如由于 javascript 弱类型原因，许多错误只能在运行时知道；）
对类型进行了强化（这个颇具争议，有人认为这破坏了 javascript 的动态性，有人认为加强规范了 javascript，我个人更倾向于后者，毕竟在项目中，太动态的东西会变得难以理解和维护且容易出错）
扩展了许多面向对象的用法
当下很火的一个技术（GitHub84.8k 的 start，11k 的 fork 足见其火热程度）
本质上还是 Javascript

为什么选择 TypeScript

TypeScript 具有许多优点：

多端可用，完美契合前端技术栈（web 端 Vue 项目、微信小程序、uniapp 均可使用）
兼容性高
- 支持 ES 新特性，包括还在提案中的特性
- 比较新的特性编译成 ES5 代码
友好的代码提示
具有文档特性,许多方法看类型定义就知道如何使用
增强了编辑器的代码提示功能
强类型约束，编译前尽可能减少错误和 bug
编辑阶段和编译阶段会报错，但不影响编译结果
更多面向对象编程的特性
易于重构
易于团队合作
社区活跃，大部分项目都有 TypeScript 的声明文件
越来越多的库用 TypeScript 编写（React、Vue3 等），是未来的趋势

配置 Typescript 环境【可选】

脱离第三方的语法，只搭建一个运行TS的环境

安装相关工具库

npm i typescript -g    ts语法的解析库
npm i ts-node@8 -g     让node环境直接编译ts代码
npm i nodemon -g     检测代码变化，自动重启

新建 typescript 项目，并在其中生成环境相关配置文件，目录结构如下

-ts-demo
---src
---nodemon.json
---package.json

通过 npm init 自动生成 package.json，后续在其中添加启动命令手动新建 nodemon.json 文件，作为自动化检测工具的配置

nodemon.json 中的配置

{
  "verbose": false,
  "debug": false,
  "exec": "ts-node  ./src/index.ts", //让ts-node执行ts文件
  "ignore": [
    "mochawesome-report",
    "node_modules",
    "./test",
    "**/*.d.ts",
    "*.test.ts",
    "*.spec.ts",
    "fixtures/*",
    "test/**/*",
    "docs/*"
  ],
  "events": {
    "restart": ""
  },
  "watch": ["./src"], //检测src目录中的代码变化
  "ext": "ts tsx",
  "inspect": true
}

package.json 中的配置

{
  "name": "typescript",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "nodemon --config ./nodemon.json" //启动代码编译及监听的命令
  },
  "author": "",
  "license": "ISC"
}

在 index.ts 中写入如下 ts 测试代码

let isShow: boolean = false;
console.log(isShow);

let a:number = 1
a = 123
console.log(a);

let msg:string = 'Hello'
console.log(msg);

使用 npm run start 运行查看结果

其他 Typescript 开发环境

vue 的 ts 开发模式【课堂采用】

在使用 vue-cli 或者 vite 脚手架创建项目的时候，选择 ts 即可生成 typescript 的开发模板 Vite | 下一代的前端工具链 (vitejs.dev)

npm create vite@latest
填名称、选技术Vue、选语言Typescript
cd 项目名
npm i
npm run dev

react 的 ts 开发模式

npx create-react-app my-app --template typescript

搭建小程序ts环境

代码语法风格检测

语法风格不约束，首行缩进 2 空格、4 空格，比较乱
ESLint ESLint - Pluggable JavaScript linter - ESLint 中文

TypeScript 介绍与环境搭建

TypeScript 是什么？

为什么选择 TypeScript

配置 Typescript 环境 【可选】

其他 Typescript 开发环境

代码语法风格检测

配置 Typescript 环境【可选】