[JavaScript知识库]Typescript——基础巩固（2）

函数类型

函数是JavaScript中非常重要的组成部分，typeScript也允许我们指定函数的参数和返回值的类型。

声明函数时，可以在每个参数后添加类型注解，用以声明函数接受的参数类型：

function sum(num1: number, num2: number) {
  return num1 + num2
}

sum(123, 321)

我们也可以为函数添加返回值的类型注解，这个注解出现在函数列表的后面：

function sum(num1: number, num2: number)：number {
  return num1 + num2
}

sum(123, 321)

注意：匿名函数的参数

匿名函数与函数声明会有一些不同：当一个函数出现在typeScript可以确定该函数会被如何调用的地方时；该函数的参数会自动指定类型；我们并没有指定item的类型，但是item是一个string类型：这是因为TypeScript会根据forEach函数的类型以及数组的类型推断出item的类型；这个过程称之为上下文类型（contextual typing），因为函数执行的上下文可以帮助确定参数和返回值的类型；

const names = ["abc", "cba", "nba"]
// item根据上下文的环境推导出来的, 这个时候可以不添加的类型注解
// 上下文中的函数: 可以不添加类型注解
names.forEach(function(item) {
  console.log(item.split(""))
})

对象类型

如果我们希望限定一个函数接受的参数是一个对象，我们可以使用对象类型；

function printPoint(point: {x: number, y: number}) {
  console.log(point.x);
  console.log(point.y)
}

printPoint({x: 123, y: 321})
export {}

在这里我们使用了一个对象来作为类型：

? 在对象里我们可以添加属性并且告知typeScript该属性需要是什么类型；

? 属性之间可以使用 , 或者 ; 来分割，最后一个分隔符是可选的；

? 每个属性的类型部分也是可选的，如果不指定，那么就是any类型；

可选类型

对象类型也可以指定哪些属性是可选的，可以在属性的后面添加一个?：

function printPoint(point: {x: number, y: number, z?: number}) {
  console.log(point.x)
  console.log(point.y)
  console.log(point.z)
}

printPoint({x: 123, y: 321})
printPoint({x: 123, y: 321, z: 111})

export {}

联合类型

联合类型

typeScript的类型系统允许我们使用多种运算符，从现有类型中构建新类型。 我们来使用第一种组合类型的方法：联合类型（Union Type） 联合类型是由两个或者多个其他类型组成的类型；表示可以是这些类型中的任何一个值；联合类型中的每一个类型被称之为联合成员（union’s members）；

// number|string 联合类型
function printID(id: number|string|boolean) {
  // 使用联合类型的值时, 需要特别的小心
  // narrow: 缩小
  if (typeof id === 'string') {
    // TypeScript帮助确定id一定是string类型
    console.log(id.toUpperCase())
  } else {
    console.log(id)
  }
}

printID(123)
printID("abc")
printID(true)

类型别名

比如：当联合类型比较繁多或者参数为对象类型时，我们便可以借助于类型别名。

type IDType = string | number | boolean
type PointType = {
  x: number
  y: number
  z?: number
}

function printId(id: IDType) {
}

function printPoint(point: PointType) {
}