TypeScript类型学习实练-高级类型1这是我参与11月更文挑战的第25天, 活动详情查看：2021最后一次更文挑战

这是我参与11月更文挑战的第25天，活动详情查看：2021最后一次更文挑战

前言

前面更文通过学习 TS 的类型/枚举/函数/类/泛型等基础类型和特殊类型, 已经对 TS 有了初步的了解熟悉, 其中有和 JS 中并存的知识点, 也有相对 JS 没有的, 本文继续来学习 TS 重要知识点 -- 高级类型1

现在 TypeScript + Vue3 应用已经挺广的, 不学习是会跟不上大厂的节奏. 学习 TypeScript(虽然觉得也是可选的,但还是要学,真卷...) 这里有记录学习 TypeScript 的过程, 收录在 TypeScript 实战专栏

Typescript 相关文档

Typescript 官网地址: typescriptlang.org/zh/

Typescript 中文文档：高级类型

TypeScript 高级类型

本文来学习 TypeScript里的高级类型:

交叉类型（Intersection Types）
联合类型（Union Types）
枚举成员类型
可辨识联合（Discriminated Unions）
索引类型（Index types）

1. 交叉类型（Intersection Types）

交叉类型是通过将多个类型合并为一个类型。这样可以把现有的多种类型叠加到一起成为一种类型，它包含了所需的所有类型的特性: T & U & 也就是这个类型的对象同时拥有了 T 和 U ... 这些类型的成员. 在 JavaScript 中有很多使用的地方: mixin 或其他不适合典型地面向对象的地方使用交叉类型.

function mixin<T, U>(first: T, second: U): T & U {
  let result = <T & U>{}
  ///...
  for (let id in first) {
    ;(<T>result)[id] = first[id]
  }
  for (let id in second) {
    if (!result.hasOwnProperty(id)) {
      ;(<U>result)[id] = second[id]
    }
  }
  return result
}

/// xn 同时混入了 x 和 n 属性
let xn = mixin({ x: 'x' }, { n: 213 })
let xnx = xn.x
let xnn = xn.n

3. 枚举成员类型

枚举: 当每个枚举成员都是用字面量初始化的时候枚举成员是具有类型的

5. 索引类型（Index types）

通过利用索引类型, 让编译器能够检查使用了动态属性名的代码, 比如: 一个常见的 JS 的模式就是从对象中选取属性的子集:

在 TypeScript 里使用下面的函数，通过索引类型查询和索引访问操作符: 定义一个函数:

function mapData(dataList, pros) {
  return pros.map((p) => dataList[p])
}

function mapData<T, K extends keyof T>(dataList: T, pros: K[]): T[K][] {
  return pros.map((p) => dataList[p])
}

interface Person {
  name: string
  id: number
}
let person: Person = {
  name: 'xn213',
  id: 213,
}
let strings: string[] = mapData(person, ['name']) //  string[]

Vue3 学习实战系列更文:

Vue3 源码仓库 vue-next : github.com/vuejs/vue-n…
Vue3.x 官方中文文档: v3.cn.vuejs.org

TypeScript 系列: