TypeScript学习：类型函数

---

theme: github

文本会使用ts代替typescript

了解什么是类型

typescript是一个和js有着很大区别的语言，其中最重要的一点就是ts是一种强类型的语言，而js是一种弱类型语言。那么什么是类型呢？来看例子：

// 这是一个js函数
function sum(a, b) {
  return a + b;
}

可以看到在js中，我们如果调用sum这个函数的话需要传递两个参数：a和b，但是如果不看函数的具体实现的话，我们根本不知道我们的参数是数字类型的，例如我们可以传递一个"1",也可以传递一个1,但是在ts中，我们可以给参数a和b设置type类型，如下：

//这是一个typescript函数
function sum(a: number, b: number): number {
//--------------类型一，----类型二，---类型三
  return a + b;
}

可以看到我们通过在参数或者函数后面增加:类型的形式给这个函数的参数以及返回值定义了类型，这样做能够确保我们的sum函数只能够传递number类型的参数，以及只能够返回number类型的参数。

泛类型

事实上，ts的类型比这个要强大的多，因为我们在实际中编写代码时有时候需要是通用的，并且有可能我们事先并不知道函数的具体类型，这种情况下我们可以在尖括号＜A，B，…＞中定义类型参数并将它们分配给带有:A的值的参数。然后，我们可以将类型参数传递给类型函数，该函数根据输入类型计算输出类型：

function genericFunction<A, B>(a: A, b: B): DoSomething<A, B> {
  return doSomething(a, b);
}

这就是类型级编程！DoSomething＜A，B＞是用一种特殊的编程语言编写的类型函数，它与我们那些参数仅用于值的语言不同，但同样强大。让我们将这种语言称为类型级别的TypeScript。

// 这是类型函数:
type DoSomething<A, B> = ...

// 这是值型函数:
const doSomething = (a, b) => ...

类型级别的TypeScript是一种最小的纯函数语言。

该定义中的“函数式”一词指的是函数式编程，这是你以前可能听说过的一个概念。类型级别的TypeScript是功能性的，因为函数是这种语言的主要抽象手段。我们将一直使用函数。 在类型级别，函数被称为泛型：它们接受一个或多个类型参数并返回单个输出类型。下面是一个简单的类型函数示例，它使用两个类型参数并将它们封装在元组中：

type SomeFunction<A, B> = [A, B];
/*                ----    ------
                   ^         \
                  类型参数     返回类型,可以在A或者B中选择一个
*/

类型级别的TypeScript没有很多特性。毕竟它是只为你的代码而设计的！它拥有足够的特性这意味着你可以用它解决任意复杂度的问题。

在我看来，简单理解就是可以根据函数参数的类型设置函数返回的类型，前提是要有个约定。例如约定函数有两个参数，那么这两个参数需要在<A,B>括号中写明，之后返回的类型可以是A的类型，也可以是B的类型。

例如我们有这样一个函数：

function returnSelf(a){
    return a;
}

要让这个函数返回自己，那么理论上来讲这个函数的参数a可以是任意类型，但是我们可以看到我们并没有给他约束类型，那么这个时候就可以使用我们上面学到的知识了：

function returnSelf<T>(a:T):T{
  return a;
}

这个函数传入一个参数a，a的类型为T，那么我们在前面的<>括号中写入T，函数返回的类型也设置为T，就说明了我们的返回类型为参数a的类型。这样写，表面看起来没有什么问题，但实际上这有啥用呢？

来看一下这个函数的优势：可以自定义返回类型，那么我们就可以写一个网络请求函数同时访问两个不同后端的返回结果。

举个例子：公司里面有美工A，和后端B、C，B和C都喜欢A，所以他们是死对头，因此他们故意把结果返回结果的格式弄成不一样的，例如B的接口返回为：

success:true,
message:"",
code:200,
data:""

而C的接口返回结果为：

success:true,
status:200,
msg:"",
obj:""

这个时候我们总不能因为这个就写两个http请求类吧，因此我们可以这样写：

type BResponse = {
    success: boolean
    code: number,
    message: string,
    data: any
}
type CResponse = {
    success: boolean
    status: number,
    msg: string,
    obj: any
}
function request<T>(url:string):Promise<T>{
  const res = fetch(url, {
      method: 'GET',
  }).then(res=>{
    return res.json();
  });
  return res as any;
}

这样我们就在请求时就可以这样写了：

request<BResponse>("https://api.zngg.net/portal/tool/1/12").then(res=>{
    console.log(res.message);
})

可以看到我们可以轻松的在res中点出来message。