TypeScript 期中考试开始了！

前言

相信这段时间来，对 TypeScript 感兴趣的小伙伴们已经把这个神器给系统的学习了一遍了吧。若是计划开始学习可是尚未开始，或者没有找到资料的同窗，能够看下我在以前文章中前端进阶指南找一下 TypeScript 部分的教程，自行学习。html

本文从最近在 Github 上比较火的仓库 typescript-exercises 入手，它的中文介绍是「富有挑战性的 TypeScript 练习集」。里面包含了 15 个 TypeScript 的练习题，我会从其中挑选出几个比较有价值的题目，一块儿来解答一下。前端

目标

来看下这个仓库的发起者所定下的目标，让每一个人都学会如下知识点的实战运用：git

Basic typing.
Refining types.
Union types.
Merged types.
Generics.
Type declarations.
Module augmentation.
Advanced type mapping.

真的都是一些很是有难度且实用的知识点，掌握了它们必定会让咱们在编写 TypeScript 类型的时候如虎添翼。github

挑战

exercise-00

题目

import chalk from "chalk"

// 这里须要补全
const users: unknown[] = [
  {
    name: "Max Mustermann",
    age: 25,
    occupation: "Chimney sweep",
  },
  {
    name: "Kate Müller",
    age: 23,
    occupation: "Astronaut",
  },
]

// 这里须要补全
function logPerson(user: unknown) {
  console.log(` - ${chalk.green(user.name)}, ${user.age}`)
}

console.log(chalk.yellow("Users:"))
users.forEach(logPerson)
复制代码

解答

第一题只是个热身题，考察对接口类型定义的掌握，直接定义 User 接口便可实现。typescript

interface User {
  name: string
  age: number
  occupation: string
}

const users: User[] = [
  {
    name: "Max Mustermann",
    age: 25,
    occupation: "Chimney sweep",
  },
  {
    name: "Kate Müller",
    age: 23,
    occupation: "Astronaut",
  },
]

function logPerson(user: User) {
  console.log(` - ${chalk.green(user.name)}, ${user.age}`)
}

console.log(chalk.yellow("Users:"))
users.forEach(logPerson)
复制代码

或者利用类型推导，users 数组会自动推断出类型：数据库

const users = [
  {
    name: "Max Mustermann",
    age: 25,
    occupation: "Chimney sweep",
  },
  {
    name: "Kate Müller",
    age: 23,
    occupation: "Astronaut",
  },
]
复制代码

在 VSCode 中，鼠标放到 users 变量上便可看到类型被自动推断出来了：npm

{
  name: string
  age: number
  occupation: string
}
;[]
复制代码

那么利用 typeof 关键字，配合索引查询，咱们也能够轻松取得这个类型。这里 number 的意思就是查找出 users 的全部数字下标对应的值的类型集合。数组

type User = typeof users[number]
复制代码

这个仓库提供了每道题的答题机制，执行 npm run 0 对应题号，看到结果便可证实编译经过，答案正确。markdown

execsise-01

题目

最初，咱们在数据库中只有 User 类型，后来引入了 Admin 类型。把这两个类型组合成 Person 类型以修复错误。app

interface User {
  name: string
  age: number
  occupation: string
}

interface Admin {
  name: string
  age: number
  role: string
}

const persons: User[] /* <- Person[] */ = [
  {
    name: "Max Mustermann",
    age: 25,
    occupation: "Chimney sweep",
  },
  {
    name: "Jane Doe",
    age: 32,
    role: "Administrator",
  },
  {
    name: "Kate Müller",
    age: 23,
    occupation: "Astronaut",
  },
  {
    name: "Bruce Willis",
    age: 64,
    role: "World saver",
  },
]

function logPerson(user: User) {
  console.log(` - ${chalk.green(user.name)}, ${user.age}`)
}

persons.forEach(logPerson)
复制代码

解答

本题考查联合类型的使用：

// 定义联合类型
type Person = User | Admin

const persons: Person[] /* <- Person[] */ = [
  {
    name: "Max Mustermann",
    age: 25,
    occupation: "Chimney sweep",
  },
  {
    name: "Jane Doe",
    age: 32,
    role: "Administrator",
  },
  {
    name: "Kate Müller",
    age: 23,
    occupation: "Astronaut",
  },
  {
    name: "Bruce Willis",
    age: 64,
    role: "World saver",
  },
]

function logPerson(user: Person) {
  console.log(` - ${chalk.green(user.name)}, ${user.age}`)
}
复制代码

exercise-02

根据上题中定义出的 Person 类型，如今须要一个方法打印出它的实例：

题目

function logPerson(person: Person) {
  let additionalInformation: string
  if (person.role) {
    // ❌ 报错 Person 类型中不必定有 role 属性
    additionalInformation = person.role
  } else {
    // ❌ 报错 Person 类型中不必定有 occupation 属性
    additionalInformation = person.occupation
  }
  console.log(
    ` - ${chalk.green(person.name)}, ${person.age}, ${additionalInformation}`,
  )
}
复制代码

解答

本题考查 TypeScript 中的「类型保护」，TypeScript 的程序流分析使得某些判断代码包裹之下的代码中，类型能够被进一步收缩。

in 操做符：

function logPerson(person: Person) {
  let additionalInformation: string
  if ("role" in person) {
    additionalInformation = person.role
  } else {
    additionalInformation = person.occupation
  }
  console.log(
    ` - ${chalk.green(person.name)}, ${person.age}, ${additionalInformation}`,
  )
}
复制代码

函数返回值中的 is 推断，这个语法是 TypeScript 的「Type Predicates」类型谓词：

function isAdmin(user: Person): user is Admin {
  return user.hasOwnProperty("role")
}

function logPerson(person: Person) {
  let additionalInformation: string
  if (isAdmin(person)) {
    additionalInformation = person.role
  } else {
    additionalInformation = person.occupation
  }
  console.log(
    ` - ${chalk.green(person.name)}, ${person.age}, ${additionalInformation}`,
  )
}
复制代码

exercise-04

题目

本题定义了一个 filterUsers 方法，用来经过 person 中的某些字段来筛选出用户的子集。

function filterUsers(persons: Person[], criteria: User): User[] {
  return persons.filter(isUser).filter((user) => {
    let criteriaKeys = Object.keys(criteria) as (keyof User)[]
    return criteriaKeys.every((fieldName) => {
      return user[fieldName] === criteria[fieldName]
    })
  })
}

console.log(chalk.yellow("Users of age 23:"))

filterUsers(
  persons,
  // ❌ 报错，criteria 定义的是精确的 User 类型，少字段了。
  {
    age: 23,
  },
).forEach(logPerson)
复制代码

能够看出，因为 filterUsers 的第二个筛选参数的类型被精确的定义为 User，因此只传入它的一部分字段 age 就会报错。

解答

本题考查 [mapped-types](https://www.typescriptlang.org/docs/handbook/advanced-types.html#mapped-types) 映射类型，

type Criteria = {
  [K in keyof User]?: User[K]
}

function filterUsers(persons: Person[], criteria: Criteria): User[] {
  return persons.filter(isUser).filter((user) => {
    let criteriaKeys = Object.keys(criteria) as (keyof User)[]
    return criteriaKeys.every((fieldName) => {
      return user[fieldName] === criteria[fieldName]
    })
  })
}
复制代码

Criteria 利用了映射类型，把 User 的 key 值遍历了一遍，而且加上了 ? 标志表明字段都是可选的，便可完成任务。

也能够利用内置类型 Partial，这个类型用于把另外一个类型的字段所有转为可选。

function filterUsers(persons: Person[], criteria: Partial<User>): User[] {}
复制代码

exercise-05

题目

function filterPersons( persons: Person[], personType: string, criteria: unknown, ): unknown[] {}

let usersOfAge23: User[] = filterPersons(persons, "user", { age: 23 })
let adminsOfAge23: Admin[] = filterPersons(persons, "admin", { age: 23 })
复制代码

解答

本题返回值类型便可以是 User,也能够是Admin，而且很明显这个结果是由第二个参数是 'user' 仍是 'admin' 所决定。

利用函数重载的功能，能够轻松实现，针对每种不一样的 personType 参数类型，咱们给出不一样的返回值类型：

function filterPersons(
  persons: Person[],
  personType: "admin",
  criteria: Partial<Person>,
): Admin[]
function filterPersons(
  persons: Person[],
  personType: "user",
  criteria: Partial<Person>,
): User[]
function filterPersons(
  persons: Person[],
  personType: string,
  criteria: Partial<Person>,
) {}

let usersOfAge23: User[] = filterPersons(persons, "user", { age: 23 })
let adminsOfAge23: Admin[] = filterPersons(persons, "admin", { age: 23 })
复制代码

exercise-06

题目

function swap(v1, v2) {
  return [v2, v1]
}

function test1() {
  console.log(chalk.yellow("test1:"))
  const [secondUser, firstAdmin] = swap(admins[0], users[1])
  logUser(secondUser)
  logAdmin(firstAdmin)
}

function test2() {
  console.log(chalk.yellow("test2:"))
  const [secondAdmin, firstUser] = swap(users[0], admins[1])
  logAdmin(secondAdmin)
  logUser(firstUser)
}
复制代码

解答

本题的关键点是 swap 这个方法，它便可以接受Admin类型为参数，也能够接受 User 类型为参数，而且还须要根据传入参数的顺序把它们倒过来放在数组中放回。

也就是说传入的是 v1: User, v2: Admin，须要返回 [Admin, User] 类型。

这题就比较有难度了，首先须要用到泛型来推断出参数类型，而且和结果关联起来：

function swap<T, K>(v1: T, v2: K) {
  return [v2, v1]
}
复制代码

此时结果没有按照咱们预期的被推断成 [K, T]，而是被推断成了 (K | T)[]，这是不符合要求的。

这是由于 TypeScript 默认咱们数组中的元素是可变的，因此它会「悲观的」推断咱们可能会改变元素的顺序。鼠标放到运行函数时的swap上，咱们能够看出类型被推断为了：

function swap<Admin, User>(v1: Admin, v2: User): (Admin | User)[] 复制代码

要改变这一行为，咱们加上 as const 来声明它为常量，严格保证顺序。

function swap<T, K>(v1: T, v2: K) {
  return [v2, v1] as const
}
复制代码

此时再看看 swap的推断：

function swap<Admin, User>(v1: Admin, v2: User): readonly [User, Admin] 复制代码

类型被自动加上了 readonly，而且也严格的维持了顺序，太棒啦。

总结

先用其中的几道题练练手，到第六题的时候，已经涉及到了一些进阶的用法，很是有挑战性。不知道小伙伴们对于这样的作题形式是否感兴趣，还剩下很多有挑战性的题目，若是反馈不错的话，我会继续更新这个系列。

本文仓库地址：

github.com/sl1673495/t…

❤️ 感谢你们

1.若是本文对你有帮助，就点个赞支持下吧，你的「赞」是我创做的动力。

2.关注公众号「前端从进阶到入院」便可加我好友，我拉你进「前端进阶交流群」，你们一块儿共同交流和进步。