editor-interrogation

使用编辑器探查和探索类型系统

概述

编辑器是你学习 TypeScript 的最佳工具。

TypeScript 的语言服务提供自动补全、检查、导航和重构功能。这些不只是便利功能——它们是了解 TypeScript 如何看待你的代码的主要方式。

何时使用此技能

• 调试意外的类型推断
• 理解类型扩宽和收窄行为
• 探索不熟悉的代码库
• 了解库如何建模其类型
• 验证推断出的返回类型是否符合预期

铁律

ALWAYS hover to verify types when behavior is unexpected.

请记住：

• 推断出的类型可能与你的预期不同
• 编辑器显示的是 TypeScript 实际认定的类型
• “转到定义”可以揭示库的类型实现
• 重构工具能够理解作用域和导入

识别：何时进行探查

以下情况请检查类型：

// 1. Type inference seems wrong
const num = 10;        // Hover: what's the type?
const str = "hello";   // Is it string or literal "hello"?

// 2. Function returns don't match expectations
function add(a: number, b: number) {
  return a + b;
}
// Hover over `add` - is return type number?

// 3. Narrowing isn't working as expected
function process(x: string | null) {
  if (x) {
    x  // Hover here - should be string, not string | null
  }
}

编辑器检查技巧

悬停查看推断类型

const list = [1, 2, 3];
//    ^? const list: number[]

const tuple = [1, 2, 3] as const;
//    ^? const tuple: readonly [1, 2, 3]

检查链式调用中的泛型

const result = "a,b,c"
  .split(",")   // Hover: Array<string>
  .map(Number)  // Hover: number[]
  .filter(n => n > 0);  // Hover: number[]

留意分支中的类型收窄

function example(x: string | number | null) {
  if (typeof x === "string") {
    x  // Hover: string
  } else if (x) {
    x  // Hover: number
  } else {
    x  // Hover: number | null
  }
}

使用“转到定义”查看库类型

探索外部类型：

// Click "Go to Definition" on fetch
const response = await fetch('/api');
// Takes you to lib.dom.d.ts:
// declare function fetch(
//   input: RequestInfo | URL, init?: RequestInit
// ): Promise<Response>;

// Click through RequestInit to see all options:
// interface RequestInit {
//   body?: BodyInit | null;
//   cache?: RequestCache;
//   headers?: HeadersInit;
//   ...
// }

重构工具

重命名符号（F2）

重命名功能能够理解作用域：

let i = 0;
for (let i = 0; i < 10; i++) {  // Rename this i
  console.log(i);               // This updates
  {
    let i = 12;                 // This stays unchanged
    console.log(i);
  }
}
console.log(i);                 // This stays unchanged

将符号移动到新文件

• 自动更新导入
• 适用于整个项目

提取方法/变量

• 根据选中的代码创建带类型的函数
• 保留类型信息

常见注意事项

typeof null

function getElement(x: string | HTMLElement | null) {
  if (typeof x === 'object') {
    x  // Hover: HTMLElement | null (not just HTMLElement!)
    // typeof null === 'object' in JavaScript
  }
}

可选属性与 undefined

interface Config {
  name?: string;
}

const config: Config = {};
config.name  // Hover: string | undefined

数组索引访问

const arr = [1, 2, 3];
arr[10]  // Hover: number (not number | undefined!)
// Unless noUncheckedIndexedAccess is enabled

抗压应对流程

1. “我知道类型是什么”

压力：“我不需要悬停查看，我知道它是字符串。”

**回应：**想当然会导致错误。编辑器呈现的是事实。

**行动：**仍然悬停查看。花 2 秒验证一下。

2. “库的类型太复杂了”

压力：“我看不懂这些泛型类型。”

**回应：**一次点开一部分。沿着线索逐步探索。

**行动：**反复使用“转到定义”。

危险信号——停止并检查

• 遇到无法理解的类型错误
• 出现“不应该发生”的运行时错误
• 泛型类型看起来不对
• 类型收窄似乎不起作用

快速参考

操作	VS Code 快捷键
悬停查看类型	将鼠标移到符号上
转到定义	F12 或 Cmd/Ctrl+Click
查找所有引用	Shift+F12
重命名符号	F2
快速修复	Cmd/Ctrl+.

总结

编辑器比你更了解你的类型。

类型行为出乎意料时，不要猜测——去检查。将鼠标悬停在符号上，跟进定义，并观察类型如何收窄。相比任何文档，这都能更快地培养直觉。

参考资料

基于 Dan Vanderkam 的《Effective TypeScript》，第 6 条：使用编辑器探查和探索类型系统。