news 2026/4/3 7:52:40

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/26 22:11:21

Whisper-Tiny.en:39M轻量模型实现8.4%低错语音识别

Whisper-Tiny.en&#xff1a;39M轻量模型实现8.4%低错语音识别 【免费下载链接】whisper-tiny.en 项目地址: https://ai.gitcode.com/hf_mirrors/openai/whisper-tiny.en OpenAI推出的Whisper-Tiny.en模型以仅3900万参数的轻量级设计&#xff0c;在LibriSpeech&#xf…

作者头像 李华
网站建设 2026/4/2 16:38:16

腾讯SRPO:AI绘图真实感3倍提升的Direct-Align技术

腾讯SRPO&#xff1a;AI绘图真实感3倍提升的Direct-Align技术 【免费下载链接】SRPO 腾讯SRPO是基于FLUX.1.dev优化的文本生成图像模型&#xff0c;采用Direct-Align技术提升降噪效率&#xff0c;通过语义相对偏好优化实现奖励在线调整。无需依赖离线奖励微调&#xff0c;即可将…

作者头像 李华
网站建设 2026/3/31 15:20:36

ResNet18优化实战:降低CPU资源消耗技巧

ResNet18优化实战&#xff1a;降低CPU资源消耗技巧 1. 背景与挑战&#xff1a;通用物体识别中的ResNet-18应用 在边缘计算和轻量级AI部署场景中&#xff0c;通用物体识别是智能监控、内容审核、辅助视觉等应用的核心能力。其中&#xff0c;ResNet-18 因其结构简洁、精度适中、…

作者头像 李华
网站建设 2026/3/27 18:48:30

ResNet18实战教程:从零开始构建识别系统

ResNet18实战教程&#xff1a;从零开始构建识别系统 1. 学习目标与项目背景 在计算机视觉领域&#xff0c;图像分类是基础且关键的任务之一。随着深度学习的发展&#xff0c;ResNet&#xff08;残差网络&#xff09;系列模型因其出色的性能和稳定性&#xff0c;成为工业界和学…

作者头像 李华
网站建设 2026/3/26 21:08:33

小模型推理大升级:trlm-135m三阶段训练实测

小模型推理大升级&#xff1a;trlm-135m三阶段训练实测 【免费下载链接】trlm-135m 项目地址: https://ai.gitcode.com/hf_mirrors/Shekswess/trlm-135m 导语&#xff1a;参数规模仅1.35亿的Tiny Reasoning Language Model (trlm-135m)通过创新的三阶段训练 pipeline&a…

作者头像 李华
网站建设 2026/3/25 14:54:27

ResNet18性能分析:不同优化器对比

ResNet18性能分析&#xff1a;不同优化器对比 1. 引言&#xff1a;通用物体识别中的ResNet-18 在现代计算机视觉系统中&#xff0c;通用物体识别是构建智能应用的基础能力之一。从图像搜索、内容审核到自动驾驶感知&#xff0c;精准的图像分类模型至关重要。其中&#xff0c;…

作者头像 李华