TypeScript联合类型,交叉类型和类型保护

// 通过 | 符号定义联合类型
let value: number | boolean | string = '一碗周'
value = 18

// 定义三个普通接口类型
interface Name {
  name: string
}
interface Age {
  age: number
}
interface Hobby {
  hobby: string
}
// 定义一个对象，该对象为上面三个对象的联合类型
let person: Name & Age & Hobby = {
  // 如果少分配一个类型将会抛出异常
  name: '一碗周',
  age: 18,
  hobby: 'coding',
}

// 定义一个包含number或者string的数组
const arr: (number | string)[] = [1, '数字']
// 遍历数组返回第一个数字
const getValue: (arr: (number | string)[]) => number = (
  arr: (number | string)[],
): number => {
  for (let i = 0; i < arr.length; i++) {
    // 如果当前值转换为数字时候不是一个 NaN 则返回
    if (!isNaN(Number(arr[i]))) {
      return arr[i] // 不能将类型“string | number”分配给类型“number”。
    }
  }
}

const getValue: (arr: (number | string)[]) => number = (
  arr: (number | string)[],
): number => {
  for (let i = 0; i < arr.length; i++) {
    // 如果当前值转换为数字时候不是一个 NaN 则返回
    if (!isNaN(Number(arr[i]))) {
      return arr[i] as number // 告诉 编译器 我返回的就是一个 number
    }
  }
}

// 使用自定义类型保护
// 1. 定义一个函数 其返回值是一个 类型谓词，即 parameterName is Type 也就是 参数名 is 类型 的形式
function isNumber(value: number | string): value is number {
  // 如果返回 true 则说明 传入的 value 是 is 后面的type
  return !isNaN(Number(value))
}
// 2. 定义一个获取数字的函数
const getNumber: (value: number | string) => number = (
  value: number | string,
): number => {
  // 如果调用 isNumber 的值为 true 则说明 value 是一个数字，所以将数字返回
  if (isNumber(value)) {
    return value
  }
}
// 3. 调用获取最终的数值
const getValue: (arr: (number | string)[]) => number = (
  arr: (number | string)[],
): number => {
  for (let i = 0; i < arr.length; i++) {
    // 如果返回数字，转换为 boolean 值为 true
    if (getNumber(arr[i]) || getNumber(arr[i]) === 0) {
      return getNumber(arr[i])
    }
  }
}

// 1. 定义一个获取数字的函数
const getNumber: (value: number | string) => number = (
  value: number | string,
): number => {
  // 判断当前是否为字符串，如果是返回当前值
  if (typeof value === 'number') {
    return value
  }
}
// 2. 调用获取最终的数值
const getValue: (arr: (number | string)[]) => number = (
  arr: (number | string)[],
): number => {
  for (let i = 0; i < arr.length; i++) {
    // 如果返回数字，转换为 boolean 值为 true
    if (getNumber(arr[i]) || getNumber(arr[i]) === 0) {
      return getNumber(arr[i])
    }
  }
}

/**
 * 由于 instanceof 仅仅支持引用类型，不支持原始类型，所以说这里需要进行一下改动，将数组修改为如下：
 */
const arr2: (Number | String)[] = [new String('彼岸繁華'), new Number(10)]
// 1. 定义一个获取数字的函数
const getNumber: (value) => number = (value): number => {
  // 判断当前是否为 Number 类型，将当前值转换为字符串返回
  if (value instanceof Number) {
    return Number(value)
  }
}
// 2. 调用获取最终的数值
const getValue: (arr: (Number | String)[]) => number = (
  arr: (Number | String)[],
): number => {
  for (let i = 0; i < arr.length; i++) {
    // 如果返回数字，转换为 boolean 值为 true
    if (getNumber(arr[i]) || getNumber(arr[i]) === 0) {
      return getNumber(arr[i])
    }
  }
}