TypeScript-简介安装

简介

TypeScript 是一种由微软开发的开源静态类型检查的编程语言，它构建在 JavaScript 之上，并且完全符合 ECMAScript 6 标准。TypeScript 添加了可选的类型注解和接口定义，使得开发者可以在编写代码时就发现类型错误，从而提高代码质量和可维护性。

也就是说，TypeScript 没有单独的运行环境，只是提供编译器把 TypeScript 编译为 JavaScript 。编译时，会将类型声明和类型相关的代码全部删除，只留下能运行的 JavaScript 代码，并且不会改变 JavaScript 的运行结果。

动态类型和静态类型

• JavaScript 的类型系统非常弱，而且没有使用限制，运算符可以接受各种类型的值。在语法上，JavaScript 属于动态类型语言。

• TypeScript 引入了一个更强大、更严格的类型系统，属于静态类型语言。

TypeScript 优缺点

优点

1. 类型安全：
   • TypeScript 提供了静态类型检查功能，这有助于在编码阶段捕获错误，而不是在运行时才发现问题。
   • 支持多种数据类型，如字符串、数字、布尔值、数组、元组等，并支持类、接口、枚举等高级类型。
2. 面向对象：
   • TypeScript 支持面向对象编程（OOP）特性，包括类、接口、继承、泛型等。
3. 工具支持：
   • 与 Visual Studio Code 和其他现代 IDE 集成良好，提供了强大的代码提示、重构、跳转到定义等功能。
   • 有丰富的第三方类型定义库，如 DefinitelyTyped，可以为流行的库和框架提供类型定义。
4. 兼容性：
   • TypeScript 编译后的代码是纯 JavaScript，可以在任何支持 JavaScript 的环境中运行。
   • 向后兼容 JavaScript，可以逐步迁移到 TypeScript 而不必重写现有代码。
5. 模块化：
   • 支持 ES6 模块语法，使得代码组织更加模块化，易于管理大型项目。
6. 社区和生态系统：
   • 拥有一个活跃的社区，不断更新和完善。
   • 与 Angular 等主流前端框架紧密集成。

缺点

学习成本；额外编译步骤；类型声明文件；增加编程工作量；灵活性受限；兼容性问题。

基础配置

编译运行

1. 安装Node.js

   Node.js官网

2. 安装typeScript

npm install typescript -g

3. 编写ts代码，新建一个demo.ts文件

const a:string = 'iyuwb'
console.log(a)

4. 编译ts文件

tsc demo.ts

5. 运行js文件。上一步编译完成之后，会在当前文件夹下生成一个demo.js文件，运行即可。

node demo.js  

输出：iyuwb

直接运行

还有另一种方法，不用安装typeScript ，直接运行ts文件。

1. 全局安装ts-node

npm install -g ts-node

2. 运行ts文件

ts-node demo.ts

进阶配置

使用上面基础配置方法，我们每次改变 ts 文件，都需要重新运行命令，很不友好，下面介绍一个 ts 文件改变之后实时更新的方式。需要先装好 Node.js 和 Typescript 。

1. 创建项目

mkdir TypeScriptCode
cd TypeScriptCode

2. 初始化项目，自动生成tsconfig.json配置文件

tsc --init

3. 配置tsconfig.json

{
  "compilerOptions": { 
    "target": "es6",        // 设置目标 JavaScript 版本为 ES6。
    "module": "commonjs",   // 设置模块系统为 CommonJS。
    "outDir": "./dist",     // 指定编译后的 JavaScript 文件存放位置。
    "strict": true,         // 开启严格的类型检查。
    "esModuleInterop": true //  使导入其他模块更加方便。
  },
  "include": ["./src/**/*"] // 定义要包含的文件

}

4. 运行项目

使用tsc --watch 持续监听，监听文件改变，实时更新，会在dist文件夹生成相关js文件，实时更新。

tsc --watch // 持续监听，监听文件改变，实时更新

5. 下载nodemon 安装nodemon ，用于监听文件改变，实时更新。

npm install -g nodemon

6. 运行生成的 js 文件

使用nodemon 运行生成的 js 文件，当文件改变，会自动重新运行生成的 js 文件。不再需要我们手动运行生成的js文件。

nodemon  dist/index.js --watch

其他方式

也可以通过命令持续监听ts输出到固定的文件。

tsc --watch // 持续监听，监听文件改变，实时更新

然后在开发的项目中引入生成的 js。开启所需服务即可。 比如 VS code中的 Live Server 插件。