这是为什么#

当你写一个函数组件并用 useState 时：

1
function Counter() {
2
  const [count, setCount] = useState(0);
3
  // ...
4
}

useState 怎么知道这次渲染应该返回哪个状态？组件本身是一个普通函数，每次渲染都会重新执行，如果不在某个地方把状态“记住”，状态就会丢失。

React 的做法是：将 Hooks 的状态链表存储在组件对应的 Fiber 节点上（Fiber 是 React 内部代表组件实例的数据结构）。 每次组件渲染时，React 会根据当前正在渲染的 Fiber 节点，依次取出对应位置的 Hook 状态。

因此，useState 必须在 React 的渲染流程中被调用，这样 React 才能知道当前属于哪个组件实例，并把状态正确地取出或存入该实例对应的链表里。

如果在普通 JavaScript 函数里调用 Hook，React 就无法将其关联到任何 Fiber 节点，因为没有正在渲染的组件上下文，程序会直接报错。

当你在函数组件中多次调用 useState 或 useEffect 时，React 并没有在后台为你创建类似于 { countState: 0, nameState: 'Tom' } 这样的键值对对象。相反，React 会将这些 Hook 按照它们在代码中书写的先后顺序，组装成一个单向链表（Linked List）。

当组件第一次渲染时，React 每解析到一个 Hook，就会在链表尾部追加一个节点：

Fiber.memorizedState —> [ Hook 1 (useState: count) ] —> [ Hook 2 (useState: name) ] —> [ Hook 3 (useEffect) ]

当组件因为状态改变而触发重新渲染（Re-render）时，函数组件会重新从头到尾执行一遍。

此时，React 的内部指针会重新回到这个链表的头部。每当执行到一行 Hook 代码，React 不会去问“这个状态叫什么名字”，而是直接取当前指针指向的链表节点的值。 随后，指针自动向后移动一步，指向下一个节点。

所以如果我们将 Hook 放在条件判断（如 if 语句）或循环中，就会导致某次渲染时，部分 Hook 被跳过。这会直接破坏链表的索引顺序，引发灾难性的状态串位。

1
function MyComponent() {
2
  const [count, setCount] = useState(0);      // Hook 1
3
  // 错误：在条件语句中调用 Hook
4
  if (count > 0) {
5
    useEffect(() => { ... }, []);            // Hook 2 (条件性触发)
6
  }
7
  const [name, setName] = useState('Alice');  // Hook 3
8
}

首次渲染（count 为 0）

由于 count > 0 为 false，if 分支内部的 Hook 2 被跳过。React 构建的链表结构如下：

• 第 1 次调用： 对应链表第 1 个节点（存储 count）
• 第 2 次调用： 对应链表第 2 个节点（存储 name）

count 变为了 1，组件触发更新

此时 count > 0 为 true，if 分支内部的代码被执行。React 按照执行顺序去读取链表：

• 第 1 次调用 (useState(0))： 读取链表第 1 个节点 ── 成功拿到 count 的最新值 1。
• 第 2 次调用 (useEffect(...))： 此时执行到了 if 内部的 Hook。React 盲目信任顺序，直接读取链表的第 2 个节点。然而，这个节点在上一次渲染时存储的是 name (‘Alice’) 的数据！
• 第 3 次调用 (useState('Alice'))： React 试图去读取链表的第 3 个节点，但上一次渲染根本没有生成第 3 个节点，此时内部指针直接指向 null，程序发生运行时崩溃（Runtime Error）。

一旦前面的 Hook 被跳过，后续所有 Hook 的执行顺序与链表节点的对应关系就会全部错位。React 会把属于 A 状态的数据错误地赋值给 B 状态。

为什么 React 不用 Key 寻址#

为什么 React 不像 Map 一样，让开发者传一个唯一的 Key（例如 useState('count', 0)）来映射状态，这样不就不受顺序限制了吗？

• 在大型项目或多人协作中，不同开发者在同一个组件或自定义 Hook 中可能会无意间使用相同的 Key，导致状态被覆盖。
• Hooks 的终极目标是复用逻辑。如果采用 Key 机制，当你在同一个组件里多次调用同一个自定义 Hook 时（例如两次调用 useFetch('/url')），为了防止 Key 冲突，你必须手动为它们注入不同的 Key。

异步批量更新#

调用 setState 不会立即改变当前执行流中的 state 变量。 它的本质是向 React 提交一个“更新请求”，并触发下一次渲染。

1
const [count, setCount] = useState(0);
2

3
const handleClick = () => {
4
  setCount(count + 1);
5
  console.log(count); // 打印出来的仍然是 0，而不是 1
6
};

每次渲染，count 都是一个特定时间点的“快照”。在 handleClick 函数被触发的那个渲染周期里，count 的值就是 0。改变状态会触发全新的下一次渲染，在下一次渲染的函数体中，count 才会变成 1。

同时 为了性能优化，React 会将同一个事件处理函数内的多个 setState 操作合并为一次重渲染，避免频繁触发 DOM 更新。

函数式状态更新#

当新的状态高度依赖于前一次的状态，或者在异步闭包（如 setTimeout）中需要获取最新状态时，应当向 setState 传入一个回调函数，而不是具体的值：

1
// 假设 count 当前为 0
2
setCount(prevCount => prevCount + 1); // 接收最新状态，返回新状态
3
setCount(prevCount => prevCount + 1);
4

5
// 最终视图上 count 会变成 2。如果写成 setCount(count + 1)，最终只会是 1。

惰性初始化#

如果初始状态需要经过复杂的计算（例如读取 localStorage、进行大量运算），可以直接传一个函数给 useState：

1
const [data, setData] = useState(() => {
2
  const saved = localStorage.getItem('key');
3
  return saved ? JSON.parse(saved) : defaultValue;
4
});

这个函数只在组件首次渲染时执行一次，之后的渲染都会忽略它。如果直接写 useState(func())，则该表达式会在每次渲染时都执行（即使结果被丢弃），造成性能浪费。

当一个 useState 在 Mount 时被初始化，React 会在对应的 Hook 链表节点上挂载一个 queue（更新队列）对象。

每当你调用 setState(x) 时，React 并不会马上计算出最终结果，而是把 x 作为一个 Update 动作推入该 Hook 节点的更新队列中。当 React 调度器（Scheduler）开始处理该组件的重渲染时，会遍历这个队列，依次应用这些更新动作，最终计算出最新的状态值并付诸渲染。

语法#

1
useEffect(() => {
2
  // 1. 执行副作用逻辑（Effect）
3

4
  return () => {
5
    // 2. 清理资源逻辑（Cleanup）
6
  };
7
}, [dependencies]); // 3. 依赖项数组（Dependency Array）

依赖数组决定了副作用什么时候重新执行，React 调度器在每次重渲染后，会采用 Object.is比对当前渲染周期与上一次渲染周期的依赖项数组：

• 省略依赖项（不传数组）： 副作用在 每次组件渲染完成（包括挂载与更新）后 都会执行。这通常会导致严重的性能问题或死循环。
• 空依赖项数组 []：副作用仅在 组件首次挂载完成（Mount）时 执行一次。这意味着该副作用不依赖任何组件状态的变更。
• 非空依赖项数组 [a, b]： 在首次挂载时，以及后续任何一次渲染中，只要 a 或 b 的引用或值发生改变，副作用就会在渲染完成后重新触发。

当依赖项改变触发组件重渲染时，React 的内部执行顺序如下：

1. 组件完成重渲染并更新 DOM。
2. 执行上一次渲染所产生的副作用的清理函数。（擦除旧的副作用）
3. 执行当前渲染所产生的新的副作用函数。（建立新的副作用）

清理函数#

useEffect 允许返回一个函数作为清理器。清理器的执行并不是在组件销毁时才发生，React 会在两个时间点调用它：

1. 组件卸载时
2. 下一次副作用执行前

这是保证不产生内存泄漏的关键，比如清除定时器、取消订阅。

1
useEffect(
2
  function () {
3
    const timer = setInterval(() => {
4
      setCount(count => count + 1)
5
    }, 1000)
6
    return () => clearInterval(timer)
7
  },
8
  [setCount],
9
)

如果组件已卸载，但之前的异步操作或订阅仍然存在，会导致错误或内存泄漏。

使用#

1
useEffect(() => {
2
  const timer = setTimeout(() => {
3
    setCount(c => c + 1);
4
  }, 2000);
5
  return () => clearTimeout(timer);
6
}, []); // 依赖缺了 setCount

1
useEffect(() => {
2
  let cancelled = false;
3
  async function fetchData() {
4
    const result = await api.get(userId);
5
    if (!cancelled) {
6
      setData(result);
7
    }
8
  }
9
  fetchData();
10
  return () => { cancelled = true; }; // 防止组件卸载后设置状态
11
}, [userId]);

1
useEffect(() => {
2
  const handleResize = () => setWidth(window.innerWidth);
3
  window.addEventListener('resize', handleResize);
4
  return () => window.removeEventListener('resize', handleResize);
5
}, []);

语法#

useRef 返回一个普通的 JavaScript 对象，该对象有一个 current 属性。useRef 返回的 refContainer 对象的内存地址，在组件的整个生命周期内是绝对不变的。无论组件因为状态改变重新渲染了多少次，React 始终返回最初 Mount 时创建的同一个对象。虽然外层的对象引用不可变，但其唯一的属性 .current 是完全可变的。你可以随时对其进行读写操作（如 refContainer.current = newValue）。

1
const refContainer = useRef(initialValue);

• initialValue：current 属性的初始值，可以是任何类型。
• refContainer 在每次渲染时都是同一个对象引用。

useRef 同样会在组件的 Hook 链表上创建一个节点，保存 { current: initialValue } 这个对象。因为每次渲染返回的都是同一个内存对象，所以修改 ref.current 不会导致节点本身发生变化，React 自然也不会去触发重渲染。

用法#

1
function TextInputWithFocusButton() {
2
  const inputRef = useRef(null);
3

4
  const focusInput = () => {
5
    // 直接访问 DOM 元素并调用 focus 方法
6
    inputRef.current.focus();
7
  };
8

9
  return (
10
    <>
11
      <input ref={inputRef} type="text" />
12
      <button onClick={focusInput}>聚焦输入框</button>
13
    </>
14
  );
15
}

1
function Timer() {
2
  const intervalRef = useRef(null);
3
  const [count, setCount] = useState(0);
4

5
  const start = () => {
6
    // 把定时器 ID 存在 ref 里，清理时用
7
    intervalRef.current = setInterval(() => {
8
      setCount(c => c + 1);
9
    }, 1000);
10
  };
11

12
  const stop = () => {
13
    clearInterval(intervalRef.current);
14
  };
15

16
  // 组件卸载时清理定时器
17
  useEffect(() => {
18
    return () => clearInterval(intervalRef.current);
19
  }, []);
20

21
  return (
22
    <div>
23
      <p>{count}</p>
24
      <button onClick={start}>开始</button>
25
      <button onClick={stop}>停止</button>
26
    </div>
27
  );
28
}

与 useState() 的区别#

判断数据是否应放在 ref 还是 state 的核心标准是：该数据变化时是否需要重新渲染界面。

React 的官方文档明确指出：不要在渲染期间读取或写入 ref.current（除了初始化）。组件的渲染过程可能会被中断然后重新执行。如果渲染时修改了 ref，那么这种修改可能会被多次应用，产生不可预测的结果。 一般在 useEffect / useLayoutEffect 内部，或者在 事件处理函数 内部对 .current 进行读写。

基本语法#

1
const [state, dispatch] = useReducer(reducer, initialState, init?);

• state：当前状态。通常是一个复杂的 JavaScript 对象（例如包含表单数据、加载状态、错误信息的复合体）。与 useState 一样，这里的状态同样不可变
• dispatch：一个函数，它是组件触发状态变更的唯一方式。调用它并传入 action 对象，如 dispatch({ type: 'increment' })，React 会将当前 state 和该 action 交给 reducer，用返回值作为新状态，并触发重渲染。
• reducer：形如 (state, action) => newState 的纯函数，负责根据 action 计算出新状态。action 通常包含两个标准属性：type：字符串常量，表示行为的唯一类型（如 'FETCH_START'）。payload：附带的业务数据负载（如 API 返回的数据包）。
• initialState：初始状态值 。
• init（可选）：惰性初始化函数，签名 (initialArg) => initialState，用于从传入的参数中计算初始状态。

当遇到以下情况时，useReducer 会比 useState 更合适：

1. 状态之间有复杂的依赖关系

   例如表单有多个字段互相影响，使用多个 useState 容易产生多个分散的 setXxx 调用，且不易追踪整体逻辑。

2. 下一个状态强依赖前一个状态

   在 useState 中必须用函数式更新 setState(prev => ...)，但若更新逻辑很复杂（如根据前一个状态的多个属性计算新状态），函数式更新会变得冗长。useReducer 直接在 reducer 函数中拿到最新的 state，编写逻辑更自然。

3. 需要将 dispatch 传递给深层子组件，避免回调重新创建

   React 保证 dispatch 函数在组件生命周期内引用稳定（和 useState 的 setState 一样），所以它不用写进 useCallback 的依赖中，可安全传给子组件。

计数器示例#

1
import React, { useReducer } from 'react';
2

3
// 定义初始状态
4
const initialState = { count: 0, error: null };
5

6
// 编写 Reducer 纯函数
7
function counterReducer(state, action) {
8
  switch (action.type) {
9
    case 'INCREMENT':
10
      return { ...state, count: state.count + 1 };
11
    case 'DECREMENT':
12
      return { ...state, count: Math.max(0, state.count - 1) };
13
    case 'SET_ERROR':
14
      return { ...state, error: action.payload };
15
    case 'RESET':
16
      return initialState;
17
    default:
18
      // 遇到未定义的 Action 时抛出错误或返回原状态
19
      throw new Error(`Unhandled action type: ${action.type}`);
20
  }
21
}
22

23
// 组件内部集成
24
function CounterComponent() {
25
  const [state, dispatch] = useReducer(counterReducer, initialState);
26

27
  return (
28
    <div>
29
      <p>当前计数: {state.count}</p>
30
      {state.error && <p style={{ color: 'red' }}>{state.error}</p>}
31

32
      {/* 组件不直接修改状态，只通过 dispatch 宣告行为 */}
33
      <button onClick={() => dispatch({ type: 'INCREMENT' })}>增加</button>
34
      <button onClick={() => dispatch({ type: 'DECREMENT' })}>减少</button>
35
      <button onClick={() => dispatch({ type: 'SET_ERROR', payload: '触发一次模拟错误' })}>
36
        报错
37
      </button>
38
    </div>
39
  );
40
}

更新逻辑全部在 reducer 里，组件本身只是通过 dispatch 发“命令”（action）。

惰性初始化#

如果初始状态需要从 props 或其他数据中计算得出，你可以传入第三个参数 init：

1
function init(initialCount) {
2
  return { count: initialCount };
3
}
4

5
function Counter({ initialCount }) {
6
  const [state, dispatch] = useReducer(reducer, initialCount, init);
7
  // ...
8
}

init() 接收当前的初始状态值，并将返回值作为最新的状态值返回给 state，init(initialCount) 只会在首次渲染时执行。

与 useState() 区别#

• 如果状态更新有多种操作类型（如增、删、改、重置），useReducer 更清晰。
• 如果只是简单的 toggle 或文本输入，useState 完全足够。

注：

1. reducer 必须是纯函数

   不能在里面执行副作用（如网络请求、修改 DOM），副作用应放在 useEffect 中。

2. action 通常是一个对象 { type, payload? }

   这是约定俗成的惯例，但非强制。也可以自行定义 action 的结构，只要 reducer 能识别。

3. dispatch 是稳定的引用

   与 useState 的 setState 一样，dispatch 不会在重渲染时变化，所以可以安全地传给子组件而无需 useCallback。

4. 状态更新是批处理的

   同 useState，多次 dispatch 在事件处理函数中会被批处理，React 会等到事件处理结束再统一应用所有更新。

5. 遵循 Hook 链表顺序

   useReducer 同样在组件的 Hook 链表中占据一个节点，按顺序存储状态。调用 dispatch 时，React 会标记更新，重渲染时按顺序读出状态，而不会重新调用 reducer 来计算当前状态（reducer 只在 dispatch 时运行）。

基本语法#

1
import { createContext } from 'react';
2

3
export const ThemeContext = createContext('light'); // 参数为默认值

1
import { ThemeContext } from './ThemeContext';
2

3
function App() {
4
  const [theme, setTheme] = useState('dark');
5

6
  return (
7
    <ThemeContext.Provider value={{ theme, setTheme }}>
8
      <Toolbar />
9
    </ThemeContext.Provider>
10
  );
11
}

1
import { useContext } from 'react';
2
import { ThemeContext } from './ThemeContext';
3

4
function Toolbar() {
5
  // 直接拿到 App 中提供的 theme 和 setTheme
6
  const { theme, setTheme } = useContext(ThemeContext);
7

8
  return (
9
    <div style={{ background: theme === 'dark' ? '#333' : '#fff' }}>
10
      <button onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}>
11
        切换主题
12
      </button>
13
    </div>
14
  );
15
}

与 useReducer 配合实现全局状态管理#

1
const AppContext = createContext();
2

3
function reducer(state, action) {
4
  switch (action.type) {
5
    case 'login': return { ...state, user: action.payload };
6
    case 'logout': return { ...state, user: null };
7
    default: return state;
8
  }
9
}
10

11
export function AppProvider({ children }) {
12
  const [state, dispatch] = useReducer(reducer, { user: null });
13
  return (
14
    <AppContext.Provider value={state, dispatch}>
15
      {children}
16
    </AppContext.Provider>
17
  );
18
}
19

20
// 自定义 Hook，封装 useContext 调用
21
export function useApp() {
22
  const context = useContext(AppContext);
23
  if (context === undifined) throw new Error('AppContext must used AppProvider');
24
  return context;
25
}

任何在 <AppProvider></AppProvider> 包裹的子组件都可以调用 useApp() 获取 state 和 dispatch 。

简单的例子#

枚举使用 enum 关键字来定义：

1
enum Days {Sun, Mon, Tue, Wed, Thu, Fri, Sat};

枚举成员会被赋值为从 0 开始递增的数字，同时也会对枚举值到枚举名进行反向映射：

1
enum Days {Sun, Mon, Tue, Wed, Thu, Fri, Sat};
2

3
console.log(Days["Sun"] === 0); // true
4
console.log(Days["Mon"] === 1); // true
5
console.log(Days["Tue"] === 2); // true
6
console.log(Days["Sat"] === 6); // true
7

8
console.log(Days[0] === "Sun"); // true
9
console.log(Days[1] === "Mon"); // true
10
console.log(Days[2] === "Tue"); // true
11
console.log(Days[6] === "Sat"); // true

事实上，上面的例子会被编译为：

1
var Days;
2
(function (Days) {
3
    Days[Days["Sun"] = 0] = "Sun";
4
    Days[Days["Mon"] = 1] = "Mon";
5
    Days[Days["Tue"] = 2] = "Tue";
6
    Days[Days["Wed"] = 3] = "Wed";
7
    Days[Days["Thu"] = 4] = "Thu";
8
    Days[Days["Fri"] = 5] = "Fri";
9
    Days[Days["Sat"] = 6] = "Sat";
10
})(Days || (Days = {}));

手动赋值#

我们也可以给枚举项手动赋值：

1
enum Days {Sun = 7, Mon = 1, Tue, Wed, Thu, Fri, Sat};
2

3
console.log(Days["Sun"] === 7); // true
4
console.log(Days["Mon"] === 1); // true
5
console.log(Days["Tue"] === 2); // true
6
console.log(Days["Sat"] === 6); // true

上面的例子中，未手动赋值的枚举项会接着上一个枚举项递增。

如果未手动赋值的枚举项与手动赋值的重复了，TypeScript 是不会察觉到这一点的：

1
enum Days {Sun = 3, Mon = 1, Tue, Wed, Thu, Fri, Sat};
2

3
console.log(Days["Sun"] === 3); // true
4
console.log(Days["Wed"] === 3); // true
5
console.log(Days[3] === "Sun"); // false
6
console.log(Days[3] === "Wed"); // true

上面的例子中，递增到 3 的时候与前面的 Sun 的取值重复了，但是 TypeScript 并没有报错，导致 Days[3] 的值先是 "Sun"，而后又被 "Wed" 覆盖了。编译的结果是：

1
var Days;
2
(function (Days) {
3
    Days[Days["Sun"] = 3] = "Sun";
4
    Days[Days["Mon"] = 1] = "Mon";
5
    Days[Days["Tue"] = 2] = "Tue";
6
    Days[Days["Wed"] = 3] = "Wed";
7
    Days[Days["Thu"] = 4] = "Thu";
8
    Days[Days["Fri"] = 5] = "Fri";
9
    Days[Days["Sat"] = 6] = "Sat";
10
})(Days || (Days = {}));

所以使用的时候需要注意，最好不要出现这种覆盖的情况。

手动赋值的枚举项可以不是数字，此时需要使用类型断言来让 tsc 无视类型检查 (编译出的 js 仍然是可用的)：

1
enum Days {Sun = 7, Mon, Tue, Wed, Thu, Fri, Sat = <any>"S"};
2
var Days;
3
(function (Days) {
4
    Days[Days["Sun"] = 7] = "Sun";
5
    Days[Days["Mon"] = 8] = "Mon";
6
    Days[Days["Tue"] = 9] = "Tue";
7
    Days[Days["Wed"] = 10] = "Wed";
8
    Days[Days["Thu"] = 11] = "Thu";
9
    Days[Days["Fri"] = 12] = "Fri";
10
    Days[Days["Sat"] = "S"] = "Sat";
11
})(Days || (Days = {}));

如果不使用类型断言，则不能使用反向查找

1
enum Days { Sun = 7, Mon, Tue, Wed, Thu, Fri, Sat = "S" };
2

3
var Days;
4
(function (Days) {
5
    Days[Days["Sun"] = 7] = "Sun";
6
    Days[Days["Mon"] = 8] = "Mon";
7
    Days[Days["Tue"] = 9] = "Tue";
8
    Days[Days["Wed"] = 10] = "Wed";
9
    Days[Days["Thu"] = 11] = "Thu";
10
    Days[Days["Fri"] = 12] = "Fri";
11
    Days["Sat"] = "S";
12
})(Days || (Days = {}));
13
console.log(Days['Sat'], Days['S']); // S, undefined

当然，手动赋值的枚举项也可以为小数或负数，此时后续未手动赋值的项的递增步长仍为 1：

1
enum Days {Sun = 7, Mon = 1.5, Tue, Wed, Thu, Fri, Sat};
2

3
console.log(Days["Sun"] === 7); // true
4
console.log(Days["Mon"] === 1.5); // true
5
console.log(Days["Tue"] === 2.5); // true
6
console.log(Days["Sat"] === 6.5); // true

常数项和计算所得项#

枚举项有两种类型：常数项（constant member）和计算所得项（computed member）。

前面我们所举的例子都是常数项，一个典型的计算所得项的例子：

1
enum Color {Red, Green, Blue = "blue".length};

上面的例子中，"blue".length 就是一个计算所得项。

上面的例子不会报错，但是如果紧接在计算所得项后面的是未手动赋值的项，那么它就会因为无法获得初始值而报错：

1
enum Color {Red = "red".length, Green, Blue};
2

3
// index.ts(1,33): error TS1061: Enum member must have initializer.
4
// index.ts(1,40): error TS1061: Enum member must have initializer.

当满足以下条件时，枚举成员被当作是常数：

• 不具有初始化函数并且之前的枚举成员是常数。在这种情况下，当前枚举成员的值为上一个枚举成员的值加 1。但第一个枚举元素是个例外。如果它没有初始化方法，那么它的初始值为 0。
• 枚举成员使用常数枚举表达式初始化。常数枚举表达式是 TypeScript 表达式的子集，它可以在编译阶段求值。当一个表达式满足下面条件之一时，它就是一个常数枚举表达式：
  • 数字字面量
  • 引用之前定义的常数枚举成员（可以是在不同的枚举类型中定义的）如果这个成员是在同一个枚举类型中定义的，可以使用非限定名来引用
  • 带括号的常数枚举表达式
  • +, -, ~ 一元运算符应用于常数枚举表达式
  • +, -, *, /, %, <<, >>, >>>, &, |, ^ 二元运算符，常数枚举表达式做为其一个操作对象。若常数枚举表达式求值后为 NaN 或 Infinity，则会在编译阶段报错

所有其它情况的枚举成员被当作是需要计算得出的值。

常数枚举#

常数枚举是使用 const enum 定义的枚举类型：

1
const enum Directions {
2
    Up,
3
    Down,
4
    Left,
5
    Right
6
}
7

8
let directions = [Directions.Up, Directions.Down, Directions.Left, Directions.Right];

常数枚举与普通枚举的区别是，它会在编译阶段被删除，并且不能包含计算成员。

上例的编译结果是：

1
var directions = [0 /* Up */, 1 /* Down */, 2 /* Left */, 3 /* Right */];

假如包含了计算成员，则会在编译阶段报错：

1
const enum Color {Red, Green, Blue = "blue".length};
2

3
// index.ts(1,38): error TS2474: In 'const' enum declarations member initializer must be constant expression.

外部枚举#

外部枚举（Ambient Enums）是使用 declare enum 定义的枚举类型：

1
declare enum Directions {
2
    Up,
3
    Down,
4
    Left,
5
    Right
6
}
7

8
let directions = [Directions.Up, Directions.Down, Directions.Left, Directions.Right];

之前提到过，declare 定义的类型只会用于编译时的检查，编译结果中会被删除。

上例的编译结果是：

1
var directions = [Directions.Up, Directions.Down, Directions.Left, Directions.Right];

外部枚举与声明语句一样，常出现在声明文件中。

同时使用 declare 和 const 也是可以的：

1
declare const enum Directions {
2
    Up,
3
    Down,
4
    Left,
5
    Right
6
}
7

8
let directions = [Directions.Up, Directions.Down, Directions.Left, Directions.Right];

编译结果：

1
var directions = [0 /* Up */, 1 /* Down */, 2 /* Left */, 3 /* Right */];

类的概念#

虽然 JavaScript 中有类的概念，但是可能大多数 JavaScript 程序员并不是非常熟悉类，这里对类相关的概念做一个简单的介绍。

• 类（Class）：定义了一件事物的抽象特点，包含它的属性和方法
• 对象（Object）：类的实例，通过 new 生成
• 面向对象（OOP）的三大特性：封装、继承、多态
• 封装（Encapsulation）：将对数据的操作细节隐藏起来，只暴露对外的接口。外界调用端不需要（也不可能）知道细节，就能通过对外提供的接口来访问该对象，同时也保证了外界无法任意更改对象内部的数据
• 继承（Inheritance）：子类继承父类，子类除了拥有父类的所有特性外，还有一些更具体的特性
• 多态（Polymorphism）：由继承而产生了相关的不同的类，对同一个方法可以有不同的响应。比如 Cat 和 Dog 都继承自 Animal，但是分别实现了自己的 eat 方法。此时针对某一个实例，我们无需了解它是 Cat 还是 Dog，就可以直接调用 eat 方法，程序会自动判断出来应该如何执行 eat
• 存取器（getter & setter）：用以改变属性的读取和赋值行为
• 修饰符（Modifiers）：修饰符是一些关键字，用于限定成员或类型的性质。比如 public 表示公有属性或方法
• 抽象类（Abstract Class）：抽象类是供其他类继承的基类，抽象类不允许被实例化。抽象类中的抽象方法必须在子类中被实现
• 接口（Interfaces）：不同类之间公有的属性或方法，可以抽象成一个接口。接口可以被类实现（implements）。一个类只能继承自另一个类，但是可以实现多个接口

ES6 中类的用法#

先回顾一下 ES6 中类的用法，更详细的介绍可以参考 ECMAScript 6 入门 - Class。

1
class Animal {
2
    name;
3
    constructor(name) {
4
        this.name = name;
5
    }
6
    sayHi() {
7
        return `My name is ${this.name}`;
8
    }
9
}
10

11
let a = new Animal('Jack');
12
console.log(a.sayHi()); // My name is Jack

1
class Cat extends Animal {
2
  constructor(name) {
3
    super(name); // 调用父类的 constructor(name)
4
    console.log(this.name);
5
  }
6
  sayHi() {
7
    return 'Meow, ' + super.sayHi(); // 调用父类的 sayHi()
8
  }
9
}
10

11
let c = new Cat('Tom'); // Tom
12
console.log(c.sayHi()); // Meow, My name is Tom

1
class Animal {
2
  constructor(name) {
3
    this.name = name;
4
  }
5
  get name() {
6
    return 'Jack';
7
  }
8
  set name(value) {
9
    console.log('setter: ' + value);
10
  }
11
}
12

13
let a = new Animal('Kitty'); // setter: Kitty
14
a.name = 'Tom'; // setter: Tom
15
console.log(a.name); // Jack

1
class Animal {
2
  static isAnimal(a) {
3
    return a instanceof Animal;
4
  }
5
}
6

7
let a = new Animal('Jack');
8
Animal.isAnimal(a); // true
9
a.isAnimal(a); // TypeError: a.isAnimal is not a function

ES7 中类的用法#

ES7 中有一些关于类的提案，TypeScript 也实现了它们，这里做一个简单的介绍。

1
class Animal {
2
  name = 'Jack';
3

4
  constructor() {
5
    // ...
6
  }
7
}
8

9
let a = new Animal();
10
console.log(a.name); // Jack

1
class Animal {
2
  static num = 42;
3

4
  constructor() {
5
    // ...
6
  }
7
}
8

9
console.log(Animal.num); // 42

TypeScript 中类的用法#

1
class Animal {
2
  public name;
3
  public constructor(name) {
4
    this.name = name;
5
  }
6
}
7

8
let a = new Animal('Jack');
9
console.log(a.name); // Jack
10
a.name = 'Tom';
11
console.log(a.name); // Tom

1
class Animal {
2
  private name;
3
  public constructor(name) {
4
    this.name = name;
5
  }
6
}
7

8
let a = new Animal('Jack');
9
console.log(a.name);
10
a.name = 'Tom';
11

12
// index.ts(9,13): error TS2341: Property 'name' is private and only accessible within class 'Animal'.
13
// index.ts(10,1): error TS2341: Property 'name' is private and only accessible within class 'Animal'.

1
var Animal = (function () {
2
  function Animal(name) {
3
    this.name = name;
4
  }
5
  return Animal;
6
})();
7
var a = new Animal('Jack');
8
console.log(a.name);
9
a.name = 'Tom';

1
class Animal {
2
  private name;
3
  public constructor(name) {
4
    this.name = name;
5
  }
6
}
7

8
class Cat extends Animal {
9
  constructor(name) {
10
    super(name);
11
    console.log(this.name);
12
  }
13
}
14

15
// index.ts(11,17): error TS2341: Property 'name' is private and only accessible within class 'Animal'.

1
class Animal {
2
  protected name;
3
  public constructor(name) {
4
    this.name = name;
5
  }
6
}
7

8
class Cat extends Animal {
9
  constructor(name) {
10
    super(name);
11
    console.log(this.name);
12
  }
13
}

1
class Animal {
2
  public name;
3
  private constructor(name) {
4
    this.name = name;
5
  }
6
}
7
class Cat extends Animal {
8
  constructor(name) {
9
    super(name);
10
  }
11
}
12

13
let a = new Animal('Jack');
14

15
// index.ts(7,19): TS2675: Cannot extend a class 'Animal'. Class constructor is marked as private.
16
// index.ts(13,9): TS2673: Constructor of class 'Animal' is private and only accessible within the class declaration.

1
class Animal {
2
  public name;
3
  protected constructor(name) {
4
    this.name = name;
5
  }
6
}
7
class Cat extends Animal {
8
  constructor(name) {
9
    super(name);
10
  }
11
}
12

13
let a = new Animal('Jack');
14

15
// index.ts(13,9): TS2674: Constructor of class 'Animal' is protected and only accessible within the class declaration.

1
class Animal {
2
  // public name: string;
3
  public constructor(public name) {
4
    // this.name = name;
5
  }
6
}