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

(6) Extract

Extract<T，U>

Extract 使你通过选择出现在两个不同类型中的属性来构造类型。它从 T 中提取所有可分配给 U 的属性。

interface FirstType {
  id: number
  firstName: string
  lastName: string
}
interface SecondType {
  id: number
  address: string
  city: string
}
type ExtractExtractType = Extract
// Output: "id"

在代码中的两个接口里有共有的属性 id。通过 Extract 可以把 id 提取出来。如果你有多个共享字段，Extract 将会提取所有相似的属性。

(7) Exclude

与 Extract 不同，Exclude 通过排除已经存在于两个不同类型中的属性来构造类型。它排除了所有可以分配给 U 的字段。

interface FirstType {
  id: number
  firstName: string
  lastName: string
}
interface SecondType {
  id: number
  address: string
  city: string
}
type ExcludeExcludeType = Exclude
// Output; "firstName" | "lastName"

在上面的代码中，属性 firstName 和 lastName 可分配给 SecondType 类型，因为它们在那里不存在。通过 Extract 可以按预期返回这些字段。

(8) Record

Record<K，T>

Record 可以帮你构造一个类型，该类型具有给定类型 T 的一组属性 K。当把一个类型的属性映射到另一个类型时，用 Record 非常方便。

interface EmployeeType {
  id: number
  fullname: string
  role: string
}
let employees: Record<number, EmployeeType> = {
  0: { id: 1, fullname: "John Doe", role: "Designer" },
  1: { id: 2, fullname: "Ibrahima Fall", role: "Developer" },
  2: { id: 3, fullname: "Sara Duckson", role: "Developer" },
}
// 0: { id: 1, fullname: "John Doe", role: "Designer" },
// 1: { id: 2, fullname: "Ibrahima Fall", role: "Developer" },
// 2: { id: 3, fullname: "Sara Duckson", role: "Developer" }

Record 的工作方式相对简单。在代码中，它期望用 number 作为类型，这就是我们把 0、1 和 2 作为 employees 变量的键的原因。如果试图将字符串用作属性，则会引发错误。接下来，属性集由 EmployeeType 给出，因此该对象具有字段 id、 fullName 和 role。

(9) NonNullable

NonNullable

它允许你从类型 T 中删除 null 和 undefined。

type NonNullableType = string | number | null | undefined
function showType(args: NonNullable) {
  console.log(args)
}
showType("test")
// Output: "test"
showType(1)
// Output: 1
showType(null)
// Error: Argument of type 'null' is not assignable to parameter of type 'string | number'.
showType(undefined)
// Error: Argument of type 'undefined' is not assignable to parameter of type 'string | number'.

在代码中吧 NonNullableType 作为参数传给了 NonNullable，NonNullable通过从该类型中排除 null 和 undefined 来构造新类型。也就是说，如果你传递可空的值，TypeScript 将会引发错误。

顺便说一句，如果把 –strictNullChecks 标志添加到 tsconfig 文件，TypeScript 将应用非空性规则。

映射类型

映射类型允许你获取现有模型并将其每个属性转换为新类型。注意，前面介绍的一些实用工具类型也是映射类型。

type StringMap = {
  [P in keyof T]: string
}
function showType(arg: StringMap<{ id: number; name: string }>) {
  console.log(arg)
}
showType({ id: 1, name: "Test" })
// Error: Type 'number' is not assignable to type 'string'.
showType({ id: "testId", name: "This is a Test" })
// Output: {id: "testId", name: "This is a Test"}

StringMap<> 会将传入的任何类型转换为字符串。也就是说，如果在函数 showType() 中使用它，那么接收到的参数必须是字符串，否则 TypeScript 将会报错。

类型保护

类型保护使你可以用运算符检查变量或对象的类型。它实际上是一个检查用 typeof、instanceof 或 in 所返回类型的条件块。

(1) typeoff

function showType(x: number | string) {
  if (typeof x === "number") {
    return `The result is ${x   x}`
  }
  throw new Error(`This operation can't be done on a ${typeof x}`)
}
showType("I'm not a number")
// Error: This operation can't be done on a string
showType(7)
// Output: The result is 14

代码中有一个普通的 JavaScript 条件块，该块检查通过 typeof 检测到的参数的类型。在这种情况下就保护你的类型了。

(2) instanceof

class Foo {
  bar() {
    return "Hello World"
  }
}
class Bar {
  baz = "123"
}
function showType(arg: Foo | Bar) {
  if (arg instanceof Foo) {
    console.log(arg.bar())
    return arg.bar()
  }
  throw new Error("The type is not supported")
}
showType(new Foo())
// Output: Hello World
showType(new Bar())
// Error: The type is not supported

和像前面的例子一样，这也是一个类型保护，它检查接收到的参数是否为 Foo 类的一部分，并对其进行处理。

(3) in

interface FirstType {
  x: number
}
interface SecondType {
  y: string
}
function showType(arg: FirstType | SecondType) {
  if ("x" in arg) {
    console.log(`The property ${arg.x} exists`)
    return `The property ${arg.x} exists`
  }
  throw new Error("This type is not expected")
}
showType({ x: 7 })
// Output: The property 7 exists
showType({ y: "ccc" })
// Error: This type is not expected

在代码中，in 运算符用来检查对象上是否存在属性 x。

Conditional 类型

用来对两种类型进行测试，并根据测试的结果选择其中的一种。

type NonNullable = T extends null | undefined ? never : T

这个例子中的 NonNullable 检查该类型是否为 null 并根据该类型进行处理。

1 2