TypeScript如何为剩余对象解构直接指定类型？

你好呀！针对你想在解构input时直接给剩余的data指定Data类型的需求，TypeScript本身不支持直接在剩余解构变量后加类型标注（比如...data: Data这种写法会触发语法错误），不过我们有几种简洁且实用的方式来实现你的目标：

1. 解构后立即做类型断言 #

这是最直接的实现方式，先解构出one、two和原始剩余对象，再把剩余对象断言为Data类型：

interface Input { one?: string; two?: string; c?: string }
interface Data { one?: string; a?: string; b?: string; c?: string }

const input: Input = { one: "hi", two: "there", c: "demo" };

const { one, two, ...rawData } = input;
const data = rawData as Data; // 直接断言为目标Data类型

data.one = 'test' + one;
data.a = one;

2. 解构前扩展input的类型（更优雅的断言方式） #

如果你想在解构环节一步到位，可以把input断言为Input和Partial<Data>的交集类型，让TS自动推断剩余部分的类型更贴近Data：

const { one, two, ...data } = input as Input & Partial<Data>;

data.one = 'test' + one;
data.a = one;

这里用Partial<Data>是因为Data里的a、b属性在原始input中不存在，交集类型能让TS认可后续对这些属性的赋值操作。

3. 用转换函数避免类型断言（更安全） #

如果你不想用类型断言（毕竟断言是“强制”TS认可类型，存在一定风险），可以写个小函数来处理类型转换，让类型推导更严谨：

// 定义转换函数，返回Data中去掉a、one的部分（对应input去掉two后的结构）
function extractBaseData(input: Input): Omit<Data, 'a' | 'one'> {
  const { two, ...rest } = input;
  return rest;
}

const input: Input = { one: "hi", two: "there", c: "demo" };
const one = input.one;
const data: Data = { ...extractBaseData(input) };

data.one = 'test' + one;
data.a = one;

补充说明：为什么不能直接写...data: Data？ #

TypeScript的解构语法规则里，剩余变量的类型是自动推断的（原对象类型减去被解构的属性），不支持直接在剩余变量后添加类型标注，所以必须通过上述方式手动指定目标类型。

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