TypeScript环境配置详解

约定不等于承诺〃 2024-04-01 08:49 65阅读 0赞

### 一、TypeScript概述 ###

#### 1.1 TypeScript的概念 ####

`TypeScript`是拥有类型的`JavaScript`超集，它可以编译成普通、干净、完整的`JavaScript`代码。

**上面的官方概念可以理解为：**

*  可以将`TypeScript`理解成加强版的`JavaScript`。
 *  `JavaScript`所拥有的特性，`TypeScript`全部都是支持的，并且它紧随`ECMAScript`的标准，所以`ES6`、`ES7`、`ES8`等新语法标准，它都是 支持的；
 *  并且在语言层面上，不仅仅增加了类型约束，而且包括一些语法的扩展，比如枚举类型（`Enum`）、元组类型（`Tuple`）等；
 *  `TypeScript`在实现新特性的同时，总是保持和ES标准的同步甚至是领先；
 *  `TypeScript`最终会被编译成`JavaScript`代码，所以并不需要担心它的兼容性问题，在编译时也不需要借助于`Babel`这样的工具； 所以，我们可以把`TypeScript`理解成更加强大的`JavaScript`，不仅让`JavaScript`更加安全，而且给它带来了诸多好用的好用特性；

#### 1.2 TypeScript的特点 ####

*  始于`JavaScript`，归于`JavaScript`
    
    > `TypeScript`可以编译出纯净、 简洁的`JavaScript`代码，并且可以运行在任何浏览器上、`Node.js`环境中和任何支持`ECMAScript 3`（或 更高版本）的`JavaScript`引擎中
 *  TypeScript是一个强大的工具，用于构建大型项目

> 类型允许`JavaScript`开发者在开发`JavaScript`应用程序时使用高效的开发工具和常用操作比如静态检查和代码重构；
> 
> 类型是可选的，类型推断让一些类型的注释使你的代码的静态验证有很大的不同。类型让你定义软件组件之间的接口和洞察现有`JavaScript`库的行为；

*  拥有先进的`JavaScript`
    
    > `TypeScript`提供最新的和不断发展的`JavaScript`特性，包括那些来自`2015`年的`ECMAScript`和未来的提案中的特性，比如异步功能和`Decorators`，以帮助建立健壮的组件；

#### 1.3 TypeScript官网 ####

https://www.typescriptlang.org/

### 二、TypeScript的编译环境和运行环境 ###

#### 2.1 编译环境 ####

`TypeScript`最终会被编译成JavaScript来运行，所以我们需要搭建对应的环境。

需要在电脑上安装`TypeScript`，这样就可以通过`TypeScript`的`Compiler`将其编译成`JavaScript`。

**安装命令：**

npm install typescript -g

**查看版本：**

tsc --version

> tsc(typescript complier)：typescript编译器的意思

#### 2.2 运行环境 ####

每次为了查看`TypeScript`代码的运行效果，都通过经过两个步骤的话就太繁琐了：

*  通过`tsc`编译`TypeScript`到`JavaScript`代码；
    
        tsc helloTYpeScript.ts
    
    > 编译后，会生成一个helloTYpeScript,js文件
 *  在浏览器或者`Node`环境下运行`JavaScript`代码；
    
        node helloTYpeScript.js

**为了解决上面的问题，有两种解决方式：**

*  通过`ts-node`
 *  通过`webpack`
 *  通过`vite`

> 学习阶段使用ts-node，而项目中会基于webpack使用Vue脚手架或者基于vite去搭建一个ts项目

##### 2.2.1 使用ts-node运行ts代码 #####

**1）安装ts-node**

npm install ts-node -g

**2）安装ts-node需要依赖 tslib 和 @types/node 两个包**

npm install tslib @types/node -g

**3）通过 ts-node 来运行TypeScript的代码**

ts-node helloTYpeScript.ts

> 在不开发Vue项目单纯联系使用ts的时候，可以使用ts-node来运行ts文件
> 
> 开发项目时，一般会使用webpack或者vite来构建项目自动配置好ts环境

##### 2.2.2 基于webpack使用Vue脚手架构建TypeScript项目 #####

**1) 创建项目**

vue create tsdemo

**2）选择手动选择项目特性**  
![在这里插入图片描述][43e624275dc2494a8c8cc60d0eb736d2.png]

**3）选择TypeScript特性**

![在这里插入图片描述][0f086cf4bed14c85bd2fc65646e74457.png]

> 按空格键选择想要的特性，按回车键进入下一步。

**4）选择Vue版本**  
![在这里插入图片描述][091b6ed6242345b88ae9e46ef85e2e5c.png]

**5）是否使用类样式的组件语法**

\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xkhVOI21-1666227820992)(assets/cli-是否使用类样式的组件语法.png)\]![在这里插入图片描述][568c5ff80a89401393568481b0ce0eeb.png]

**6）是否在使用TypeScript的同时使用Babel**  
![在这里插入图片描述][94221e18168f47b2a03abb78b560276d.png]

> 根据项目需求选择

**7）选择babel配置信息存放位置**  
![在这里插入图片描述][eefdee5dcbed4db8a76f753dac0dbd20.png]

> `In dedicated config files`：把预设配置放单独的文件当中
> 
> `In package.json`：把预设配置放`package.json`文件当中

**8）是否保存刚才的选择作为一个项目预设**![在这里插入图片描述][2b88d648c043436f90bebe62503f31c0.png]

> 如果配置需要复用就yes，反之选择no

完成上面配置按回车，等待项目构建成功后，就有了一个基于`TypeScript`的`Vue3`项目了。

##### 2.2.3 基于vite构建TypeScript项目 #####

##### 1） 输出初始化项目命令 #####

npm init vue@latest

**上面的命令主要做了这几件事：**

*  安装一个本地工具`create-vue`
 *  使用`create-vue`创建一个`vue`项目

输入之后会提示需要安装`create-vite@3.1.0`这个包，这是目前的最新版本的包。  
![在这里插入图片描述][e7fe2e70f02040c4b50995806cd52791.png]

这里输入`y`，需要安装。

##### 2）输入项目名称 #####

确认安装包后又会询问项目名称是什么？

我输入`vite-ts`，直接按回车键进行下一步。  
![在这里插入图片描述][872cb3681ef74a729d6903b265de94ac.png]

##### 3）选择是否添加`TypeScript` #####

![在这里插入图片描述][7123fbbabe0b406bae6d4f12d8a89e78.png]

##### 4）是否添加jsx支持 #####

![在这里插入图片描述][aac3f6f53adc4e038575e4cc8fa119d1.png]

**5）是否添加路由支持**

![在这里插入图片描述][c453b25b2db1444283cbc41cdc0ead45.png]

**6）是否添加pinia状态管理**  
![在这里插入图片描述][2f9a04278a77422fa0bee99f46b75182.png]

**7）是否添加单元测试**  
![在这里插入图片描述][a971f42a8bac47b1beb3f6366eaceed9.png]

**8）是否添加端到端的测试**  
![在这里插入图片描述][8ccbcfc19cdd493190d432f5e8aa45c7.png]

**9）是否开启ESLint代码检查**  
![在这里插入图片描述][75557912847a4d82a22232d1c56fc436.png]

> 完成上面配置按回车，等待项目构建成功后，就有了一个基于`TypeScript`的`Vue3`项目了。
> 
> 随着vue、vite和pinia的发展，它们加上ts组合将会成为趋势

#### 2.3 全局安装tslint（可选） ####

**安装命令：**

npm install tslint -g

> `tslint`代码检查，可以让`TypeScript`代码更加规范。

**生成tslint.json**

tslint --init

> 运行以后，会生成一个`tslint.json`的文件，有了这个文件以后，代码不规范的时候，会提示警告信息。

ts组合将会成为趋势

#### 2.3 全局安装tslint（可选） ####

**安装命令：**

npm install tslint -g

> `tslint`代码检查，可以让`TypeScript`代码更加规范。

**生成tslint.json**

tslint --init

> 运行以后，会生成一个`tslint.json`的文件，有了这个文件以后，代码不规范的时候，会提示警告信息。

[43e624275dc2494a8c8cc60d0eb736d2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/a31d0567eccf4392980cecadbbbfbea8.png
[0f086cf4bed14c85bd2fc65646e74457.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/4b25b25998384bae8dc7670392168518.png
[091b6ed6242345b88ae9e46ef85e2e5c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/b89ca13c1fe44db9bea0121d1d900c37.png
[568c5ff80a89401393568481b0ce0eeb.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/461e0e4d8dd640efaae0758d349b997f.png
[94221e18168f47b2a03abb78b560276d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/17f70afb879a44c5aad838ea27a5b779.png
[eefdee5dcbed4db8a76f753dac0dbd20.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/ddb398ac87694640a1f089d76b86c1d1.png
[2b88d648c043436f90bebe62503f31c0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/4e4b701fedb5466fbdbf7c5ee24df9ec.png
[e7fe2e70f02040c4b50995806cd52791.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/c3ebe8473017422088434babb20cb3b7.png
[872cb3681ef74a729d6903b265de94ac.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/9c24615aa37c406abcd81d26a1ba7c9f.png
[7123fbbabe0b406bae6d4f12d8a89e78.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/659cf91d17424d538e5973421f423cb4.png
[aac3f6f53adc4e038575e4cc8fa119d1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/aff339917637406fb890c13d2215dcae.png
[c453b25b2db1444283cbc41cdc0ead45.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/635beeabcf4c4108963b7c2eab42aa4e.png
[2f9a04278a77422fa0bee99f46b75182.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/e1fbcb53bf194f5bbbd52b5e49081264.png
[a971f42a8bac47b1beb3f6366eaceed9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/6bf01273d4ac4864aec66aa10c7a4128.png
[8ccbcfc19cdd493190d432f5e8aa45c7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/b9fd9960286f460c90a4bc5ebece5964.png
[75557912847a4d82a22232d1c56fc436.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/7718c6eed7fe4705ae3b9c69a21cec31.png