面试题：TypeScript静态类型系统如何帮助捕获前端开发中的常见错误

Question

在前端开发中，列举至少3种常见错误，并说明TypeScript静态类型系统是怎样帮助检测和避免这些错误的。例如，在函数传参和返回值方面，TypeScript能起到什么作用？

Answer 1

常见错误及TypeScript的作用

1. 类型不匹配错误
   • 错误描述：在JavaScript中，变量类型可以随意改变，很容易出现将错误类型的值传递给函数或赋值给变量的情况。例如，一个函数期望接收一个数字作为参数，但实际传入了一个字符串。
   • TypeScript的作用：TypeScript通过静态类型检查，在编译阶段就能发现这种类型不匹配问题。比如定义函数function add(a: number, b: number): number { return a + b; }，如果调用add('1', 2)，TypeScript会报错提示参数类型不匹配。
2. 未定义变量错误
   • 错误描述：在JavaScript中，很容易因为拼写错误或变量未声明就使用，导致运行时错误。例如，console.log(undeclaredVariable)，undeclaredVariable未定义。
   • TypeScript的作用：TypeScript要求变量先声明后使用，在编译时就能检测到未定义变量的错误。当使用未声明变量时，TypeScript会给出明确的错误提示，帮助开发者及时修正。
3. 函数传参和返回值错误
   • 错误描述：JavaScript中函数对传参和返回值类型没有严格限制，可能传入错误数量或类型的参数，返回值也可能与预期不符。比如函数预期返回一个对象，但实际返回了一个数组。
   • TypeScript的作用：在函数定义时明确指定参数类型和返回值类型。如function getFullName(firstName: string, lastName: string): string { return firstName + ' ' + lastName; }，这样当传入参数类型或数量不对，或者返回值类型不符合定义时，TypeScript会在编译阶段报错，避免运行时错误。
4. 属性访问错误
   • 错误描述：在JavaScript中，访问对象不存在的属性不会在语法层面报错，只有在运行时才发现问题。例如let obj = {name: 'John'}; console.log(obj.age)，age属性并不存在于obj对象上。
   • TypeScript的作用：TypeScript通过类型定义可以明确对象拥有的属性，当访问不存在的属性时会在编译阶段报错。比如定义接口interface Person {name: string; }，如果使用let person: Person = {name: 'John'}; console.log(person.age)，TypeScript会提示age属性不存在于Person类型中。