加餐02｜深入TypeScript

你好，我是大圣。

在讲组件化的进阶开发篇之前，我想在全家桶实战篇的最后，用一讲的篇幅，来专门聊一下TypeScript。希望你在学完这一讲之后，能对TypeScript有一个全面的认识。

另外，今天我会设置很多实战练习，一边阅读一边敲代码的话，学习效果更好。而且，这次加餐中的全部代码都是可以在线完成的，建议你打开这个链接，把下面的每行代码都跟着敲一遍。

TypeScript入门

对于TypeScript，你首先要了解的是，TypeScript 可以在JavaScript的基础上，对变量的数据类型加以限制。TypeScript 中最基本的数据类型包括布尔、数字、字符串、null、undefined，这些都很好理解。

在下面的代码中，我们分别定义了这几个数据类型的变量，你能看到，当我们把number类型的变量price赋值字符串时，就会报错，当我们把数组 me 的第一个元素 me[0] 的值修改为数字时，也会报错。

let courseName: string = '玩转Vue 3全家桶'
let price: number = 129
price = '89' //类型报错
let isOnline: boolean = true
let courseSales: undefined
let timer: null = null
let me: [string, number] = ["大圣", 18]
me[0] = 1 //类型报错

当你不确定某个变量是什么类型时，你可以使用any作为这个变量的类型。你可以用any标记任何属性，可以修改任何数据，访问任何方法也不会报错。也就是说，在TypeScript中，当你把变量的类型标记为any后，这个变量的使用就和JavaScript没啥区别了，错误只会在浏览器里运行的时候才会提示。

let anyThing
let anyCourse: any = 1
anyCourse = 'xx'
console.log(anyCourse.a.b.c)

然后我们可以使用enum去定义枚举类型，这样可以把类型限制在指定的场景之内。下面的代码中我们可以把课程评分限制在好、非常好和嘎嘎好三个值之内。

enum 课程评分 {
  好,
  非常好,
  嘎嘎好
}
console.log(课程评分['好'] === 0)
console.log(课程评分[0] === '好')
let scores = [课程评分['好'], 课程评分['嘎嘎好'], 课程评分['非常好']]

然后我们可以通过学到的这些基础类型，通过组合的方式组合出新的类型，最常见的组合方式就是使用 | 实现类型联合。下面的代码中我们定义course1变量的类型为字符串或者数字，赋值为这两个类型都不会报错，还可以用来限制变量只能赋值为几个字符串的一个，score的取值只能是代码中三个值之一。

let course1: string | number = '玩转vue 3'
course1 = 1
course1 = true // 报错

type courseScore = '好' | '非常好' | '嘎嘎好'
let score1: courseScore = '好'
let score2: courseScore = '一般好' // 报错

通过interface接口可以定义对象的类型限制。下面代码中我们定义了极客时间课程的类型，课程名是字符串，价格使用number[] 语法定义类型为数字组成的数组，讲师头像是string或者boolean，并且通过 ?设置为可选属性，课程地址使用readonly设置为只读属性，如果对课程地址进行修改就会报错。

interface 极客时间课程 {
  课程名字: string,
  价格: number[],
  受众: string,
  讲师头像 ? : string | boolean,
  readonly 课程地址: string
}
let vueCourse: 极客时间课程 = {
  课程名字: '玩转Vue 3全家桶',
  价格: [59, '139'],
  讲师头像: false,
  课程地址: "time.geekbang.org"
}
vueCourse.课程地址 = 'e3.shengxinjing.cn' // 报错

然后我们学一下函数的类型限制。其实函数的定义，参数和返回值本质上也是变量的概念，都可以进行类型的定义。下面的代码中我们定义了参数x和y是数字，返回值也是数字的add函数，定义好参数和返回值类型，函数的类型自然也就确定了。

function 函数名(参数: 参数类型): 返回值类型 {} //大致语法
function add(x: number, y: number): number {
  return x + y;
}
add(1, 2);

我们也可以使用变量的方式去定义函数，直接使用(参数类型) =>返回值类型的语法去定义add1的变量类型，但是这样写出来的代码可读性稍差一些，我更建议你使用type或者interface关键字去定义函数的类型。下面代码中的addType和addType1都是很好的定义函数类型的方式：

let add1: (a: number, b: number) => number = function(x: number, y: number): number {
  return x + y;
}
type addType = (a: number, b: number) => number
let add2: addType = function(x: number, y: number): number {
  return x + y;
}

interface addType1 {
  (a: number, b: number): number
}
let add3: addType1 = function(x: number, y: number): number {
  return x + y;
}

如果你的函数本来就支持多个类型的参数，下面的代码中reverse函数既支持数字也支持字符串。我们的要求是如果参数是数字，返回值也要是数字，参数是字符串返回值也只能是字符串，所以参数和返回值都用number|string就没法精确地限制这个需求。我们需要使用函数重载的方式，定义多个函数的输入值和返回值类型，更精确地限制函数的类型。我们可以在Vue 3的源码看到Vue 3中ref函数的重载写法：

function reverse(x: number): number

function reverse(x: string): string

function reverse(x: number | string): number | string | void {
  if (typeof x === 'number') {
    return Number(x.toString().split('').reverse().join(''));
  } else if (typeof x === 'string') {
    return x.split('').reverse().join('');
  }
}

这样TypeScript里如何限制一个变量和函数类型，我们就大致入门了。这时候你肯定还有个疑问，日常开发中有很多浏览器上的变量和属性，这些怎么限制类型呢？

关于宿主环境里的类型，TypeScript全部都给我们提供了，我们可以直接在代码中书写：Window是window的类型，HTMLElement是dom元素类型，NodeList是节点列表类型，MouseEvent是鼠标点击事件的类型……关于更多TypeScript的内置类型，你可以在TypeScript的源码中看到：

let w: Window = window
let ele: HTMLElement = document.createElement('div')
let allDiv: NodeList = document.querySelectorAll('div')

ele.addEventListener('click', function(e: MouseEvent) {
  const args: IArguments = arguments
  w.alert(1)
  console.log(args)
}, false)

除了浏览器的API，我们还会用到很多第三方框架，比如Vue、Element3等等，这些框架现在都提供了完美的类型可以直接使用。在第18讲中我们使用下面的代码Vue导出的Ref来限定数据是ref包裹的响应式数据：

import {
  ref,
  Ref
} from 'vue'
interface Todo {
  title: string,
  done: boolean
}
let todos: Ref = ref([{
  title: '学习Vue',
  done: false
}])

泛型

那么聊完上面的内容，你就已经能使用TypeScript实现很多项目的开发，把所有变量和函数出现的地方都定义好类型，就可以在编译阶段提前规避出很多报错。然而TypeScript的能力可不止于此，TypeScript可以进行类型编程，这会极大提高TypeScript在复杂场景下的应用场景。

然后我们来看一下TypeScript中的泛型，这也是很多同学觉得TypeScript很难的最大原因。

首先我们看下面的代码，我们定一个idientity0函数，这个函数逻辑非常简单，就是直接返回参数，那么我们怎么确定返回值的类型呢？

因为输入值可以是任意属性，所以我们只能写出identity0这个函数，参数和返回值类型都是any，但是明显不能满足我们的需求。我们需要返回值的类型和参数一致，所以我们在函数名之后使用<>定一个泛型T，你可以理解这个T的意思就是给函数参数定义了一个类型变量，会在后面使用，相当于【type T = arg的类型】，返回值使用T这个类型就完成了这个需求。

function identity0(arg: any): any {
  return arg
}
// 相当于type T = arg的类型
function identity < T > (arg: T): T {
  return arg
}
identity < string > ('玩转vue 3全家桶') // 这个T就是string，所以返回值必须得是string
identity < number > (1)

有了泛型之后，我们就有了把函数参数定义成类型的功能，我们就可以实现类似高阶函数的类型函数。下面的代码中我们使用keyof语法获得已知类型VueCourse5的属性列表，相当于 ‘name’|‘price’：

interface VueCourse5 {
  name: string,
  price: number
}
type CourseProps = keyof VueCourse5 // 只能是name和price选一个
let k: CourseProps = 'name'
let k1: CourseProps = 'p' // 改成price

keyof可以帮助我们拆解已有类型，下一步我们需要使用extends来实现类型系统中的条件判断。我们定义类型函数ExtendsType，接受泛型参数T后，通过判断T是不是布尔值来返回不同的类型字符串，我们就可以通过ExtendsType传入不同的参数去返回不同的类型。

// T extends U ? X : Y 类型三元表达式

type ExtendsType < T > = T extends boolean ? "重学前端" : "玩转Vue 3"
type ExtendsType1 = ExtendsType < boolean > // type ExtendsType1='重学前端'
  type ExtendsType2 = ExtendsType < string > // type ExtendsType2='玩转Vue 3'

extends相当于TypeScript世界中的条件语句，然后in关键字可以理解为TypeScript世界中的遍历。下面的代码中我们通过 k in Courses语法，相当于遍历了Courses所有的类型作为CourseObj的属性，值的类型是number。

type Courses = '玩转Vue 3' | '重学前端'
type CourseObj = {
  [k in Courses]: number // 遍历Courses类型作为key
}
// 上面的代码等于下面的定义
// type CourseObj = {
// 玩转Vue 3: number;
// 重学前端: number;
// }

学完上面的语法，你就能完全搞懂第18讲里的getProperty函数。限制函数第二个参数只能是第一个参数的属性，并且返回值的类型，最后我们传递不存在的属性时，TypeScript就会报错。

// K extends keyof T限制K的类型必须是T的属性之一
// T[K]是值得类型
function getProperty < T, K extends keyof T > (o: T, name: K): T[K] {
  return o[name]
}
const coursePrice: CourseObj = {
  "玩转Vue 3": 129,
  "重学前端": 129
}
getProperty(coursePrice, '玩转Vue 3')
getProperty(coursePrice, '不学前端') // 报错

然后我再给你讲解最后一个关键字infer。让我们拥有了给函数的参数定义类型变量的能力，infer则是可以在extends之后的变量设置类型变量，更加细致地控制类型。下面的代码中我们定义了ReturnType类型函数，目的是返回传入函数的返回值类型。infer P的意思就是泛型T是函数类型，并且这个函数类型的返回类型是P。

type Foo = () => CourseObj

// 如果T是一个函数，并且函数返回类型是P就返回P
type ReturnType1 < T > = T extends() => infer P ? P : never
type Foo1 = ReturnType1 < Foo >

实战练习

有了上面的基础后，我们来几个实战的练习。以下所有的练习都可以在代码最后找到答案，我建议你一定要自己实现一遍才能有最多的收获。

代码地址：https://www.typescriptlang.org/docs/handbook/utility-types.html

下面的代码中，我们首先定义类型Todo，有title、desc和done三个属性：

interface Todo {
  title: string
  desc: string
  done: boolean
}

首先第一题是，我们需要实现类型函数Partial1，返回的类型是Todo所有的属性都变成可选项。

type partTodo = Partial1 < Todo >
// 和下面类型一致，鼠标移动到partTodo变量上也能看到
// type partTodo = {
// title?: string | undefined;
// desc?: string | undefined;
// done?: boolean | undefined;
// }

这一题的答案见下面的代码，使用K in keyof T遍历所有T的属性后，使用 ?标记为可选属性。

type Partial1 < T > = {
  [K in keyof T] ? : T[K]
}

TypeScript中还有很多类似的函数，包括Pick、Omit、Diff等函数，你都可以自行实现一遍，更多工具类型函数你可以移步TypeScript官方文档。你也可以结合下面的代码工具函数的实现，到留言区中讨论一下分别实现了什么功能。

type Exclude1 < T, K > = T extends K ? never : T
type Pick1 < T, K extends keyof T > = {
  [P in K]: T[P]
}
type Concat1 < T extends any[], U extends any[] > = [...T, ...U]

最后我们再来一个实战的练习，在实际项目开发中除了JavaScript、浏览器和第三方框架的类型，还有一个很重要的场景就是后端返回的数据类型。我们需要根据开发文档去定义好每个请求的类型，在下面的代码中，request作为发送请求的函数，可以传递url是字符串。那我们该如何定义Interface API，使其能够限制request只能有buy和comment两个请求地址，并且comment请求的参数中message是必传项呢？

import axios from 'axios'

function request(url: string, obj: any) {
  return axios.post(url, obj)
}
interface Api {

}
request('/course/buy', {
  id: 1
})
request('/course/comment', {
  id: 1,
  message: '嘎嘎好看'
})
request('/course/comment', {
  id: 1
}) //如果message必传 怎么类型提醒缺少参数
request('/course/404', {
  id: 1
}) //接口不存在 类型怎么需要报错

记得要先尝试自己实现一下，答案就在下面的代码中。在API类型中，我们定义了buy和comment两个属性，分别设置了当前请求所需要的参数都是必选项。然后我们通过在request中使用泛型T限制url，通过Api[T] 限制传递的参数，这样我们就得到了下面的报错示意图，在编译阶段就能通知你缺少message属性，并且404请求不存在，这可以极大提高我们开发的体验和效率。

import axios from 'axios'
interface Api {
  '/course/buy': {
    id: number
  },
  '/course/comment': {
    id: number,
    message: string
  }
}

function request < T extends keyof Api > (url: T, obj: Api[T]) {
  return axios.post(url, obj)
}

request('/course/buy', {
  id: 1
})
request('/course/comment', {
  id: 1,
  message: '嘎嘎好看'
})
request('/course/comment', {
  id: 1
}) //如果message必传 怎么类型提醒缺少参数
request('/course/404', {
  id: 1
}) //接口不存在 类型怎么需要报错

更多类型的练习，你可以访问type-challenges 这个项目自行尝试。现在你再去看项目或者框架源码中的TypeScript，是不是就没有那么晦涩了呢。

总结

今天想聊的TypeScript就结束啦，总结一下我们今天学到的内容吧。

首先我们学习了TypeScript的基本类型，包括数字字符串等等，然后我们可以通过这些基础类型组合出复杂的类型组合，并且可以通过type和interface关键字定义复杂对象的类型和函数的类型。

然后浏览器的相关变量和API类型TypeScript都已经内置了，包括HTMLElement、MouseEvent等等，第三方框架的类型我们可以直接导入使用，Vue中的Ref类型我们就会经常用来定义ref函数包裹的响应式数据。

接着我们学习了TypeScript进阶中最重要的概念：泛型。通过泛型我们可以在函数内部把类型变成变量使用，并且通过keyof、in、extends、infer等关键字组合出复杂的类型函数，可以更加精确地组合现有类型。

最后我们通过定义前后端的接口类型的案例，演示了在实战中我们如何通过类型系统提高联调和开发的体验。

有了这些TypeScript的知识储备，你才能更好地在Vue项目中使用TypeScript。由于JSX的本质就是JavaScript，所以TypeScript的诞生也给了JSX更好的类型推导，这是JSX相比于Template的另外一个优势。关于Vue和TypeScript开发组件的内容，我们下一讲开始全部使用TypeScript来实现。

思考题

最后，留一个思考题：我们实现的Partial1可以把类型的属性变成可选的，如果传递的类型是嵌套很多层的，如何实现Partial1的递归版本，才能把所有嵌套的属性都变成可选的呢？

欢迎你在评论区分享你的答案，也欢迎你把这一讲的内容分享给你的同事和朋友们，我们下一讲再见。