奉劝学弟学妹，学完JavaScript就该学TypeScript了,让我们一起了解TypeScript和如何去搭建运行环境吧

拼搏现实的明天。 2022-10-12 01:08 196阅读 0赞

### 文章目录 ###

*  定义
 *   *  介绍
     *  提示
     *  ts与js的区别
 *  搭建ts运行环境
 *   *  安装node.js
     *  VSCode使用
     *  安装TypeScript

# 定义 #

## 介绍 ##

*  程序更容易理解——如变量的类型只有在程序运行时才确定，如函数的参数、返回值等
 *  效率更高
 *  更少的错误，可以杜绝一些常见错误
 *  非常好的包容性。TS 是JS超级，完全兼容 javascript
 *  但增加了一定的学习成本

官网：

[官网][Link 1]

[中文网][Link 2]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70_pic_center]

超集：意思就是JavaScript的所有语法都支持

Type：TypeScript 强调其优点【类型】

在JavaScript中我们定义变量类型后，下面可以更换类型

但是在TypeScript中不可以

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70_pic_center 1]

TypeScript中

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70_pic_center 2]

TypeScript中编写的代码不能直接在页面中运行，需要编写为JavaScript代码才可以在页面中运行

下面JavaScript我就写js TypeScript我就写ts了

## 提示 ##

在js中我们我们在做的时候不管如何去传值都不会有报错

ts中我们可以直接在函数接收的时候告诉他我们需要什么类型的值，必须包含哪几个属性给我传递过来，如果传值类型不对，就会给我们提示，如果我们定义了传值包含属性，不传值直接调用也会报错哦

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70_pic_center 3]

ts在我们编写时会给我们做出对应得提示哦（代码语义通俗易懂）

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70_pic_center 4]

而js就没有对应提示，需要我们自己去编写

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

ts中我们可以使用type xx=\{xx:xx\}来做定义

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70_pic_center 5]

也可以使用 interface xx \{xx:xx\}去定义

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70_pic_center 6]

如果我们属性写错或者不存在会有对应提示

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70_pic_center 7]

js则没有

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70_pic_center 8]

## ts与js的区别 ##

<table> 
 <thead> 
  <tr> 
   <th>TypeScript</th> 
   <th>JavaScript</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>JavaScript 的超集用于解决大型项目的代码复杂 性</td> 
   <td>一种脚本语言，用于创建动态网页</td> 
  </tr> 
  <tr> 
   <td>可以在编译期间发现并纠正错误</td> 
   <td>作为一种解释型语言，只能在运行时发现错误</td> 
  </tr> 
  <tr> 
   <td>强类型，支持静态和动态类型</td> 
   <td>弱类型，没有静态类型选项</td> 
  </tr> 
  <tr> 
   <td>最终被编译成 JavaScript 代码，使浏览器可以理 解</td> 
   <td>可以直接在浏览器中使用</td> 
  </tr> 
  <tr> 
   <td>支持模块、泛型和接口</td> 
   <td>不支持模块，泛型或接口</td> 
  </tr> 
  <tr> 
   <td>社区的支持仍在增长，而且还不是很大</td> 
   <td>大量的社区支持以及大量文档和解决问题的支 持</td> 
  </tr> 
 </tbody> 
</table>

# 搭建ts运行环境 #

## 安装node.js ##

[官网][Link 3]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70_pic_center 9]

建议大家选长期稳定版，然后大家就可以进行傻瓜式安装

安装完之后win+r运行输入cmd调出命令行工具输入`node -v` 就会出现对应得版本

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

`npm -v` 也可以出现对应版本就证明成功了

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

## VSCode使用 ##

在设置中找到下面区域设置为single

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70_pic_center 10]

tab设置缩进2个空格

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70_pic_center 11]

安装插件

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70_pic_center 12]

记得勾选哦

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70_pic_center 13]

## 安装TypeScript ##

打开终端输入如下代码进行全局安装

`npm install -g typescript`

我们在运行`node xxx.ts`时会报如下错误是因为node无法解析ts语法

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70_pic_center 14]

我们需要运行 `tsc xxx.ts`解析编译为js文件

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70_pic_center 15]

然后在运行`node xxx.js即可`

*  ts可以写以前学的JS代码
 *  ts类型的文件浏览器端不支持，无法进行解析
 *  ts类型的文件中如果有ts语法，node也无法进行解析
 *  ts文件需要使用 `tsc`编译器转换为js文件

此时ts运行环境配置后我们需要每次都要进行编译在运行，非常的麻烦，我们可以安装一个新插件`ts-node`

运行`npm i ts-node -g`即可安装完毕

然后我们就可以运行ts文件了

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70_pic_center 16]

此时运行环境配置完成

[Link 1]: https://www.typescriptlang.org/
[Link 2]: https://www.tslang.cn/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70_pic_center]: /images/20221005/d717ab37317c4eff8f750bae54a093d3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221005/500efa4b535b4a8382a1a50b8c3cfc2f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221005/868a3b717ff649af9623bf6c0000219b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221005/f3e9cd005bbb4394b17cba68e6dbf733.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20221005/158a7deeaf1a4d2483467aa1ef6cbd83.png
[20210702105318633.png_pic_center]: /images/20221005/60b93355e7714ceaa543fe85d32394d6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70_pic_center 5]: /images/20221005/771f46746b2a45b38e7d6d05c23afbe6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70_pic_center 6]: /images/20221005/7447e716af0644dc92ea3c3d160bbdc0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70_pic_center 7]: /images/20221005/8b8aacef89b64da5a9065e9c9aeada0a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70_pic_center 8]: /images/20221005/2576e5f4ead8457d971d35492f6add79.png
[Link 3]: https://nodejs.org/en/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70_pic_center 9]: /images/20221005/5013fc85f6454774b58386dd6b9458d9.png
[20210702105512710.png_pic_center]: /images/20221005/496b1304459f4093a90fac89d30a2d05.png
[20210702105522276.png_pic_center]: /images/20221005/2be81ef7c00245a0b138c7f091afbd1d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70_pic_center 10]: /images/20221005/20d5f222f8d44706a69f7986d29d8f6c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70_pic_center 11]: /images/20221005/a0b198fb30f848779876282767c3afdb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70_pic_center 12]: /images/20221005/ac99e20d902846d0a5ce6e55f3f35091.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70_pic_center 13]: /images/20221005/c411ca7841404812a6be9ec2ae184bcd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70_pic_center 14]: /images/20221005/b0522ebe65e94b6daccd85328c259b69.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70_pic_center 15]: /images/20221005/84f8ed192a894f4ca11f9f83055b646b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70_pic_center 16]: /images/20221005/992472dc7dd74ec1ac99f1d38ee3bb22.png