MST
星途 面试题库

面试题:TypeScript 中类型注解与 JavaScript 动态类型的差异体现

请阐述在函数参数和返回值方面,TypeScript 的类型注解与 JavaScript 动态类型的不同之处,并举例说明如何在 TypeScript 中通过类型注解避免常见的类型错误。
48.0万 热度难度
前端开发TypeScript

知识考点

AI 面试

面试题答案

一键面试

1. 类型注解与动态类型在函数参数和返回值方面的不同

  • JavaScript 动态类型
    • 在 JavaScript 中,函数参数和返回值没有显式的类型声明。函数可以接受任何类型的参数,并返回任何类型的值。这意味着在运行时才会发现由于类型不匹配导致的错误。例如:
function add(a, b) {
    return a + b;
}
// 可以传入数字
console.log(add(1, 2)); 
// 也可以传入字符串,不会在定义时报错
console.log(add('1', '2')); 
  • TypeScript 类型注解
    • TypeScript 通过类型注解明确指定函数参数和返回值的类型。这使得在编译阶段就能发现类型不匹配的错误,提高代码的稳定性和可维护性。例如:
function add(a: number, b: number): number {
    return a + b;
}
// 传入数字,正常
console.log(add(1, 2)); 
// 传入字符串,编译时就会报错
// console.log(add('1', '2')); 

2. 如何在 TypeScript 中通过类型注解避免常见类型错误

  • 参数类型不匹配
    • 假设我们有一个函数用于计算数组元素的总和,在 TypeScript 中可以这样写:
function sumArray(arr: number[]): number {
    return arr.reduce((acc, val) => acc + val, 0);
}
let numbers = [1, 2, 3];
console.log(sumArray(numbers)); 
// 如果传入非数字数组,编译时会报错
// let wrongArray = ['1', '2', '3'];
// console.log(sumArray(wrongArray)); 
  • 返回值类型错误
    • 比如有一个函数用于获取对象的某个属性值,要求返回字符串类型:
function getProperty(obj: { [key: string]: string }, key: string): string {
    return obj[key];
}
let myObj = { name: 'John' };
console.log(getProperty(myObj, 'name')); 
// 如果函数内部错误地返回了非字符串类型,编译时会报错
// function wrongGetProperty(obj: { [key: string]: string }, key: string): string {
//     return 123; 
// }