前言

在前两章中，我们介绍了 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 提供坚实的基础。