news 2026/5/10 6:34:33

TypeScript 入门到精通:类型系统与实战项目

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
TypeScript 入门到精通:类型系统与实战项目

TypeScript 类型系统基础

TypeScript 的核心是静态类型系统。通过类型注解,可以在编译时捕获潜在的错误。基本类型包括numberstringbooleanarraytupleenumanyvoid等。

let age: number = 25; let name: string = "Alice"; let isActive: boolean = true; let scores: number[] = [90, 85, 95]; let tuple: [string, number] = ["Alice", 25];

接口与类型别名

接口(interface)和类型别名(type)用于定义复杂类型结构。接口更适合扩展和实现,类型别名更适合联合类型和交叉类型。

interface User { id: number; name: string; email?: string; // 可选属性 } type Point = { x: number; y: number; }; function printUser(user: User): void { console.log(`User: ${user.name}, ID: ${user.id}`); }

泛型的使用

泛型(Generics)提供代码复用性,允许在定义函数、类或接口时使用类型参数。

function identity<T>(arg: T): T { return arg; } let output = identity<string>("hello");

类与继承

TypeScript 支持面向对象编程,包括类、继承、访问修饰符(publicprivateprotected)等。

class Animal { constructor(public name: string) {} move(distance: number = 0) { console.log(`${this.name} moved ${distance}m.`); } } class Dog extends Animal { bark() { console.log("Woof! Woof!"); } } const dog = new Dog("Buddy"); dog.bark(); dog.move(10);

实战项目:用户管理系统

以下是一个简单的用户管理系统的实现,包含类型定义、接口和类。

interface IUser { id: number; name: string; email: string; } class UserManager { private users: IUser[] = []; addUser(user: IUser): void { this.users.push(user); } getUser(id: number): IUser | undefined { return this.users.find(user => user.id === id); } listUsers(): IUser[] { return this.users; } } const manager = new UserManager(); manager.addUser({ id: 1, name: "Alice", email: "alice@example.com" }); manager.addUser({ id: 2, name: "Bob", email: "bob@example.com" }); console.log(manager.listUsers()); console.log(manager.getUser(1));

高级类型与工具类型

TypeScript 提供了多种工具类型(Utility Types),如PartialReadonlyPickOmit等,用于简化类型操作。

type PartialUser = Partial<IUser>; // 所有属性变为可选 type ReadonlyUser = Readonly<IUser>; // 所有属性变为只读 type UserNameAndEmail = Pick<IUser, "name" | "email">; // 选择部分属性 type UserWithoutEmail = Omit<IUser, "email">; // 排除部分属性

异步编程与类型

TypeScript 支持async/await语法,并可以明确指定 Promise 的返回类型。

async function fetchUser(id: number): Promise<IUser> { const response = await fetch(`/api/users/${id}`); const data = await response.json(); return data as IUser; } fetchUser(1).then(user => console.log(user));

类型守卫与类型断言

类型守卫(Type Guards)和类型断言(Type Assertions)用于在运行时检查类型或强制类型转换。

function isUser(obj: any): obj is IUser { return obj && typeof obj.id === "number" && typeof obj.name === "string"; } const data: unknown = { id: 1, name: "Alice" }; if (isUser(data)) { console.log(data.name); } const user = data as IUser; // 类型断言
版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/5/9 22:48:05

OpenAI开源120B推理引擎:单卡H100轻松跑智能代理

OpenAI开源120B推理引擎&#xff1a;单卡H100轻松跑智能代理 【免费下载链接】gpt-oss-120b gpt-oss-120b是OpenAI开源的高性能大模型&#xff0c;专为复杂推理任务和智能代理场景设计。这款拥有1170亿参数的混合专家模型采用原生MXFP4量化技术&#xff0c;可单卡部署在H100 GP…

作者头像 李华
网站建设 2026/5/8 15:27:58

ResNet18性能剖析:ImageNet预训练模型效果评估

ResNet18性能剖析&#xff1a;ImageNet预训练模型效果评估 1. 引言&#xff1a;通用物体识别中的ResNet-18价值定位 在计算机视觉领域&#xff0c;通用物体识别是基础且关键的任务之一。随着深度学习的发展&#xff0c;卷积神经网络&#xff08;CNN&#xff09;逐渐成为图像分…

作者头像 李华
网站建设 2026/5/8 2:45:20

面向光模块的高速PCB设计:完整指南差分对布线

差分对布线实战&#xff1a;光模块高速PCB设计的“命脉”所在 你有没有遇到过这样的情况&#xff1f; 一个25G光模块样机打出来&#xff0c;眼图闭合、误码率飙升&#xff0c;EMC测试频频超标。反复排查后发现&#xff0c;问题不出在芯片或光路&#xff0c;而是藏在那几条看似…

作者头像 李华
网站建设 2026/5/9 20:27:45

无线网络仿真:5G网络仿真_(20).5G网络仿真中的大规模MIMO技术

5G网络仿真中的大规模MIMO技术 引言 大规模MIMO&#xff08;Multiple-Input Multiple-Output&#xff09;技术是5G网络中的一项关键创新&#xff0c;旨在通过增加天线数量来显著提升无线通信系统的性能。大规模MIMO不仅提高了数据传输速率&#xff0c;还增强了信号覆盖范围和系…

作者头像 李华
网站建设 2026/5/9 15:56:55

Wan2.1视频生成:图像转480P视频新体验

Wan2.1视频生成&#xff1a;图像转480P视频新体验 【免费下载链接】Wan2.1-I2V-14B-480P 项目地址: https://ai.gitcode.com/hf_mirrors/Wan-AI/Wan2.1-I2V-14B-480P 导语&#xff1a;Wan2.1-I2V-14B-480P模型正式发布&#xff0c;以其高效的图像转视频能力和对消费级G…

作者头像 李华
网站建设 2026/5/8 15:27:57

腾讯混元0.5B:超轻量AI推理性能实测报告

腾讯混元0.5B&#xff1a;超轻量AI推理性能实测报告 【免费下载链接】Hunyuan-0.5B-Pretrain 腾讯开源混元大模型系列中的高效轻量版本&#xff0c;专注性能与部署灵活性。0.5B参数规模兼顾边缘设备与高并发场景&#xff0c;支持256K超长上下文和混合推理模式&#xff0c;具备强…

作者头像 李华