TypeScript Academy · 课时

函数中的 void 类型

Q: 「函数中的 void 类型」这节课中我会学到什么？

了解 void 与 undefined 在函数返回位置上的区别。 你通过在浏览器中直接运行的动手代码来练习 TypeScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

了解 void 与 undefined 在函数返回位置上的区别。

函数中的 void 类型 是 CoddyKit 上的免费 TypeScript Academy 课时。这是第 3 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 TypeScript Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 TypeScript Academy 课程共包含 4 节课。

无返回值类型

无返回值类型描述的是不会返回有用值的函数。函数仍会完成，只是不会产生应供您使用的结果。这是为执行副作用而调用的函数的类型。

function log(message: string): void {
  console.log(message);
}
log('Hello void');

推断出的无返回值类型

如果函数没有return语句（或只有单独的return;），TypeScript 会自动推断出void。您很少需要显式写出它，不过这样可以说明意图。

function greet(name: string) {
  console.log('Hi ' + name);
  // no return -> inferred void
}
greet('Ada');

无返回值类型与未定义值的区别

这两者有关联，但并不相同。无返回值函数实际可能返回undefined，也可能不返回，而且您不应依赖它的返回值。返回类型标注为undefined的函数必须显式返回它。

function a(): void { /* returns nothing useful */ }
function b(): undefined { return undefined; }
console.log(a(), b());

不应使用无返回值结果

调用无返回值函数时的运行时值是undefined，但类型系统不鼓励使用它。请将无返回值类型视为“忽略此返回值”。

function save(): void {
  console.log('saved');
}
const result = save(); // result has type void
console.log(result); // undefined at runtime

回调类型中的无返回值类型

有一条微妙而强大的规则：返回类型标注为void的回调，可以由返回任意值的函数满足。额外的返回值会被直接忽略。

type Handler = () => void;

const h: Handler = () => 42; // returns number, still fine
h();
console.log('Returned value is ignored by callers');

为何存在这条规则

这种灵活性让您可以将 arr.push（返回数字）这样的函数作为无返回值回调传入。调用方已经承诺不会使用返回值，因此返回任何值都不会造成问题。

const items: number[] = [];
const nums = [1, 2, 3];
nums.forEach((n) => items.push(n)); // push returns number, ok
console.log(items);

数组方法中的上下文无返回值类型

forEach要求回调返回void。因此，您可以编写一个无意中返回值的单行箭头函数，而不会产生错误——上下文中的无返回值类型会吸收这个返回值。

const result: string[] = [];
['a', 'b'].forEach((x) => result.push(x.toUpperCase()));
console.log(result);

一个常见混淆

无返回值回调规则适用于回调的类型，而不是适用于自身标注返回类型为void的函数。明确声明为(): void的函数，仍然不能使用带有非未定义值的return value;。

function f(): void {
  return; // ok
  // return 5; // Error: 5 not assignable to void
}
f();
console.log('declared void cannot return a value');

无返回值参数并不常见

虽然很少见，但在高级泛型中可以将无返回值类型用作参数类型。在日常代码中，您几乎总会看到它作为返回类型，用来表示“没有有意义的结果”。

type Listener = (event: string) => void;

const onClick: Listener = (e) => console.log('Event:', e);
onClick('click');

无返回值类型与异步承诺

异步函数执行某些工作但不返回值时，通常会返回Promise<void>。这种模式相当于将同步代码中的无返回值类型应用于异步代码。

async function sync(): Promise<void> {
  console.log('syncing...');
  // resolves with no value
}
sync().then(() => console.log('done'));

有意选择无返回值类型

当您想表达某个函数存在的目的是执行副作用，且调用方不得依赖返回值时，请标注void。这样可以明确意图，也能让灵活的回调规则为您所用。

function notify(msg: string): void {
  console.log('NOTIFY:', msg);
}
const handlers: Array<(m: string) => void> = [notify];
handlers.forEach((fn) => fn('ping'));

快速检查

检验您对无返回值类型的理解。

回顾：无返回值类型

您已学会，无返回值类型：

标记返回无有用值的函数。
不同于undefined：不应使用无返回值结果。
作为回调类型时，可以接受返回任意值的函数（调用方会忽略这些值）。
支持在forEach中简洁地使用push等方法。

接下来，我们将把所学内容结合起来：安全地处理unknown。

const tasks: Array<() => void> = [
  () => console.log('task 1'),
  () => console.log('task 2')
];
tasks.forEach((t) => t());

常见问题解答

「函数中的 void 类型」课时是免费的吗？

是的 — 「函数中的 void 类型」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 TypeScript Academy 课程的其余内容，请升级到 CoddyKit PRO。 TypeScript Academy 课程共包含 4 节课。

「函数中的 void 类型」这节课中我会学到什么？

了解 void 与 undefined 在函数返回位置上的区别。你通过在浏览器中直接运行的动手代码来练习 TypeScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 TypeScript Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 TypeScript Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 3 节课，共 4 节。

「函数中的 void 类型」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 TypeScript Academy 课中编写并运行代码吗？

能。每节 TypeScript Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 TypeScript Academy