TypeScript中如何用解构与扩展运算符获取Sub接口指定属性？

你遇到的核心问题是：TypeScript的类型检查仅在编译阶段生效，扩展运算符...会原样复制对象的所有属性，运行时不会自动过滤超出子接口定义的属性。下面是几种可行的解决方法：

方法一：手动解构提取目标属性 #

这是最直接的方式，明确指定需要保留的属性，运行时会自动丢弃多余的字段：

// 方式1：直接赋值
const sub: Sub = { name: sample.name, age: sample.age };

// 方式2：解构赋值简化写法
const { name, age } = sample;
const sub: Sub = { name, age };

方法二：封装通用工具函数提取属性 #

如果需要多次处理类似场景，可以写一个通用的pick函数，根据指定的键列表过滤对象：

interface Sample {
  name: string;
  age: number;
  height: number;
}
interface Sub {
  name: string;
  age: number;
}

// 通用pick函数，约束键必须是目标对象的键
function pick<T, K extends keyof T>(obj: T, keys: K[]): Pick<T, K> {
  const result = {} as Pick<T, K>;
  keys.forEach(key => {
    result[key] = obj[key];
  });
  return result;
}

const sample: Sample = {
  name: "hi",
  age: 10,
  height: 190,
};

// 使用pick函数提取Sub接口对应的属性
const sub: Sub = pick(sample, ['name', 'age']);
console.log(sub); // {name: 'hi', age: 10}

为什么原代码不生效？ #

你原来用{ ...sample }赋值时，TypeScript编译阶段会通过检查（因为Sample包含Sub的所有必填属性），但运行时JavaScript不会理会TypeScript的类型注解，所以height属性会被一并复制，最终输出包含多余字段。

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