概述​

泛型即不预先确定的数据类型，具体的类型在使用的时候才能确定。本节将学习ts中的泛型函数。

在软件工程中，开发定义良好且可重用的组件是非常重要的，因为这确保了程序的灵活性和长期可扩展性。使用泛型可以创建可重用的组件，一个组件可以支持多种类型的数据，而用户就可以根据自己的需要的数据类型来使用组件。

泛型函数​

什么是泛型函数​

概述中泛型的概念比较抽象，为了理解什么是泛型函数，我们可以结合一个例子来说明。

如下例所示，identity函数返回传入的参数，但是这个函数的可重用性很差，只能支持number类型。

function identity(arg: number): number {
  return arg;
}

为了支持更多的类型，我们可以将参数设置为联合类型或者any类型。

Interface extends interface​

Interfaces can extend one or more interfaces. This makes writing interfaces flexible and reusable.

interface Person {
  name: string;
  gender: string;
}

interface Employee extends Person {
  department: string;
}

let empObj: Employee = {
  name: 'Kimi',
  gender: 'male',
  department: 'Payment',
};

Interface in TypeScript can be used to define a type and also to implement it in the class. The most scenarios can be summarized as following:

• as object type definition
• as array type definition
• as function type definition
• interface extends interface
• class implements interface

In this section, we mainly focus on the object and array type definition using interface. As function type definition will be introduced in Function: Types section.

Interface likes contract which defines the structure of the object, array, function and also class. However, we need to note that the TypeScript compiler does not convert interface to JavaScript. It uses interface for type checking.

在TypeScript项目中，tsconfig.json文件指定了用来编译这个项目的根文件和编译选项，通过自定义tsconfig.json文件中的配置项，可以达到我们想要的编译结果。

tsc

当我们使用tsc命令对项目进行编译时，编译器会从当前目录开始去查找tsconfig.json文件，逐级向上搜索父目录。

下面我们将通过以下三个方面来讲述tsconfig.json配置：

• 文件选项: files、include、exclude
• 编译选项: compilerOptions
• 项目引用: extends、references

文件选项​

files​

files指定一个包含相对或绝对文件路径的列表，列举在files中的所有文件，编译器在编译时都会将它们包含在内。

// tsconfig.json
"files": [
    "src/core.ts",
    "src/index.ts",
]

当配置文件中的files字段值如上所示时，使用tsc命令编译时，src目录下的core.ts和index.ts文件会被编译为core.js和index.js文件。

JavaScript 定时调度 三 大核心 API

1. setTimeout：延迟执行一次，推荐使用，可灵活控制调度
2. setInterval：周期重复执行，不推荐使用，存在设计缺陷
3. requestAnimationFrame：与屏幕刷新同步，动画场景首选

最佳实践：用递归 setTimeout 替代 setInterval，保证间隔准确、支持动态调整。

零延迟调度：setTimeout(fn, 0) 不是立即执行，而是当前同步任务完成后尽快执行，可用于拆分长任务。

关键提醒：定时器回调中的 this 指向全局对象；务必清理不再需要的定时器防止内存泄漏。

查找节点​

前面四个方法除了定义在 document 对象上，还定义在 Element 上，即在元素节点上也可以调用。

querySelector()​

document.querySelector 方法接受一个 CSS 选择器作为参数，返回匹配该选择器的元素节点。如果有多个节点满足匹配条件，则返回第一个匹配的节点。如果没有发现匹配的节点，则返回null。

let el1 = document.querySelector('.myclass');
let el2 = document.querySelector('#myParent > [ng-click]');

Since HTML5 it’s been valid to start an HTML element ID with a number. For example <div id="10">. From an HTML perspective, that’s fine.

要点一： 事件系统的三大角色 —— 事件对象（存储状态）、事件源（被操作对象）、监听函数（回调处理）

• 事件最早在 IE3 和 Netscape Navigator 2 中出现，用于分担服务器运算负载
• IE4/Netscape4 时代出现了两种对立的事件流：IE 的冒泡流 vs Netscape 的捕获流
• DOM2 级规范统一了事件模型，形成捕获阶段 → 目标阶段 → 冒泡阶段的三阶段事件流

• addEventListener 第三个参数 useCapture 决定在捕获/冒泡阶段触发，默认 false（冒泡）
• stopPropagation() 只阻止向其他元素传播，不阻止当前元素的其他监听器
• stopImmediatePropagation() 彻底阻止传播，包括当前元素的后续监听器
• 事件代理（委托）利用冒泡特性，将子元素监听统一挂载到父节点，性能更优

概览​

• Flexbox 布局语法速查手册
• Learn Flexbox with 30 Code Tidbits