TypeScript 高级类型总结，什么是TypeScript（含代码案例）

TypeScript 是一种类型化的语言，允许你指定变量、函数参数、返回的值和对象属性的类型。

以下是 TypeScript 高级类型的使用方法总结，而且带有例子。

Intersection 类型

Intersection 类型是一种把对多种类型进行组合的方法。这意味着你可以把给定的多种类型合并，并得到一个带有全部属性的新类型。

type LeftType = {
  id: number
  left: string
}
type RightType = {
  id: number
  right: string
}
type IntersectionType = LeftType & RightType
function showType(args: IntersectionType) {
  console.log(args)
}
showType({ id: 1, left: "test", right: "test" })
// Output: {id: 1, left: "test", right: "test"}

代码中的 IntersectionType ”组合了两种类型：LeftType 和 RightType，并使用 & 符号来构造交 intersection 类型。

Union 类型

Union 类型用来在给定变量中使用不同类型的注释。

type UnionType = string | number
function showType(arg: UnionType) {
  console.log(arg)
}
showType("test")
// Output: test
showType(7)
// Output: 7

showType 函数是一个 union 类型，它能够接受字符串和数字作为参数。

范型类型

泛型类型是一种用来重用给定类型的一部分的方式。它用来处理参数传入的类型 T。

function showType(args: T) {
  console.log(args)
}
showType("test")
// Output: "test"
showType(1)
// Output: 1

要构造一个泛型类型，需要用到尖括号并将 T 作为参数进行传递。

在下面的代码中，我用的是 T(这个名称随你决定)这个名字，然后使用不同的类型注释调用了两次 showType 函数，因为它是可以重用的。

interface GenericType {
  id: number
  name: T
}
function showType(args: GenericType) {
  console.log(args)
}
showType({ id: 1, name: "test" })
// Output: {id: 1, name: "test"}
function showTypeTwo(args: GenericType) {
  console.log(args)
}
showTypeTwo({ id: 1, name: 4 })
// Output: {id: 1, name: 4}

还有另一个例子，例子中有一个接口 GenericType，这个接口接收通用类型 T。由于它是可重用的，因此我们可以用字符串和数字来调用它。

interface GenericType<T, U> {
  id: T
  name: U
}
function showType(args: GenericType<number, string>) {
  console.log(args)
}
showType({ id: 1, name: "test" })
// Output: {id: 1, name: "test"}
function showTypeTwo(args: GenericType<string, string[]>) {
  console.log(args)
}
showTypeTwo({ id: "001", name: ["This", "is", "a", "Test"] })
// Output: {id: "001", name: Array["This", "is", "a", "Test"]}

泛型类型可以接收多个参数。在例子中传入两个参数：T 和 U，然后将它们用作属性的类型注释。也就是说，我们现在可以给这个该接口并提供两个不同的类型作为参数。

实用工具类型

TypeScript 提供了方便的内置实用工具，可帮助我们轻松地操作类型。在使用时需要将要处理的类型传递给 <>。

(1) Partial

Partial

Partial 允许你将所有类型为 T 的属性设为可选。它将在每个字段旁边添加一个 ? 标记。

interface PartialType {
  id: number
  firstName: string
  lastName: string
}
function showType(args: Partial) {
  console.log(args)
}
showType({ id: 1 })
// Output: {id: 1}
showType({ firstName: "John", lastName: "Doe" })
// Output: {firstName: "John", lastName: "Doe"}

代码中有一个名为 PartialType 的接口，它作为函数 showType() 的参数的类型注释。要想使属性是可选的，必须用到 Partial 关键字，并传入 PartialType 类型作为参数。现在所有字段都变成了可选的。

(2) Required

Required

与 Partial 不同，Required 使所有类型为 T 的属性成为必需的。

interface RequiredType {
  id: number
  firstName?: string
  lastName?: string
}
function showType(args: Required) {
  console.log(args)
}
showType({ id: 1, firstName: "John", lastName: "Doe" })
// Output: { id: 1, firstName: "John", lastName: "Doe" }
showType({ id: 1 })
// Error: Type '{ id: number: }' is missing the following properties from type 'Required': firstName, lastName

即使在之前先将它们设为可选的，Required 也会使所有符合条件的属性成为必需的。而且如果省略掉属性的话TypeScript 将会引发错误。

(3) Readonly

Readonly

这个类型会对所有类型为 T 的属性进行转换，使它们无法被重新赋值。

interface ReadonlyType {
  id: number
  name: string
}
function showType(args: Readonly) {
  args.id = 4
  console.log(args)
}
showType({ id: 1, name: "Doe" })
// Error: 无法给'id'重新赋值，因为它是只读属性。

在代码中用 Readonly 来使 ReadonlyType 的属性不可被重新赋值。如果你一定要为这些字段赋值的话，将会引发错误。

Besides that, you can also use the keyword readonly in front of a property to make it not reassignable. 除此之外，还可以在属性前面使用关键字“ readonly”，以使其无法重新分配。

interface ReadonlyType {
  readonly id: number
  name: string
}

(4) Pick

Pick<T，K>

它允许你通过选择某个类型的属性 k ，从现有的模型 T 中创建一个新类型。

interface PickType {
  id: number
  firstName: string
  lastName: string
}
function showType(args: Pick<PickType, "firstName" | "lastName">) {
  console.log(args)
}
showType({ firstName: "John", lastName: "Doe" })
// Output: {firstName: "John"}
showType({ id: 3 })
// Error: Object literal may only specify known properties, and 'id' does not exist in type 'Pick<PickType, "firstName" | "lastName">'

Pick 与前面看到的那些有点不同。它需要两个参数 —— T 是要从中选择元素的类型，k 是要选择的属性。还可以通用管道符号 (|)将它们分开来选择多个字段。

(5) Omit

Omit<T，K>

Omit 与Pick 相反。它从类型 T 中删除 K 属性。

interface PickType {
  id: number
  firstName: string
  lastName: string
}
function showType(args: Omit<PickType, "firstName" | "lastName">) {
  console.log(args)
}
showType({ id: 7 })
// Output: {id: 7}
showType({ firstName: "John" })
// Error: Object literal may only specify known properties, and 'firstName' does not exist in type 'Pick<PickType, "id">'

Omit 的工作方式与 Pick 类似。

1 2