2、TS的类型声明

1、为变量声明类型

//TS的类型声明.ts

// 声明一个变量a，同时指定它的类型为number
let a: number;

a = 10; //可以

//a的类型设置为 number，以后使用时，只能为number
a = "string"; //Type 'string' is not assignable to type 'number'(类型 string 不能分配给 类型 number)

这个时候如果对这个文件进行编译，则会报如下错误

但即使报ts错误，依然还是可以编译成功（之后会有方式限制这种情况，因为不符合预期），编译后如下：

////TS的类型声明.js

// 声明一个变量a，同时指定它的类型为number
var a;
a = 10; //可以
a = "string"; //Type 'string' is not assignable to type 'number'(类型 string 不能分配给 类型 number)

可以注意到，编译之后的js 使用的声明是用的var，而编译前使用的是let，这是为什么呢？

因为ts向js编译时，为了很好的兼容性，可以编译成任意版本的js，但默认编译的是 ES3的版本。

2、声明变量赋值

let c:boolean = true  //可以
let d:boolean = 153   //不可以（Type 'number' is not assignable to type 'boolean'）


//像下面这样不写类型也可以
//如果变量的声明和赋值是同时进行的，TS可以自动对变量进行类型检测
let e = true
e = 456   //Type 'number' is not assignable to type 'boolean'

如果变量的声明和赋值是同时进行的，TS可以自动对变量进行类型检测，所以这种情况完全没必要自己再写类型!!!

这样看来的话，好像自己也不用写类型了，感觉使用ts，也不用写什么ts代码了，但在函数时，就不是这么回事了。

3、函数写类型

// 求和函数
function sum(a, b) {
  return a + b;
}

sum(11, 22); // 33
sum("11", 22); // "1122"

看上面的代码就可以发现问题了，一个sum求和函数，但是由于传参时，不小心将参数写成了string类型，结果做了字符串拼接，而这显然不是我们要的结果。

那我们给参数加上类型限制，来避免这个问题

// 求和函数
function sum(a: number, b: number) {
  return a + b;
}

sum(11, 22); //可以
sum("11", 22); //Argument of type 'string' is not assignable to parameter of type 'number'

sum(11,22,33)   //Expected 2 arguments, but got 3

当我们给函数参数加上number类型限制后，可以看到，当传入非 number时，就会直接报错，这样就可以解决上面的拼串问题了。而且ts还做了参数数量检测，sum只需要两个参数，而我们传入了三个时，就会提示上面的错误（预期两个参数，但是得到了三个），传少了也会报错。

不仅函数的参数可以做类型限制，连返回值也同样可以

// 求和函数
function sum(a: number, b: number):number {
  return a + b + 'hello';   //Type 'string' is not assignable to type 'number'
}

这个地方提示，返回值限制了number，但是实际却返回了 string 类型。

看似写ts时，代码变多了，感觉上面的函数，谁会传错参数呢，一共就两个，谁会把返回值写成string类型呢？

但其实工作当中的代码往往不只有这么简单，一个函数数可能会有几十行，即使是用了单一策略，将每个函数对应每个功能，一个函数依旧可能有很多的代码。而且工作当中，很多函数不是自己封装的，是别人写好的，你拿来用就行了，这时候，如果有类型的存在，将会让你更少的犯一些错误。