TypeScript的简单学习笔记（一）

最近在慕课网学了个课程，里面讲到了ts的知识，我之前对ts可以说是几乎一无所知，只是听说过，概念停留在“JavaScript的超集，静态类型语言，需要编译成js才能在浏览器中执行”，再深挖一点就什么都不知道了——如“要怎么指定数据的类型”  ，“要怎么编译ts，才能得到js？”， “ts与js有什么不同？多了什么东西？”等。

因为“最好的学习方法就是教”，我现在来写一篇简单的学习笔记，用简单的话来谈谈ts的知识。不仅让自己记得更清楚，也让同样需要学习ts的同学轻松学到知识。（红色的部分是我自己标注的重点，如果不愿意看长篇大论，可以优先看红字）

一、ts的优势和缺点

首先，为什么要学ts? ts现在已经成为很多开发者都在学习和使用的潮流了，而且前端的三大框架Angular, Vue, React都支持ts。当然我更关心的是，ts有什么优势——

1. ts具有静态类型语言的优点，那就是在声明变量的时候就指定了变量的类型。显然在使用的时候，程序知道你变量的类型，就减少了因为不确定类型，到执行的时候才发现使用到了不是该类型的方法的错误。确定了变量的类型，能减少不确定性，也增强了代码的可读性。

2. ts比js的代码提示更智能，毕竟ts的变量类型是固定的，所以IDE更懂你的代码，可以给你更确定的代码提示，什么属性可以用，什么属性不能用是一目了然的，你写错了还有标红提示。（我曾经超讨厌标红的错误提示，觉得自己还没写完就被骂了，但是现在才发现，当然是早发现错误早好）

3. ts具有很好的包容性。作为js的超集，ts能完全兼容js的语法——把js文件后缀改成ts是完全没有问题的； 就算你写的ts代码报错了也一样能编译成js（而且编译的js在任何浏览器上都可以运行，也就是说，我们用ts可以使用最新版本的ES特性，但是编译成js的时候，ts也会考虑到语法版本的问题，为我们转换成ES5的代码）

ts当然也有一些缺点，如增加了学习成本（确实与js有些不一样），短期内增加了开发成本（ts更适合用在大项目上）

二、怎么开始用ts

要开始用ts，首先要保证你电脑安装的node版本至少为10，npm的版本至少为6。输入 npm install -g typescript 来安装TypeScript，然后输入tsc -v ，如果能看到版本号，说明你安装成功啦，恭喜。（我是这个月安装的，安装的是4.0.3版本）

然后新建后缀名为.ts的文件，就可以愉快地开始写ts代码了。

如何编译写好的ts文件呢？使用 tsc 文件名 即可。这样就可以得到同名的js文件。然后 node  js文件名 就可以运行这个js文件了。或者安装ts-node，然后就可以用ts-node命令直接运行ts文件了

三、ts与js有哪些不同

1.变量的类型

我们都知道js是弱类型语言——换句话说，js的变量是不具有类型的，只有值才具有类型，ts打破了这个现象，也就是为变量赋予了类型，之后无法改变把其他类型的值赋给该变量。

如何指定变量的类型呢？

let n: number = 1;

像这样，定义变量的时候，在变量名后使用 ": 类型" 来指定变量的类型。这里的“类型”可以是js就有的原始类型，如number,string,boolean,null,undefind，也可以是内置类型，如Date，甚至是自定义类型。

假如我要定义一个变量，但是我还不确定它的类型，可以使用any类型。别忘了，ts是js的超集，所以js中变量可以被赋值任意类型的特性在ts中仍然可用。（这只适合需要接收一个不确定类型的值使用，不要滥用any，因为这样就不检查类型了，失去了你使用ts的意义）

假如我定义变量的使用不指定类型，像js中一样，那么我等会儿可以对它任意赋值吗？不行。ts有类型推断的功能，会根据我们给变量的初始值来判断变量的类型，然后指定变量为这种类型。

2. 函数的类型

在js中，我们只知道函数也是对象，顶多知道是可调用的对象，就没有更具体的表达了。我学过静态类型语言，在Java和C语言中，函数的定义相当严格，要指定每一个参数的类型，以及函数返回值的类型。那么ts作为一门静态类型语言，又是JavaScript的超集，它要怎么定义函数的类型呢？

如果是在写一个函数的时候，要给函数的每个参数和返回值指定类型。

// 函数声明的形式定义函数
// z的冒号前面有问号，z是可选参数。参数括号后面的冒号指定的是返回值的类型
function add(x: number, y: number, z?: number): number {
   // 如果我们输入了第三个数字，那么返回三个数之和
   if (typeof z === 'number') {
     return x + y + z
   }
   else {
     return x + y
   }
 }

// 函数表达式的形式定义函数，使用的是箭头函数
// 可以看到add是有类型的，是函数，而且是一个参数这样，返回值这样的函数
const add = (x: number, y: number, z?: number): number => {
  // 如果我们输入了第三个数字，那么返回三个数之和
  if (typeof z === 'number') {
    return x + y + z
  }
  else {
    return x + y
  }
}

可以看到，在ts中，仍然是用函数声明和函数表达来定义一个函数，只不过是在每个参数的后面加上“: 类型”来指定参数的类型，（可选参数的冒号前面要加问号，并且位于参数列表的最后）在小括号后面加上“: 类型”来指定返回值的类型（返回值为空的写void）而已。注意，这样定义出来的函数已经具有类型了，这个类型是用参数列表的类型和返回值类型共同描述的。

知道了函数的类型有什么用？在ts中，赋值只能赋指定类型的值，函数也不例外。如果把一个函数赋给一个函数类型的变量，必须类型相同才可以。（也就是参数列表中的每个参数的类型都相同，包括可选参数的类型，返回值类型也必须相同才算同种类型的函数）

如果我不是写一个函数，而是定义一个函数类型的变量，要怎么写？

// 定义了另一个函数，类型与add一模一样，
// 在外面定义用箭头指定返回值类型
let add2: (a: number, b:number, c?: number) => number = add

像这样，定义变量时依然在后面的冒号写上类型，只不过类型这里写的是"(带类型的参数列表) => 返回值类型" （在定义函数类型时，箭头后面的并不是函数体，而是返回值的类型）。

ts里还可以有对类型的各种花式使用，由于篇幅限制，我准备再写一篇专门讲述ts中“奇奇怪怪”的类型。