面试题：TypeScript 类型推断与显式类型声明在复杂对象解构中的权衡

Question

假设有一个复杂对象，其结构如下：{ name: string; age: number; hobbies: string[]; address: { city: string; country: string } }。请编写代码通过对象解构获取其中的属性值。要求分别使用类型推断和显式类型声明，并分析在这种复杂对象解构场景下，两种方式对代码可读性、维护性以及潜在错误排查方面的影响。

Answer 1

使用类型推断

const complexObj = { 
    name: 'John', 
    age: 30, 
    hobbies: ['reading', 'coding'], 
    address: { 
        city: 'New York', 
        country: 'USA' 
    } 
};

const { name, age, hobbies, address: { city, country } } = complexObj;
console.log(name, age, hobbies, city, country);

使用显式类型声明

interface Address {
    city: string;
    country: string;
}

interface ComplexObject {
    name: string;
    age: number;
    hobbies: string[];
    address: Address;
}

const complexObj: ComplexObject = { 
    name: 'John', 
    age: 30, 
    hobbies: ['reading', 'coding'], 
    address: { 
        city: 'New York', 
        country: 'USA' 
    } 
};

const { name, age, hobbies, address: { city, country } }: ComplexObject = complexObj;
console.log(name, age, hobbies, city, country);

影响分析

• 可读性：
  • 类型推断：对于简单场景可读性较好，代码简洁，无需额外定义类型。但在复杂对象解构场景下，由于没有显式类型声明，对象结构不直观，可读性会变差。
  • 显式类型声明：在复杂对象解构场景下，通过接口定义明确对象结构，可读性更高，其他开发者能快速了解对象的组成。
• 维护性：
  • 类型推断：当对象结构发生变化时，由于没有明确类型定义，可能需要在多处查找使用该对象解构的地方进行修改，维护成本较高。
  • 显式类型声明：对象结构变化时，只需修改接口定义，使用该接口的解构处会自动提示错误，维护性更好。
• 潜在错误排查：
  • 类型推断：由于缺乏类型检查，运行时才可能发现属性访问错误等问题，排查错误较困难。
  • 显式类型声明：在编译阶段就能发现类型不匹配等错误，方便排查和修复潜在问题。