TypeScript：给你不一样的js编写体验(初探ts)

2020都到了，还不准备入手试试TypeScrip嘛！！前端攻城狮下一站拉开初步攻势，走进TypeScript的世界！让我们去看看静态的js语言如何让代码更加的高效和易于维护吧！！

---

首先，TypeScript是什么？

我们需要先搞清楚TypeScript是什么才可以找到合适的学习方法去学习它。关于TypeScript，它是一个JavaScript的超集，那么既然如此，它就兼容JavaScript的所有的语法，然后在其基础上加上了其独有的内容。除此之外，我们上面说到了，TypeScript是一门静态语言，如果了解Js的人应该都知道，Js是一门动态的语言，它的代码书写更加的灵活，而如我们学的C，C++，Java这样的则是属于静态语言，它的定义都需要指定相应的类型进行说明，虽然显得较为麻烦，但是对于开发而言，却是有它的优势的。那么这里我们说我们的TypeScript也是一门静态的语言，那么它就会满足静态语言的所有的特性。所以，这里就要说明一下，在看此套博客前，你需要先具备Js的基础语法，以及一定的静态语言的基础.
（在TypeScript的世界里，我们让JavaScript的代码编写展现出Java代码编写的感觉!!）

---

我们应该如何编写TypeScrip的代码呢?

TypeScript是JavaScript的超集，那么它最后也就是会运行在浏览器上的，但是如果我们直接放到浏览器上运行，它肯定是会报错的，因为浏览器压根就不认识Ts的代码。所以，我们在编写完Ts的代码后，我们就现需要先对Ts的代码进行编译，编译成Js的代码后浏览器才能够正常的运行。如果之前有看过我写的webpack打包TypeScrip的那篇文章的可能这里就已经想到了一个方法，就是使用webpack为我们打包编译Ts的代码为Js的代码，但是如果我们仅仅只是写一些比较简单的逻辑，那么每次都去配置webpack的打包环境确实也很麻烦，那有没有简单的方式帮助我们既能够实现ts的编译，又能够提高Ts的开发效率呢？答案当然是肯定的咯，那么我们今天就来说说如何配置一个Ts的开发环境吧!!

1. 方法一: 使用webpack打包Ts的代码，也就是我们上面说到的那个方式
2. 方法二: 安装typescript，使用typeScript帮助我们打包:

// 安装:
npm install typescript -g
//使用:
tsc + ts文件路径

如果我们编写的是Node的代码，那么我们还可以装一个ts-node的模块，帮助我们直接以node运行ts文件:

// 安装
npm install ts-node -g
// 使用: 
ts-node + ts文件路径

3. 方式三: 使用parcel打包编译ts代码: parcel其实和webpack一样，也是对ts代码进行编译打包，但是它比起webpack使用起来更加的方便，它节省了很多的webpack的配置，我们只需要下载后直接使用即可:

//安装: 
npm install parcel -D
// 使用:
parcel + 编译的入口文件(可以是js文件，ts文件，html文件)

大家可以根据以上的三种方式选择一种进行配置自己的Ts开发环境，配置好后，我们便可以开始我们的TypeScript代码的开发了。

---

上面我们说到了，ts是一种静态的语言，所以我们在ts里定义变量就不能够像js里面直接进行定义了，我们需要为我们的定义的每一个变量指定它的类型，指定类型后，给它赋值就必须要满足它的类型要求，就和静态语言一样，例：

const str: string = "abcd"   //指定了str为字符串类型
const num: number = 20       // 指定num为数值类型
const undef: undefined = undefined   //指定了undef为undefined类型
// .....

如上所示，我们在定义的变量后使用 : ，在冒号后指定变量的类型。以上的方式，在Ts中叫做类型的注解，就是我们直接指定变量的类型，同时在ts中也有类型推断的机制，当我们未明确指定类型时，ts会自动根据我们的赋值的类型判断改变量的类型，同样，我们再次赋值时也是不可以改变其类型的, 如:

const name = "zhangsan"

这里我们没有明确的指定name变量的类型，但是ts自动根据我们赋值的"zhangsan"判断name变量是一个字符串类型，之后我们再为name赋值时，就只能够赋值为string类型。

---

关于Ts变量我们就说这么多，今天TypeScript初探也就到这里了，我们简单说了下Ts是什么，如何配置一个Ts开发环境，以及Ts中的变量定义，内容很简单，但还是希望大家能够简单的了解一下Ts的基础入门，之后我们再说Ts中各种各样不同于Js的语法！！大家 加油！！！