Learning Path

TypeScript tutorials

Browse tutorials and chapters for TypeScript.

Frontend

HTML, CSS, JavaScript, browser APIs, frontend frameworks, and UI engineering.

Tutorials

TUTORIALFrontendFetched/TypeScript

TypeScript 性能优化

TypeScript 性能优化 TypeScript 项目的性能优化涉及编译速度、运行时性能和代码体积等多个方面。本教程介绍常见的性能优化技巧，帮助构建更高效的 TypeScript 应用。 TypeScript 性能优化维度编译速度增量构建 | skipLibCheck 运行时性能类型推断 | 避免 any 包体积 Tree S..

TUTORIALFrontendFetched/TypeScript

TypeScript Promise 详解

TypeScript Promise 详解 Promise 是 JavaScript 异步编程的基础，TypeScript 对 Promise 有完整的类型支持。通过泛型参数，可以精确地指定 Promise 解决值和拒绝值的类型。 Promise 工作流程创建 Promise new Promise((resolve, reject) => {..

TUTORIALFrontendFetched/TypeScript

TypeScript + React 实战 TypeScript 为 React 开发提供完整的类型支持，提高代码可靠性。使用 TypeScript 可以让 React 组件、Props、State 等都有完整的类型检查，减少运行时错误。 React 教程查看：https://www.runoob.com/vue3/react-tutorial.html React + TypeScript 类..

TUTORIALFrontendFetched/TypeScript

TypeScript 递归类型

TypeScript 递归类型递归类型是一种引用自身的类型，在处理树结构、嵌套数据时非常有用。 TypeScript 支持递归类型定义，可以表达无限深度的数据结构。递归类型工作原理基础节点 interface TreeNode { value: string } 递归引用递归类型 interf..

TUTORIALFrontendFetched/TypeScript

TypeScript 项目引用 References

TypeScript 项目引用 References 项目引用是 TypeScript 提供的组织大型项目的功能，允许将 TypeScript 项目拆分为更小的部分。它可以实现增量构建、更好的代码组织和更快的编译速度。项目引用 References 原理主项目 (app) package.json tsconfig.json references: ..

TUTORIALFrontendFetched/TypeScript

TypeScript Set 和 WeakMap

TypeScript Set 和 WeakMap TypeScript 继承自 JavaScript 的 Set 和 WeakMap 数据结构，提供了更强大的类型支持。这些数据结构在处理唯一值集合、键值对映射、缓存等场景非常有用。 Set 和 Map 数据结构 Set 值的集合值唯一，不重复可遍历 add/has/delete ..

TUTORIALFrontendFetched/TypeScript

TypeScript 特殊类型：never、void、unknown、any

TypeScript 特殊类型：never、void、unknown、any TypeScript 有四个特殊的类型：never、void、unknown 和 any。它们在类型系统中扮演重要角色，理解它们的区别对于编写类型安全的代码至关重要。四种特殊类型对比 any 任意类型绕过类型检查无安全性 unknown ..

TUTORIALFrontendFetched/TypeScript

TypeScript String（字符串）

TypeScript String（字符串）在 TypeScript 中，字符串（String）是用于表示文本数据的基本数据类型，它继承并扩展了 JavaScript 的字符串特性，同时增加了静态类型校验。语法 var txt = new String('string'); 或者更简单方式： var txt = 'string'; 两种创建方式及核心区别 TypeScript 中..

TUTORIALFrontendFetched/TypeScript

TypeScript Symbol

TypeScript Symbol Symbol 是 ES6 引入的原始数据类型，表示唯一的标识符。在 TypeScript 中，Symbol 可以用作对象的属性键，确保属性的唯一性。这在需要创建私有属性、避免属性名冲突等场景非常有用。 Symbol 特性 Symbol() 创建 var sym1 = Symbol('key') var s..

TUTORIALFrontendFetched/TypeScript

TypeScript 模板字面量类型

TypeScript 模板字面量类型模板字面量类型基于字符串字面量类型构建，支持通过插值生成新的字符串类型。这让 TypeScript 能够对字符串进行更精确的类型检查，适用于事件名、路径、类名等场景。模板字面量类型工作原理输入类型 type Event = 'click' | 'focus' type Method..

TUTORIALFrontendFetched/TypeScript

TypeScript tsconfig.json 配置

TypeScript tsconfig.json 配置 tsconfig.json 是 TypeScript 项目的配置文件，用于指定编译选项和项目设置。基本配置最基础的 tsconfig.json 文件。实例 [mycode4 type='js'] { 'compilerOptions': { 'target': 'ES20..

TUTORIALFrontendFetched/TypeScript

TypeScript 元组

TypeScript 元组我们知道数组中元素的数据类型都一般是相同的（any[] 类型的数组可以不同），如果存储的元素数据类型不同，则需要使用元组。 TypeScript 中的元组（Tuple）是一种特殊类型的数组，它允许在数组中存储不同类型的元素，与普通数组不同，元组中的每个元素都有明确的类型和位置。元组可以在很多场景下用于表示固定长度、且各元素类型已知的数据结构。创建元组的语法格式如下： let tuple: [类型1, 类型..

TUTORIALFrontendFetched/TypeScript

TypeScript 教程

TypeScript 教程 TypeScript 是 JavaScript 的一个超集，支持 ECMAScript 6 标准（ES6 教程）。 TypeScript 由微软开发的自由和开源的编程语言，在 JavaScript 的基础上增加了静态类型检查的超集。 TypeScript 设计目标是开发大型应用，它可以编译成纯 JavaScript，编译出来的 JavaScript 可以运行在任何浏览器上。为什么选择 Ty..

TUTORIALFrontendFetched/TypeScript

TypeScript type 别名

TypeScript type 别名 type 别名（Type Alias）用于为现有类型创建别名，让代码更简洁、更易读。通过类型别名，可以为复杂类型定义一个简短的名字，提高代码的可维护性。 type 别名工作原理原始复杂类型 type User = { name: string; age: number; email: string; ..

TUTORIALFrontendFetched/TypeScript

TypeScript 类型守卫

TypeScript 类型守卫类型守卫（Type Guards）是 TypeScript 中非常重要的一种类型缩小机制。它允许开发者在运行时通过特定的条件检查，让 TypeScript 编译器能够准确推断出变量的具体类型。通过类型守卫，我们可以安全地访问联合类型变量中特定类型的属性和方法。为什么需要类型守卫在 TypeScript 中，一个变量可能被声明为多种类型的联合。当我们需要根据不同类型执行不同操作时，编译器无法..

TUTORIALFrontendFetched/TypeScript

TypeScript 基础类型

TypeScript 基础类型基础类型可以开发者更准确地描述数据的结构和意图。 TypeScript 包含的数据类型如下表: 类型描述示例string表示文本数据let name: string = 'Alice';number表示数字，包括整数和浮点数let age: number = 30;boolean表示布尔值 true 或 falselet isDone: boolean = true;arra..

TUTORIALFrontendFetched/TypeScript

TypeScript 联合类型

TypeScript 联合类型联合类型（Union Types）可以通过管道(|)将变量设置多种类型，赋值时可以根据设置的类型来赋值。注意：只能赋值指定的类型，如果赋值其它类型就会报错。创建联合类型的语法格式如下： Type1|Type2|Type3 实例声明一个联合类型： TypeScript[mycode3 type='js'] var val:string|number val = 12 c..

TUTORIALFrontendFetched/TypeScript

TypeScript 单元测试

TypeScript 单元测试 TypeScript 项目中的单元测试实践，确保代码质量。单元测试可以验证代码的正确性，TypeScript 的类型系统与测试框架完美结合，可以编写类型安全的测试代码。 TypeScript 单元测试流程源代码 src/utils/calculator.ts src/services/userService.ts 完整类..

TUTORIALFrontendFetched/TypeScript

TypeScript 工具类型

TypeScript 工具类型工具类型（Utility Types）是 TypeScript 内置的一系列高级类型。它们可以帮助开发者快速创建和转换类型，提高代码的可复用性和类型安全性。工具类型本质上是泛型类型，通过映射类型和条件类型实现。 TypeScript 工具类型原始类型 interface User { id: number; ..

TUTORIALFrontendFetched/TypeScript

TypeScript 变量声明

TypeScript 变量声明变量是一种使用方便的占位符，用于引用计算机内存地址。我们可以把变量看做存储数据的容器。 TypeScript 变量的命名规则：变量名称可以包含数字和字母。除了下划线 _ 和美元 $ 符号外，不能包含其他特殊字符，包括空格。变量名不能以数字开头。变量使用前必须先声明，我们可以使用 var 来声明变量。我们可以使用以下四种方式来声明变量：声明变量的类型及初始值： var [变量名] ..

TUTORIALFrontendFetched/TypeScript

使用 VS Code 开发 TypeScript

使用 VS Code 开发 TypeScript 很多 IDE 都有支持 TypeScript 插件，如：VS Code，Sublime Text 2，WebStorm / PHPStorm，Eclipse 等。本章节主要介绍 VS Code，VS Code 是一个可以运行于 Mac OS X、Windows 和 Linux 之上的，针对于编写现代 Web 和云应用的跨平台源代码编辑器，由 Microsoft 公司开发。 VS C..

TUTORIALFrontendFetched/TypeScript

TypeScript + Vue3 实战

TypeScript + Vue3 实战 Vue 3 对 TypeScript 有很好的支持，本教程介绍 Vue 3 + TypeScript 的开发实践。 Vue 3 的 Composition API 和 TypeScript 的类型系统完美结合，可以让代码更安全、更易维护。 Vue3 教程查看：https://www.runoob.com/vue3/vue3-tutorial.html ..

TUTORIALFrontendFetched/TypeScript

TypeScript 基本结构

TypeScript 基本结构 TypeScript 程序的基本结构可以分为几个部分，每个部分都有特定的作用。以下是 TypeScript 程序的常见组成部分：声明部分：包括类型声明、接口声明等。变量声明：包括 let, const 和 var 的使用。函数声明：包括普通函数和箭头函数。类声明：用于定义类及其成员。接口与类型别名：描述类型的结构。模块化：通过 import 和 export 组织代码。类型断言：强制类型转换。泛型：使代..

TUTORIALFrontendFetched/TypeScript

TypeScript vs JavaScript 对比

TypeScript vs JavaScript 对比 TypeScript 和 JavaScript 是前端开发中两个最重要的语言，理解它们之间的区别对于现代 Web 开发至关重要。 JavaScript 是 Web 的原生脚本语言，而 TypeScript 是 JavaScript 的超集，添加了类型系统和其他高级特性。核心区别特性 JavaScript TypeScript 类型系统动态类型静态类型..