Learning Path
浏览 TypeScript 相关教程与章节。
HTML、CSS、JavaScript、浏览器 API、前端框架与 UI 工程。
教程
72
TypeScript 教程 TypeScript 是 JavaScript 的一个超集，支持 ECMAScript 6 标准（ES6 教程）。 TypeScript 由微软开发的自由和开源的编程语言，在 JavaScript 的基础上增加了静态类型检查的超集。 TypeScript 设计目标是开发大型应用，它可以编译成纯 JavaScript，编译出来的 JavaScript 可以运行在任何浏览器上。 为什么选择 Ty..
TypeScript 抽象类 抽象类（Abstract Class）是 TypeScript 面向对象编程中的重要概念。 它是一种不能被直接实例化的类，只能作为基类供其他类继承。 抽象类主要用于定义子类的公共属性和方法，为子类提供一个统一的结构和行为模板。 抽象类继承层次结构 abstract class Animal 不能直接实例化 clas..
TypeScript 访问修饰符 访问修饰符（Access Modifiers）是 TypeScript 面向对象编程的核心特性之一。 它们用于控制类成员（属性、方法、构造函数）的可见性。 通过访问修饰符，可以实现封装，保护类的内部实现细节。 访问修饰符作用域 public 类内部 ✓ 子类 ✓ 外部 ✓ protected 类内部 ✓ 子类 ✓ ..
TypeScript 声明文件 声明文件是 TypeScript 与 JavaScript 库之间的翻译官，它告诉 TypeScript 一个 JavaScript 库暴露了哪些功能、参数是什么类型、返回值是什么类型。 先从一个问题说起 假设你正在用 TypeScript 写项目，需要引入一个第三方的 JavaScript 库（比如 jQuery），你可能会写出这样的代码： $('#foo'); // 或 j..
TypeScript Array(数组) 数组对象是使用单独的变量名来存储一系列的值。 数组非常常用。 假如你有一组数据（例如：网站名字），存在单独变量如下所示： [mycode3 type='js']var site1='Google'; var site2='Runoob'; var site3='Taobao';[/mycode3] 如果有 10..
TypeScript 箭头函数与 this 箭头函数（Arrow Functions）是 ES6 引入的重要特性，也是 TypeScript 中的常用语法。 与普通函数最大的区别是，箭头函数不绑定自己的 this，而是捕获定义时所在上下文的 this。 这解决了 JavaScript 中常见的 this 指向问题。 箭头函数 this 绑定机制 普通函数 setTimeo..
TypeScript 类型断言 类型断言（Type Assertion）是一种告诉编译器'我比你更清楚这个值的类型'的机制。它允许开发者手动覆盖 TypeScript 的类型推断结果，类似于其他语言的类型转换，但仅在编译阶段生效，不产生任何运行时代码。 两种语法形式 类型断言有两种写法，推荐统一使用 as 语法，尖括号语法在 JSX 文件中会与标签语法冲突。 实例 [mycode4 type=..
TypeScript async/await 异步编程 async/await 是 ES2017 引入的异步编程语法糖，让异步代码看起来像同步代码。 async/await 执行流程 Promise 方式 fetchData() .then(result => { console.log(result); ..
TypeScript 基础语法 TypeScript 程序由以下几个部分组成： 模块 函数 变量 语句和表达式 注释 第一个 TypeScript 程序 我们可以使用以下 TypeScript 程序来输出 “Hello World” ： Runoob.ts 文件代码： [mycode3 type='js'] const hello : string = 'Hello World!&#..
TypeScript 类继承与多态 TypeScript 支持面向对象编程的继承和多态特性。 类继承层次结构 Animal（父类） Dog（子类） extends Animal Cat（子类） extends Animal Dog实例 Cat实例 继承特性 ..
TypeScript 类 类是面向对象编程（OOP）的核心概念，它是一种模板或蓝图，用于创建具有相同属性和方法的对象。TypeScript 完全支持面向对象编程，提供了类、继承、访问修饰符等特性。 类封装了数据（属性）和行为（方法），使得代码更加模块化、可复用和易维护。通过类，我们可以创建多个具有相同结构的对象，这些对象称为类的实例。 类的定义 TypeScript 使用 class 关键字定义类。一个类可以包含以下成员： 字段..
TypeScript 编译选项 TypeScript 编译器（tsc）有众多编译选项，本教程详细介绍常用的编译选项及其作用。 TypeScript 编译过程与编译选项 TypeScript 源码 .ts / .tsx 包含类型注解 TypeScript 编译器 (tsc) 编译选项作用： • 类型检查 (strict) ..
TypeScript 综合项目实战 本教程通过一个完整的项目案例，综合运用 TypeScript 的各种特性。 从项目搭建到实际开发，完整展示 TypeScript 在实际项目中的应用。 项目实战：任务管理系统 前端 (React + TS) Vite + React 18 组件 + Hooks 类型安全的 UI 后端..
TypeScript 条件类型 条件类型（Conditional Types）是 TypeScript 类型系统中最强大的特性之一。 它允许根据条件动态地选择类型，类似于编程语言中的三元表达式。 条件类型使得类型定义更加灵活，是实现高级工具类型的基础。 条件类型工作原理 条件类型语法 T extends U ? X : Y 执行流程 检查 T 能..
TypeScript 协变与逆变 协变与逆变是 TypeScript 类型系统中的重要概念，理解它们有助于编写类型安全的代码。 它们描述了泛型类型在父子类型关系中的行为。 协变与逆变概念 协变 (Covariant) 输出类型：安全 Dog → Animal Provider<Dog> → Provider<Ani..
TypeScript 装饰器 装饰器（Decorators）是 TypeScript 的一项实验性功能。 它允许开发者在不修改原类的情况下，为类、方法、属性或参数添加额外的功能。 装饰器本质上是一个函数，它可以在运行时被调用，以修改目标对象的行为。 装饰器类型与应用位置 @ClassDecorator 类装饰器 属性装饰器 @pr..
TypeScript 设计模式 设计模式是软件开发中经过验证的解决方案，可以帮助我们编写可维护、可扩展的代码。 TypeScript 的类型系统让许多经典设计模式得以用类型安全的方式实现。 设计模式分类 创建型模式 Factory | Singleton | Builder 结构型模式 Decorator | Adapter | Proxy ..
TypeScript 枚举（Enum） 枚举（Enum）是 TypeScript 中非常有用的特性，它允许我们定义一组命名常量。枚举可以使得代码更易读、更易维护，可以用有意义的名称替代'魔术数字'。 数字枚举 默认情况下，枚举从 0 开始编号。 实例 [mycode4 type='js'] enum Direction { Up, // 0 Down, // 1..
TypeScript 错误处理 错误处理是保证程序健壮性的重要环节。 TypeScript 提供了强大的类型系统，可以帮助开发者更好地处理和预防错误。 本文介绍 TypeScript 中常见的错误处理模式和最佳实践。 错误处理方式 try-catch try { // 可能出错的代码 } catch (e) { // 处理错误 } ..
TypeScript 特性 相对 JavaScript，TypeScript 增加了许多关键功能，特别是围绕类型系统和代码结构的增强功能。 TypeScript 的一些关键特性： 静态类型检查：TypeScript 在编译时就会检查代码的类型是否匹配，能够发现很多潜在的错误。即使是简单的错误（例如拼写错误或类型不一致），也可以在编写代码时被捕获到。类型推断：TypeScript 能够自动推断变量的类型。比如当你声明一个变量并赋值时，..
TypeScript 函数重载 函数重载（Function Overloading）允许为一个函数定义多个签名，编译器会根据传入的参数类型选择正确的实现。 函数重载工作原理 函数重载签名（声明） // 签名 1 function add(a: number, b: number): number; // 签名 2 ..
TypeScript 函数 函数是一组一起执行一个任务的语句。 您可以把代码划分到不同的函数中。如何划分代码到不同的函数中是由您来决定的，但在逻辑上，划分通常是根据每个函数执行一个特定的任务来进行的。 函数声明告诉编译器函数的名称、返回类型和参数。函数定义提供了函数的实际主体。 函数定义 函数就是包裹在花括号中的代码块，前面使用了关键词 function： 语法格式如下所示： function function_name() ..
TypeScript 泛型 泛型（Generics）是一种编程语言特性，允许在定义函数、类、接口等时使用占位符来表示类型，而不是具体的类型。 泛型是一种在编写可重用、灵活且类型安全的代码时非常有用的功能。 使用泛型的主要目的是为了处理不特定类型的数据，使得代码可以适用于多种数据类型而不失去类型检查。 泛型的优势包括： 代码重用： 可以编写与特定类型无关的通用代码，提高代码的复用性。类型安全： 在编译时进行类型检查，避免在运行时出..
TypeScript 条件语句 条件语句用于基于不同的条件来执行不同的动作。 TypeScript 条件语句是通过一条或多条语句的执行结果（True 或 False）来决定执行的代码块。 可以通过下图来简单了解条件语句的执行过程: 条件语句 通常在写代码时，您总是需要为不同的决定来执行不同的动作。您可以在代码中使用条件语句来完成该任务。 在 TypeScript 中，我们可使用以下条件语句： if 语句 - 只有当指定条件为 ..