面试题：TypeScript 变量声明的作用域与提升机制

Question

阐述 TypeScript 中变量声明的作用域有哪些类型，以及变量声明提升在 TypeScript 中的表现与 JavaScript 有何异同，通过代码示例详细说明。

Answer 1

作用域类型

1. 全局作用域：在文件顶层声明的变量，其作用域是整个项目。在TypeScript中，若在一个文件的顶层声明变量，它在该文件及其被导入的其他文件中都可访问（前提是通过合适的导出和导入机制）。

// global.ts
let globalVar = 'This is a global variable';
export { globalVar };

// main.ts
import { globalVar } from './global';
console.log(globalVar); 

2. 函数作用域：在函数内部声明的变量，其作用域仅限于该函数内部。

function func() {
    let localVar = 'This is a local variable in func';
    console.log(localVar); 
}
func();
// console.log(localVar); // 报错，localVar在此处未定义

3. 块级作用域：使用let和const声明的变量具有块级作用域，块可以是if语句块、for循环块等。

if (true) {
    let blockVar = 'This is a block - level variable';
    console.log(blockVar); 
}
// console.log(blockVar); // 报错，blockVar在此处未定义

变量声明提升

• 与JavaScript的相同点：
  • 在TypeScript中，var声明的变量同样存在声明提升现象，与JavaScript一致。var声明的变量会被提升到函数或全局作用域的顶部，但其赋值不会被提升。

function hoistingExample() {
    console.log(varVar); 
    var varVar = 'Value assigned later';
}
hoistingExample(); 
// 输出: undefined

• 与JavaScript的不同点：
  • let和const：TypeScript中let和const声明的变量与JavaScript一样不存在声明提升到块级作用域外部的情况。在声明之前访问会导致“暂时性死区”错误。

function letConstExample() {
    console.log(letVar); 
    let letVar = 'Value assigned later';
}
letConstExample(); 
// 报错: ReferenceError: Cannot access 'letVar' before initialization

- **类型检查**：TypeScript在编译阶段会进行类型检查，这会影响对变量声明提升的理解和使用。虽然声明提升在运行时行为上与JavaScript类似，但TypeScript的类型信息使得代码在编译时就能发现潜在错误。例如，如果变量声明提升后在使用前没有正确的类型推断或定义，编译就会报错。

function typeHoistingError() {
    console.log(num); 
    num = 10;
    let num: number; 
}
// 编译报错: Variable 'num' is used before being assigned.