TypeScript学习笔记（四）

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第31天，点击查看活动详情

前言

大家好呀，我是L同学。在上篇文章TypeScript学习笔记（三）中，我们学习了TypeScript的相关知识点，包括TypeScript的原始类型、数组类型、联合类型、类型别名等相关知识点。在本篇文章中，我们将学习TypeScript的相关知识点，包括函数类型的基本使用、void 类型、可选参数、参数默认值等内容。

函数类型

基本使用

函数的类型实际上指的是：函数参数和返回值的类型。为函数指定类型的两种方式：单独指定参数、返回值的类型；同时指定参数、返回值的类型。

1. 单独指定参数、返回值的类型。

// 函数声明
function add(num1: number, num2: number): number {
  return num1 + num2
}

// 箭头函数
const add = (num1: number, num2: number): number => {
  return num1 + num2
}

2. 同时指定参数、返回值的类型。当函数作为表达式时，可以通过类似箭头函数形式的语法来为函数添加类型。这种形式只适用于函数表达式。

type AddFn = (num1: number, num2: number) => number

const add: AddFn = (num1, num2) => {
  return num1 + num2
}

void 类型

如果函数没有返回值，那么，函数返回值类型为：void。

function greet(name: string): void {
  console.log('Hello', name)
}

如果一个函数没有返回值，此时，在 TS 的类型中，应该使用 void 类型。

// 如果什么都不写，此时，add 函数的返回值类型为： void
const add = () => {}
// 这种写法是明确指定函数返回值类型为 void，与上面不指定返回值类型相同
const add = (): void => {}

// 但，如果指定 返回值类型为 undefined，此时，函数体中必须显示的 return undefined 才可以
const add = (): undefined => {
  // 此处，返回的 undefined 是 JS 中的一个值
  return undefined
}

可选参数

使用函数实现某个功能时，参数可以传也可以不传。这种情况下，在给函数参数指定类型时，就用到可选参数了。比如，数组的 slice 方法，可以 slice() 也可以 slice(1) 还可以 slice(1, 3)。 可选参数在可传可不传的参数名称后面添加 ?（问号）。

function mySlice(start?: number, end?: number): void {
  console.log('起始索引：', start, '结束索引：', end)
}

需要注意的是，可选参数只能出现在参数列表的最后，也就是说可选参数后面不能再出现必选参数。

参数默认值

参数默认值和可选参数互斥的，一般只需要指定一种即可。

对象类型

JS 中的对象是由属性和方法构成的，而 TS 对象的类型就是在描述对象的结构，有什么类型的属性和方法。

对象类型的写法。使用 {} 来描述对象结构。属性采用属性名: 类型的形式。方法采用方法名(): 返回值类型的形式。

// 空对象
let person: {} = {}

// 有属性的对象
let person: { name: string } = {
  name: '同学'
}

// 既有属性又有方法的对象
// 在一行代码中指定对象的多个属性类型时，使用 `;`（分号）来分隔
let person: { name: string; sayHi(): void } = {
  name: 'jack',
  sayHi() {}
}

// 对象中如果有多个类型，可以换行写：
// 通过换行来分隔多个属性类型，可以去掉 `;`
let person: {
  name: string
  sayHi(): void
} = {
  name: 'jack',
  sayHi() {}
}

带有参数的方法类型

如果方法有参数，就在方法名后面的小括号中指定参数类型。

type Person = {
  greet(name: string): void
}

let person: Person = {
  greet(name) {
    console.log(name)
  }
}

箭头函数形式的方法类型

方法的类型也可以使用箭头函数形式。

type Person = {
  greet: (name: string) => void
}

let person: Person = {
  greet(name) {
    console.log(name)
  }
}