【TypeScript】介绍和环境搭建的详细步骤

柔光的暖阳◎ 2023-10-02 20:36 19阅读 0赞

#### 文章目录 ####

*   *  TypeScript的邂逅
     *   *  认识TypeScript
         *  TypeScript特点
         *  大前端发展趋势
     *  TypeScript的环境
     *   *  TypeScript编译环境
         *  TypeScript运行环境
         *   *  方式一： webpack配置
             *  方式二：安装ts-node

### TypeScript的邂逅 ###

> 虽然我们已经知道TypeScript是干什么的了，也知道它解决了什么样的问题，但是我们还是需要全面的来认识一下TypeScript到底是什么？

#### 认识TypeScript ####

**我们来看一下TypeScript在GitHub和官方上对自己的定义**：

> GitHub说法： TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
> 
> TypeScript官网： TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.
> 
> 这两个地方的意思是差不多的, 翻译过来： TypeScript是拥有类型的JavaScript超集, 它可以编译成普通、干净、完整的JavaScript代码。

**怎么理解上面的话呢？**

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

#### TypeScript特点 ####

> 官方对TypeScript有几段特点的描述，我觉得非常到位（虽然有些官方，了解一下），我们一起来分享一下

**始于JavaScript，归于JavaScript**

> TypeScript从今天数以百万计的JavaScript开发者所熟悉的语法和语义开始。使用现有的JavaScript代码，包括流行的JavaScript库， 并从JavaScript代码中调用TypeScript代码；
> 
> TypeScript可以编译出纯净、 简洁的JavaScript代码，并且可以运行在任何浏览器上、 Node.js环境中和任何支持ECMAScript 3（或 更高版本）的JavaScript引擎中；

**TypeScript是一个强大的工具，用于构建大型项目**

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

**拥有先进的 JavaScript**

> TypeScript提供最新的和不断发展的JavaScript特性，包括那些来自2015年的ECMAScript和未来的提案中的特性，比如异步功能和 Decorators，以帮助建立健壮的组件；
> 
> 这些特性为高可信应用程序开发时是可用的，但是会被编译成简洁ECMAScript3(或更新版本)的JavaScript；

**正是因为有这些特性， TypeScript目前已经在很多地方被应用**：

> Angular源码在很早就使用TypeScript来进行了重写，并且开发Angular也需要掌握TypeScript；
> 
> Vue3源码也采用了TypeScript进行重写，在前面阅读源码时我们看到大量TypeScript的语法；
> 
> 包括目前已经变成最流行的编辑器VSCode也是使用TypeScript来完成的；
> 
> 包括在React中已经使用的ant-design的UI库，也大量使用TypeScript来编写；
> 
> 目前公司非常流行Vue3+TypeScript、 React+TypeScript的开发模式；
> 
> 包括小程序开发，也是支持TypeScript的；

#### 大前端发展趋势 ####

**目前我们前端要学习的东西也是越来越多, 各种框架的学习, 现在还要学习TS**

> node的作者在18年是开发一个新的框架deno时, 有人曾在GitHub上提交这样一个issue

![在这里插入图片描述][1c718c698b9c46149b8de5589f04bcc4.png_pic_center]

**大前端是一群最能或者说最需要折腾的开发者**：

> 客户端开发者：从Android到iOS，或者从iOS到Android，到RN，甚至现在越来越多的客户端开发者接触前端 相关知识（ Vue、 React、 Angular、小程序）；
> 
> 前端开发者：从jQuery到AngularJS，到三大框架并行： Vue、 React、 Angular，还有小程序，甚至某些前端开发现在也要接触客户端开发（比如RN、 Flutter）；
> 
> 目前又面临着不仅仅学习ES6、7、8等新的特性，还要学习TypeScript；
> 
> 新框架的出现，我们又需要学习新框架的特性，比如vue3.x、 react18等等；

**但是每一样技术的出现都会让人惊喜，因为他必然是解决了之前技术的某一个痛点的，而TypeScript真是解决了 JavaScript存在的很多设计缺陷，尤其是关于类型检测的**。

**并且从开发者长远的角度来看，学习TypeScript有助于我们前端程序员培养类型思维，这种思维方式对于完成大型项目尤为重要**。

### TypeScript的环境 ###

--------------------

#### TypeScript编译环境 ####

**在前面我们提到过， TypeScript最终会被编译成JavaScript来运行，所以我们需要搭建对应的环境**：

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

![在这里插入图片描述][fbfa55b6244d4d1ab7d510546ce60b00.png_pic_center]

**TypeScript代码无法直接跑在浏览器上, 需要编译成JavaScript代码才能运行在浏览器上, 那么这个编译的过程需要谁来来完成呢?**

> 有两个工具可以帮助我们转换:
> 
> 1.  tsc: TypeScript Compiler
> 2.  babel: babel中有一个preset插件
> 
> 目前我们使用官方的tsc工具

**首先, 我们需要通过npm, 先进行全局的安装**：

> 安装命令: `npm install typescript -g`
> 
> 查看版本: `tsc --version`

**【演示】tsc的使用, 例如我们编写一些TS代码**

![在这里插入图片描述][2eff3011c27640d89fbf47c41eeae360.png_pic_center]

**在终端中敲命令: `tsc 文件名`**

> 输入完成后会生成一个相同名称的js代码
> 
> 再在浏览器或者node环境中运行js代码即可

![在这里插入图片描述][133fba4e58e2485390e06c306f79896b.png_pic_center]

#### TypeScript运行环境 ####

**如果我们每次为了查看TypeScript代码的运行效果，都需要经过这两个步骤的话就太繁琐了**：

> 第一步：通过tsc编译TypeScript到JavaScript代码；
> 
> 第二步：在浏览器或者Node环境下运行JavaScript代码；

**是否可以简化这样的步骤呢？**

> 比如编写了TypeScript之后可以直接运行在浏览器上？
> 
> 比如编写了TypeScript之后，直接通过node的命令来执行？

**上面我提到的两种方式，可以通过两个解决方案来完成**：

> 方式一：通过webpack，配置本地的TypeScript编译环境和开启一个本地服务，可以直接运行在浏览器上；
> 
> 方式二：通过ts-node库，为TypeScript的运行提供执行环境, ts-node会做两件事情: 帮你做编译; 帮你运行在node中；

--------------------

##### 方式一： webpack配置 #####

**在项目中Vue-cli会自动帮助我们配置好TS环境, 某些特殊情况下我们也需要自己进行配置**

> 注意：这里可能需要大家对npm和webpack有一些简单的了解，不会非常复杂（如果完全不懂，按照我给出的步骤来做即可，后续自己进行一些知识的补充）

**步骤一: 通过npm来初始化package.json文件**: `npm init`

> 输入完成后, 全部敲回车即可

**步骤二: 本地安装webpack和webpack-cli**: `npm install webpack webpack-cli -D`

> 在package.json中添加一个脚本

![在这里插入图片描述][5200b0cac0d2482798646e0bc4916c6e.png_pic_center]

*  创建一个webpack.config.js文件

const path = require('path')
    
    module.exports = {
        
      mode: "development",
      entry: "./src/main.ts",
      output: {
        
        path: path.resolve(__dirname, "./dist"),
        filename: "bundle.js"
      }
    }

**步骤三: 安装ts-loader和typescript**: `npm install ts-loader typescript -D`

> 本地安装的原因:
> 
>  *  因为我们之后是通过webpack进行编译我们的TypeScript代码的，并不是通过tsc来完成的。（tsc使用的是全局安装的TypeScript依赖）
>  *  那么webpack会在本地去查找TypeScript的依赖，所以我们是需要本地依赖TypeScript的；

*  再在webpack.config.js文件中配置匹配规则

const path = require('path')
    
    module.exports = {
        
      mode: "development",
      entry: "./src/main.ts",
      output: {
        
        path: path.resolve(__dirname, "./dist"),
        filename: "bundle.js"
      },
      resolve: {
        
        extensions: [".ts"]
      },
      module: {
        
        rules: [
          {
        
            test: /\.ts$/,
            loader: 'ts-loader'
          }
        ]
      }
    }

**步骤四: 初始化tsconfig.json文件**: `tsc --init`

> 会自动生成一个tsconfig.json文件, 此时已经可以将ts文件编译成js文件

**步骤五: 搭建本地服务器**: `npm install webpack-dev-server -D`

> 安装后, 再在package.json中配置一个脚本

![在这里插入图片描述][324d46b1d90042d48202391308d2753d.png_pic_center]

*  我们还需要一个index.html作为模板

![在这里插入图片描述][8075fda15d4f4667acb0cf50b4f6864c.png_pic_center]

*  安装`npm install html-webpack-plugin -D`在webpack.config.js中配置模板, 最终webpack.config.js中配置如下

const path = require('path')
    const HtmlWebpackPlugin = require('html-webpack-plugin')
    
    module.exports = {
        
      mode: "development",
      entry: "./src/main.ts",
      output: {
        
        path: path.resolve(__dirname, "./dist"),
        filename: "bundle.js"
      },
      devServer: {
        
      },
      resolve: {
        
        extensions: [".ts", ".js", ".cjs", ".json"]
      },
      module: {
        
        rules: [
          {
        
            test: /\.ts$/,
            loader: 'ts-loader'
          }
        ]
      },
      plugins: [
        new HtmlWebpackPlugin({
        
          template: "./index.html"
        })
      ]
    }

**此时我们直接编写的main.ts文件, 就会直接运行在浏览器上**

![在这里插入图片描述][f460f41db5934bb98b1131af50d0c020.png_pic_center]

![在这里插入图片描述][ab840b5c78c7415a8471151d8bf96b74.png_pic_center]

--------------------

##### 方式二：安装ts-node #####

> 安装命令: `npm install ts - node -g`
> 
> 安装命令: `npm install ts - node -g`
> 
> 另外ts-node需要依赖 tslib 和 @types/node 两个包, 也需要安装一下：`npm install tslib @types/node -g`
> 
> 现在，我们可以直接通过 ts-node 来运行TypeScript的代码：`ts - node 文件名`

![在这里插入图片描述][286b803ec8214c7599703d1f0f50f33e.png_pic_center]

**TS的语法学习中, 我会采用方式二, 在后续项目中采用方式一**

[1c718c698b9c46149b8de5589f04bcc4.png_pic_center]: https://img-blog.csdnimg.cn/1c718c698b9c46149b8de5589f04bcc4.png#pic_center
[fbfa55b6244d4d1ab7d510546ce60b00.png_pic_center]: https://img-blog.csdnimg.cn/fbfa55b6244d4d1ab7d510546ce60b00.png#pic_center
[2eff3011c27640d89fbf47c41eeae360.png_pic_center]: https://img-blog.csdnimg.cn/2eff3011c27640d89fbf47c41eeae360.png#pic_center
[133fba4e58e2485390e06c306f79896b.png_pic_center]: https://img-blog.csdnimg.cn/133fba4e58e2485390e06c306f79896b.png#pic_center
[5200b0cac0d2482798646e0bc4916c6e.png_pic_center]: https://img-blog.csdnimg.cn/5200b0cac0d2482798646e0bc4916c6e.png#pic_center
[324d46b1d90042d48202391308d2753d.png_pic_center]: https://img-blog.csdnimg.cn/324d46b1d90042d48202391308d2753d.png#pic_center
[8075fda15d4f4667acb0cf50b4f6864c.png_pic_center]: https://img-blog.csdnimg.cn/8075fda15d4f4667acb0cf50b4f6864c.png#pic_center
[f460f41db5934bb98b1131af50d0c020.png_pic_center]: https://img-blog.csdnimg.cn/f460f41db5934bb98b1131af50d0c020.png#pic_center
[ab840b5c78c7415a8471151d8bf96b74.png_pic_center]: https://img-blog.csdnimg.cn/ab840b5c78c7415a8471151d8bf96b74.png#pic_center
[286b803ec8214c7599703d1f0f50f33e.png_pic_center]: https://img-blog.csdnimg.cn/286b803ec8214c7599703d1f0f50f33e.png#pic_center