【TypeScript学习笔记】一、什么是TypeScript及环境配置

前言

大家好！这里是ice_dk，本次将给大家带来的是，笔者的TypeScript学习笔记，持续更新中，欢迎大家来访！！！

TypeScript很流行，这是前端从业者众所周知的事，那你知道什么是TypeScript，我们为什么要学TypeScript嘛？

【本文主要以了解、讲明白为主】

---

以往 JavaScript（含ES6）最大的问题

首先，我们提一个概念，那就是类型错误！

什么是类型错误呢？简单来说，就是我们在编写代码的过程中，原本我已经给这变量设置好类型了，但是，由于我后续的需求变更，我随意地赋值为其他类型，这就是我们常说的类型错误，这可能是源于我们简单的拼写错误，或者无法正确理解api表面，进行随意赋值导致的。

咦、那我们JavaScript，我原本赋值为数字型的，还是能后面改成对象或者数组，这样就不会报很多错误，这不是很好吗？

nonono，靓仔，这或许对于初学者来讲，确实是好事，但对于我们资深的前端人员来讲，这种错误，可能对于我们在开发的过程中，是极其不利的，你试想，当一个项目足够大的时候，你对于上面或者之前他人所编写的代码，你或许知之甚少，你不太好把握它的类型，若是赋为其他类型的，可能会导致一系列不明所以的错误。

由上，我们知道JavaScript最突出的问题就是：“类型检查”问题，由于JavaScript是弱类型语言，使得使用者难以发现其隐患，并且JavaScript没有表达不同代码单元之间关系的能力（程序规模大后，我们针对不同的程序，是难以摸清他们之间的关系的！）

这时候，我们的好大哥，TypeScript也就因此而生！

它的目标是：成为JavaScript程序的静态类型检查器   --> 换句话说，是一个在代码运行前的（静态）工具，确保程序的类型正确，使得我们能够在代码编写阶段就能及时发现类型错误问题！

---

什么是TypeScript

TypeScript是一种由微软开发的自由和开源的编程语言。它是Javascript的一个超集，而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。

咦，这时候，很多小伙伴就会说了，那我可不可以理解成，TypeScript是一种增加了类型的Javascript，它在js基础上，更加强调了类型这么一个概念。emm...好像是有这么一个意思在，那就是说ts是加上类型的js，哦不，靓仔靓女，这只是表面而已，准确来说，ts应该是编译器、语言工具，他还扩展了js。

那为什么说是编译器呢，那是因为，ts暂时还不能被js解析器直接执行，因此我们运行到浏览器上的，还是js，这就不得以，我们将ts变为js，在我们编写好ts之后，通过一些手段，转为js，进而在浏览器上运用，因此笔者认为，更为准确的说法是ts应该是两个独立系统：编译器、语言工具。

---

TypeScript的优势

提供可选的强静态类型

既然叫 TypeScript，那它的最大亮点自然就是提供静态类型（type）。我们可以对变量设置类型，比如你给 count 变量设置为数字类型（number），如果你从 input 元素提取 value （string 类型）赋予给 count，如果你忘记将其转换为数字，编译是不会通过的。

当然类型不是强求设置的，为了兼容 JavaScript，你也可以设置为 any 类型。所谓 any 类型是一个特殊的类型，任何类型的的值都可以赋予给它。

这就有利于我们更早发现 BUG！！

丰富的配置选项

ts提供丰富的配置项，比如说你可以控制转化后端ECMAScript版本，诶，这就很厉害了，这就意味着，我们也不用特别在乎说，本公司所用的ECMAScript是哪个版本了，我想转es6,es7就转了。

添加ES不具备的新特性

ts里添加了es中所不具备的新特性，这在我们后续的笔记中会持续提到

---

TypeScript的一些劣势

需要写更多的代码

主要是类型和接口声明的部分，但能够抵消掉你debug类型问题的时间，总体看还是物超所值的，另外，编译后类型和接口声明都会被移除，但比直接写js，体积不会明显更大。

需要编译

目前来说，浏览器和 Nodejs 并不支持 TypeScript，所以多了一步编译操作。对于普通项目来说通常不长，其实还好。但如果你用来写脚本的话，就需要多安装 tsc 编译工具，还要配置好tsconfig.json 文件，还是有点麻烦。

---

配置TypeScirpt环境

首先，我们得保证说，我们已经安装过node环境，若是没有安装，请先安装好再进行操作！

OK，在学习TypeScirpt之前，我们首先要全局安装好 tcs TypeScript编译器。

npm i -g typescript

其次，你需要创建一个项目（新建一个文件夹，打开文件夹后，在最上面输入cmd打开终端，并运行以下代码初始化）

tsc -init

此时，一个简单的配置也就完成了，若你想检查是否安装成功，你可以通过打开终端，输入以下命令

tsc

若终端没有报错，并且显示如以下内容（包含多个配置等），即安装成功！

诶，此时，为了检测一下它的好坏，我们可以通过在项目内，新建一个ts，紧接着打开终端输入

tsc 文件名.ts (这里的文件名指的是你所创建出来的ts的命名)

此时，我们可以发现，在同个目录下，它就会编译出与其同名的js，这也就是编译的过程，说明你成功了！

 想了解更多有关TypeScript的知识点和方法，请关注🎈TypeScript 学习笔记，持续更新中！！！

 🎈事物的发展是螺旋式上升和波浪式前进的，道路是曲折的，前途是光明的，愿大家一切顺利