TS 入门(三)：Typescript函数与对象类型

前言

在前两章中，我们介绍了 TypeScript 的基础知识，包括安装、配置和基本类型。在本章中，我们将深入探讨函数与对象类型，了解它们的定义与使用，并通过扩展知识点让你有更多的收获。

• TS 入门(一)：TypeScript 简介与安装
• TS 入门(二)：Typescript类型与类型注解

回顾

在上一章中，我们学习了以下内容：

• 基本类型：包括 number、string、boolean、null、undefined、any 和 unknown。
• 数组和元组类型。
• 枚举类型。
• 类型注解的使用示例。

---

正文开始 ， 如果觉得文章对您有帮助，请帮我三连+订阅，谢谢💖💖💖

---

1. 函数类型

a. 基本函数类型

在 TypeScript 中，可以使用函数类型注解来定义函数参数和返回值的类型。

function greet(name: string): string {
  return `Hello, ${name}!`;
}

const message = greet("World");
console.log(message); // 输出: Hello, World!

b. 可选参数和默认参数

可以为函数参数指定默认值或将参数设为可选。

function log(message: string, userId?: string) {
  let time = new Date().toLocaleTimeString();
  console.log(`${time} - ${message}` + (userId ? ` (user: ${userId})` : ""));
}

log("页面加载完毕");
log("用户登录", "张三");

c. 剩余参数

可以使用剩余参数将多个参数收集到一个数组中。

function sum(...values: number[]): number {
  return values.reduce((prev, curr) => prev + curr, 0);
}

console.log(sum(1, 2, 3, 4)); // 输出: 10

2. 对象类型

a. 基本对象类型

对象类型可以用于定义对象的结构。

interface Person {
  name: string;
  age: number;
}

let user: Person = {
  name: "张三",
  age: 30,
};

b. 可选属性和只读属性

在接口中，可以将某些属性定义为可选或只读。

interface Product {
  name: string;
  price: number;
  description?: string; // 可选属性
  readonly id: number; // 只读属性
}

let product: Product = {
  name: "手机",
  price: 4999,
  id: 1,
};

// product.id = 2; // 错误，id 是只读属性

3. 类型别名和接口

a. 类型别名

类型别名用于给一个类型起一个新的名字。

type ID = string | number;

let userId: ID = "12345";
let orderId: ID = 67890;

b. 接口扩展

接口可以继承其他接口，扩展它们的属性。

interface Animal {
  name: string;
}

interface Dog extends Animal {
  breed: string;
}

let myDog: Dog = {
  name: "旺财",
  breed: "拉布拉多",
};

4. 类型推断和上下文类型

a. 类型推断

TypeScript 会根据变量的初始值自动推断其类型。

let numberArray = [1, 2, 3, 4]; // 推断为 number[]

b. 上下文类型

上下文类型发生在 TypeScript 推断某个表达式的类型时。

window.onmousedown = function (mouseEvent) {
  console.log(mouseEvent.button); // 正确
  // console.log(mouseEvent.kangaroo); // 错误，鼠标事件没有 kangaroo 属性
};

扩展知识点：函数重载

TypeScript 允许为同一个函数定义多个函数类型，称为函数重载。

function pickCard(x: { suit: string; card: number }[]): number;
function pickCard(x: number): { suit: string; card: number };
function pickCard(x): any {
  if (typeof x == "object") {
    return Math.floor(Math.random() * x.length);
  } else if (typeof x == "number") {
    return { suit: "黑桃", card: x % 13 };
  }
}

let myDeck = [
  { suit: "红桃", card: 2 },
  { suit: "黑桃", card: 3 },
  { suit: "黄桃", card: 4 },
];
let pickedCard1 = myDeck[pickCard(myDeck)];
let pickedCard2 = pickCard(15);

console.log(`card: ${pickedCard1.card} of ${pickedCard1.suit}`);
console.log(`card: ${pickedCard2.card} of ${pickedCard2.suit}`);

结语

通过本章的学习，你应该对 TypeScript 中的函数类型和对象类型有了更深入的理解，并掌握了类型别名和接口的使用。在下一章中，我们将继续探讨 TypeScript 中的高级类型和类型操作，包括联合类型、交叉类型、字面量类型、类型断言和类型守卫等内容。务必掌握好每个概念，它们将为你后续学习 TypeScript 提供坚实的基础。