TypeScript 中的类型注释, 类型推断和函数

TypeScript 中的类型注释, 类型推断和函数

[2020.10.24] 第三次学习
具体学习资源来自技术胖链接

TypeScript 中的类型注释

类型注释很简单看如下代码

let count : number;
count = 123;

我们利用let声明一个变量名为count的变量，然后用了:进行说明这是一个number类型的变量，很明显这个冒号就是标识我们要设置的变量类型了，所以这个冒号就是所谓的类型注释

TypeScript 中的类型推断

类型推断是相对于编译器的，一般情况下编译器会自动识别赋值了的变量的类型，如下代码:

let count2 = 123456;

我们对变量进行直接的赋值，与此同时我们把鼠标放在变量count2上的时候编译器会告诉你**:let count2: number**你会发现 TypeScript 自动把变量注释为了number（数字）类型，也就是说它是有某种推断能力的, 这就是TypeScript 中的类型推断。

类型的实际应用问题

在实际编程中我们会碰到各种各样的变量所以对某些变量（如上的count2）我们可以不用去用类型注释来进行变量的声明，编译器会自动识别，但是有的变量就不适用了，如下:

function getTotal(one, two) {
    return one + two;
}
  
const total = getTotal(1, 2);

我们定义了一个求和函数，此时我们把鼠标放在one，two或者total上时编译器会告诉我们这几个变量都是any类型的，但是往往在实际编程中函数的入口参数我们都需要进行限定，所以在此时我们就可以使用类型注解来进行修改了

function getTotal(one : number, two : number) {
    return one + two;
}
  
const total = getTotal(1, 2);

此时我们就对函数的入口参数进行了限制了，但是我们不需要对total进行类型注释，因为编译器会自动判断返回值的类型，所以此时total就是一个number类型了

TypeScript 中的函数详解

函数（方法）是我们处理业务的的逻辑的实现，这在任何编程语音中都是十分重要的

首先对于之前的getTotal函数写的并不严谨，对于让编译器去自动推断返回类型是不严谨的所以我们需要进行修改：

function getTotal(one : number, two : number) : number {
    return one + two;
}
  
const total = getTotal(1, 2);

这样就是一个比较严谨的函数了

对于一个函数我们可以使得它的返回值为空，我们写一个打印helloworld的函数具体代码如下 :

function SayHello() : void {
    console.log("Hello world!");
}

这样写完之后可以用return结束函数，但是return后面不能跟返回值，不然会报错。

当函数的参数是对象（结构）

这里是ts函数的一个难点，就是当一个函数的参数是对象时，我们如何定义参数对象的属性类型呢？
我们先写个简单的函数试试

function add({ one, two }) {
    return one + two;
  }
  
  const total = add({ one: 1, two: 2 });

这个时候我们会看到total下面出现红线，因为total类型可能会是任何的类型，这个时候编译器就不会认，所以我们同样需要进行类型的注释，但是问题来了，我们如何对一个对象进行类型的设置呢？具体设置如下:

function add({ one, two }: { one: number, two: number }): number {
  return one + two;
}

const three = add({ one: 1, two: 2 });

这样设置就是一个非常正确的函数声明了。