你不知道的 void 在 JS 和 TS 中的差异

认识 void

在传统的强类型语言中，void 是一种数据类型，表示函数或方法在调用时不返回任何内容。而在 JavaScript 和 TypeScript 中，void 扮演着不同的角色。

JavaScript 中的 void

在 JavaScript 中，void 是一个操作符，用于返回 undefined。它通常用于忽略函数或表达式的返回值。例如：

const result = void alert('Hello, world!'); // 返回 undefined

TypeScript 中的 void

在 TypeScript 中，void 是一种类型注解，用于指定函数或方法的返回值类型。它表示该函数或方法不返回任何内容。例如：

function greet(): void {
  console.log('Hello, world!');
}

语法差异

JavaScript 中的 void

void 操作符后面可以跟一个表达式或函数调用。例如：

void 1 + 1; // 返回 undefined
void alert('Hello, world!'); // 返回 undefined

TypeScript 中的 void

void 类型注解只能用于函数或方法的返回值类型。例如：

function greet(): void {
  console.log('Hello, world!');
}

const result: void = greet(); // 正确

使用场景

JavaScript 中的 void

void 操作符主要用于忽略函数或表达式的返回值。例如：

• 在事件处理函数中，使用 void 来忽略事件处理函数的返回值，防止浏览器执行默认行为。
• 在异步操作中，使用 void 来忽略异步操作的返回值，防止阻塞主线程。

TypeScript 中的 void

void 类型注解主要用于指定函数或方法的返回值类型。它可以帮助编译器进行类型检查，确保函数或方法的返回值类型与类型注解一致。例如：

function greet(): void {
  console.log('Hello, world!');
}

const result: void = greet(); // 正确

function sum(a: number, b: number): number {
  return a + b;
}

const total: number = sum(1, 2); // 正确

类型注释

JavaScript 中的 void

JavaScript 是一种弱类型语言，不需要类型注释。因此，void 操作符不需要类型注释。

TypeScript 中的 void

TypeScript 是一种强类型语言，需要类型注释。因此，void 类型注解需要在函数或方法的返回值类型前加上。例如：

function greet(): void {
  console.log('Hello, world!');
}

箭头函数

JavaScript 中的 void

在 JavaScript 中，箭头函数的返回值类型是自动推断的。因此，void 操作符不能用于箭头函数。

TypeScript 中的 void

在 TypeScript 中，箭头函数的返回值类型需要显式指定。因此，void 类型注解可以用于箭头函数。例如：

const greet = (): void => {
  console.log('Hello, world!');
};

结论

void 在 JavaScript 和 TypeScript 中扮演着不同的角色。在 JavaScript 中，void 是一个操作符，用于返回 undefined。而在 TypeScript 中，void 是一种类型注解，用于指定函数或方法的返回值类型。

通过理解 void 在 JavaScript 和 TypeScript 中的差异，开发者可以更深入地理解和掌握 void 的应用，从而编写出更健壮、更可靠的代码。