TypeScript解构时如何将剩余变量类型指定为Person接口

在给定代码中，解构person后生成的noAge被TypeScript自动推断为{name: string}，但我们需要它保持Person类型以支持后续赋值age属性。以下是几种可行的解决方案：

方法1：解构时显式定义类型结构 #

通过指定解构语句的整体类型结构，直接将noAge的类型声明为Person：

interface Person{
    name: string
    age?: number
}

const person: Person = {
    name: 'John Doe',
    age: 20
};

const { age, ...noAge }: { age?: number; noAge: Person } = person;

noAge.age = 30; // 无报错

方法2：解构后使用类型断言 #

如果希望保留原有解构语句的简洁性，可在后续操作中将noAge断言为Person类型：

interface Person{
    name: string
    age?: number
}

const person: Person = {
    name: 'John Doe',
    age: 20
};

const { age, ...noAge } = person;

// 直接断言后赋值
(noAge as Person).age = 30;

或者将noAge重新赋值为带明确类型的变量：

const { age, ...noAge } = person;
const noAgePerson: Person = noAge;
noAgePerson.age = 30;

方法3：利用交叉类型简化声明 #

通过交叉类型让解构后的剩余变量自动继承Person的类型结构：

interface Person{
    name: string
    age?: number
}

const person: Person = {
    name: 'John Doe',
    age: 20
};

const { age, ...noAge } = person as { age: number } & Person;

noAge.age = 30; // 正常运行

原理说明 #

TypeScript默认会根据解构移除的属性推断剩余变量的类型，因此移除age后，noAge被推断为仅包含name的对象。通过显式类型声明或类型断言，我们可以强制noAge保持Person的完整类型结构，从而允许对可选属性age进行赋值操作。

内容的提问来源于stack exchange，提问作者Alexander Nenashev