news 2026/4/23 9:59:26

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/3/12 16:11:47

ResNet18优化实战:INT8量化加速方案

ResNet18优化实战&#xff1a;INT8量化加速方案 1. 背景与挑战&#xff1a;通用物体识别中的效率瓶颈 在边缘计算和终端部署场景中&#xff0c;深度学习模型的推理速度与资源消耗成为关键制约因素。尽管 ResNet-18 因其轻量级结构和高精度表现被广泛用于通用图像分类任务&…

作者头像 李华
网站建设 2026/4/22 15:10:22

ResNet18实战:智能交通监控系统搭建

ResNet18实战&#xff1a;智能交通监控系统搭建 1. 引言&#xff1a;通用物体识别在智能交通中的核心价值 随着城市化进程加快&#xff0c;交通管理正从“人工巡查”向“智能感知”演进。传统监控系统只能记录画面&#xff0c;而无法理解内容。如何让摄像头“看懂”交通场景&…

作者头像 李华
网站建设 2026/4/23 9:57:53

Qwen3-4B思维模型2507:256K长文本推理新体验

Qwen3-4B思维模型2507&#xff1a;256K长文本推理新体验 【免费下载链接】Qwen3-4B-Thinking-2507-GGUF 项目地址: https://ai.gitcode.com/hf_mirrors/unsloth/Qwen3-4B-Thinking-2507-GGUF 导语&#xff1a;阿里达摩院最新发布的Qwen3-4B-Thinking-2507模型&#xff…

作者头像 李华
网站建设 2026/4/5 16:02:29

ResNet18部署指南:边缘设备轻量化实施方案

ResNet18部署指南&#xff1a;边缘设备轻量化实施方案 1. 引言&#xff1a;通用物体识别的现实需求与ResNet-18的价值 在智能安防、工业质检、智能家居等场景中&#xff0c;通用物体识别已成为AI落地的核心能力之一。传统方案依赖云端API调用&#xff0c;存在延迟高、隐私泄露…

作者头像 李华
网站建设 2026/4/18 15:19:38

Qwen3Guard-Gen-4B:多语言AI内容安全三级防护工具

Qwen3Guard-Gen-4B&#xff1a;多语言AI内容安全三级防护工具 【免费下载链接】Qwen3Guard-Gen-4B 项目地址: https://ai.gitcode.com/hf_mirrors/Qwen/Qwen3Guard-Gen-4B 导语&#xff1a;AI安全领域迎来重要突破&#xff0c;Qwen3Guard-Gen-4B模型凭借三级风险分类体…

作者头像 李华
网站建设 2026/4/23 9:15:57

腾讯混元1.8B开源:轻量AI的256K上下文全能推理方案

腾讯混元1.8B开源&#xff1a;轻量AI的256K上下文全能推理方案 【免费下载链接】Hunyuan-1.8B-Instruct 腾讯开源混元1.8B指令微调模型&#xff0c;轻量高效却能力全面。支持256K超长上下文与混合推理模式&#xff0c;在数学、编程、科学及长文本任务中表现卓越。具备强大的智能…

作者头像 李华