Learning Path
浏览 TypeScript 相关教程与章节。
HTML、CSS、JavaScript、浏览器 API、前端框架与 UI 工程。
教程
72
TypeScript 索引类型与 keyof 关键字 索引类型和 keyof 是 TypeScript 中操作对象类型的强大工具。 它们允许我们动态地访问对象的属性，并创建灵活的类型映射。 索引类型与 keyof 工作原理 keyof 操作符 type Keys = keyof User // 'id' | 'name' |..
TypeScript infer 关键字 infer 是 TypeScript 条件类型中的关键字，用于从类型中推断出新的类型。 它允许在泛型条件类型中提取和推导类型，实现强大的类型操作。 infer 关键字工作原理 原始类型 type Promise<T> = { value: T } infer 推导..
TypeScript 类型推断 类型推断（Type Inference）是 TypeScript 最强大和便捷的特性之一。 它允许编译器自动分析代码的上下文，并根据变量的值、函数的返回值等自动推断出变量的类型。 这意味着开发者无需为每个变量显式声明类型，可以编写更简洁、更易于维护的代码。 TypeScript 类型推断过程 源代码 // 变量声明 var num ..
TypeScript 安装 本文介绍 TypeScript 环境的安装。 我们需要使用到 npm 工具安装，如果你还不了解 npm，可以参考我们的NPM 使用介绍。 NPM 安装 TypeScript 如果你的本地环境已经安装了 npm 工具，可以使用以下命令来安装。 使用国内镜像： npm config set registry https://registry.npmmirror.com 安装 typescript： npm ..
TypeScript 接口 接口是一系列抽象方法的声明，是一些方法特征的集合，这些方法都应该是抽象的，需要由具体的类去实现，然后第三方就可以通过这组抽象方法调用，让具体的类执行具体的方法。 TypeScript 接口定义如下： interface interface_name { } 实例 以下实例中，我们定义了一个接口 IPerson，接着定义了一个变量 customer，它的类型是 IPerson。 customer 实现了接口 ..
TypeScript 交叉类型 交叉类型（Intersection Types）将多个类型合并成一个新类型，新类型包含所有成员的类型。 这类似于面向对象中的多重继承，让一个类型可以拥有多个类型的特性。 交叉类型工作原理 类型 A (Person) name: string age: number & 类型 B (..
TypeScript 简介 TypeScript 是由微软开发并开源的编程语言，它是 JavaScript 的超集，在完全兼容 JavaScript 语法的基础上，增加了可选的静态类型系统和基于类的面向对象编程能力。 TypeScript 代码最终会被编译为纯 JavaScript，可以运行在任何支持 JavaScript 的环境中，包括浏览器、Node.js 和移动端。 为什么需要 TypeScript JavaScript ..
TypeScript 迭代器与生成器 迭代器和生成器是 JavaScript/TypeScript 中处理集合的重要模式。 它们提供了一种统一的遍历数据的方式，让处理大数据流、无限序列等变得更加简单。 迭代器与生成器工作流程 迭代器协议 实现 Symbol.iterator 返回 next() 方法 { done, value } ..
TypeScript 字面量类型 字面量类型（Literal Types）是 TypeScript 中一种表示特定值而不是通用类型的特性。 它允许我们将变量类型限制为具体的值，而不是宽泛的 string、number 等类型。 这提供了更精确的类型控制，使代码更加类型安全。 字面量类型示例 通用类型 var direction: string; 可以赋任何字符串 '..
TypeScript 循环 有的时候，我们可能需要多次执行同一块代码。一般情况下，语句是按顺序执行的：函数中的第一个语句先执行，接着是第二个语句，依此类推。 编程语言提供了更为复杂执行路径的多种控制结构。 循环语句允许我们多次执行一个语句或语句组，下面是大多数编程语言中循环语句的流程图： for 循环 TypeScript for 循环用于多次执行一个语句序列，简化管理循环变量的代码。 语法 语法格式如下所示： f..
TypeScript Map 对象 Map 对象保存键值对，并且能够记住键的原始插入顺序。 任何值(对象或者原始值) 都可以作为一个键或一个值。 Map 是 ES6 中引入的一种新的数据结构，可以参考 ES6 Map 与 Set。 创建 Map TypeScript 使用 Map 类型和 new 关键字来创建 Map： let myMap = new Map(); 初始化 Map，可以以数组的格式来传入键值对： let myMap..
TypeScript 映射类型 映射类型（Mapped Types）是 TypeScript 中一种基于已有类型创建新类型的强大特性。 它允许开发者批量修改属性的特性，如将所有属性变为可选、将所有属性变为只读等。 映射类型是实现 TypeScript 内置工具类型的核心技术。 映射类型工作原理 原始类型 interface User { id: number; na..
TypeScript 从 JavaScript 迁移 将现有 JavaScript 项目逐步迁移到 TypeScript。 迁移策略 添加 tsconfig.json 重命名 .js 为 .ts 逐步添加类型注解 启用严格模式 配置 tsconfig.json tsconfig.json [mycode4 type='js'] { 'compilerOptions':..
TypeScript 混入（Mixin） 混入（Mixin）是一种代码复用模式，用于将多个独立的功能模块混入到一个类中。TypeScript 通过泛型函数返回扩展类的方式实现 Mixin，弥补了单继承无法复用多个来源行为的不足。 Mixin 组合过程 User 类 SerializableMixin + serialize() ..
TypeScript 模块系统 模块系统是现代 TypeScript 开发的基础。 TypeScript 完全支持 ES Module 语法，并提供了丰富的模块解析策略。 通过模块系统，可以将代码分割成可重用的单元，实现代码组织和复用。 模块导出导入流程 user.ts export const name = 'Alice' export cl..
TypeScript Monorepo 配置 Monorepo 是一种将多个项目放在同一个代码仓库中的开发模式。 TypeScript 通过项目引用和工具链支持 Monorepo，可以高效管理多个包。 Monorepo 项目结构 根目录 (root) package.json | tsconfig.json | lerna.json | turbo.json pa..
TypeScript 命名空间 命名空间一个最明确的目的就是解决重名问题。 假设这样一种情况，当一个班上有两个名叫小明的学生时，为了明确区分它们，我们在使用名字之外，不得不使用一些额外的信息，比如他们的姓（王小明，李小明），或者他们父母的名字等等。 命名空间定义了标识符的可见范围，一个标识符可在多个命名空间中定义，它在不同命名空间中的含义是互不相干的。这样，在一个新的命名空间中可定义任何标识符，它们不会与任何已有的标识符发生冲突，因..
TypeScript + Node.js 实战 TypeScript 在 Node.js 后端开发中广泛应用，本教程介绍 Node.js 项目的 TypeScript 配置和使用。 使用 TypeScript 可以让 Node.js 代码更安全、更易维护，特别适合中大型后端项目。 Node.js 教程查看：https://www.runoob.com/nodejs/nodejs-tutorial.html ..
TypeScript null 和 undefined 在 TypeScript 中，null 和 undefined 有特殊的处理方式。 启用 strictNullChecks 后，需要显式处理这些值，这有助于编写更安全的代码。 null 和 undefined 处理方式 null 表示'空值' 需要显式声明 string | nul..
TypeScript Number TypeScript 与 JavaScript 类似，支持 Number 对象。 在 TypeScript 中，Number 对象用于包装数值类型。 Number 对象是原始数值的包装对象。 类似于 String 对象，Number 对象是引用类型，与基本的 number 类型有所不同。 尽管 Number 对象提供了一些额外的属性和方法，但在 TypeScript 中更推荐直接使用基本的 numb..
TypeScript 对象 对象是包含一组键值对的实例。 值可以是标量、函数、数组、对象等，如下实例： [mycode3 type='js']var object_name = { key1: 'value1', // 标量 key2: 'value', key3: function() { // 函数 }, ..
TypeScript 运算符 运算符用于执行程序代码运算，会针对一个以上操作数项目来进行运算。 考虑以下计算： 7 + 5 = 12 以上实例中 7、5 和 12 是操作数。 运算符 + 用于加值。 运算符 = 用于赋值。 TypeScript 主要包含以下几种运算： 算术运算符 逻辑运算符 关系运算符 按位运算符 赋值运算符 三元/条件运算符 字符串运算符 类型运算符 算术运算符 假定 y=5，下面的表格解释了这些算..
TypeScript 可选链 可选链（Optional Chaining）是 TypeScript 和 JavaScript 中一种安全的属性访问方式。 它允许开发者以链式调用的方式安全地访问嵌套对象属性。当访问路径中的任意一个属性为 null 或 undefined 时，整个表达式会短路返回 undefined，而不会抛出错误。 这极大地简化了深层嵌套对象的属性访问代码。 可选链工作原理 ..
TypeScript 路径映射 paths paths 是 tsconfig.json 中的配置选项，用于配置模块路径别名。 它可以让导入路径更简洁，同时保持代码的组织结构清晰。 路径映射 paths 工作原理 原始导入路径 import Button from '../../components/Button' ..