TypeScript解构{state,...params}时如何定义类型以访问params属性

错误根因 #

你自定义的newONe接口仅声明了state字段，没有定义其他额外字段，所以TypeScript会推断解构出的剩余参数params是空对象类型，自然无法访问c属性。同时你原定义中state的联合类型objectType | objectType3也不符合实际传入的参数类型，可以简化修正。

解决方案（按推荐优先级排序） #

方案1：明确声明剩余字段（类型安全最高）

你传入函数的参数已经把objectType3的c、d字段展开到和state同级，直接让newONe接口继承objectType3即可：

const state:objectType ={
    a :'a',
    b : 'b'
}

type objectType = {[key : string] : string}
type objectType3 = {c: number,d : number}

const params:objectType3= {
    c:1,
    d:2
}

// 接口继承objectType3，自动包含c、d字段
interface newONe extends objectType3 {
    state : objectType;
}

function g({state,...params} : newONe){
    console.log(state);
    console.log(params.c) // 正常访问，params类型自动推导为objectType3
}

g({state,...params});

方案2：使用泛型适配不同剩余参数类型

如果剩余参数的类型不固定，可以用泛型提升复用性：

type objectType = {[key : string] : string}

// 泛型T代表剩余参数的类型
interface newONe<T extends Record<string, any>> {
    state: objectType;
} & T

// 使用时传入剩余参数的类型即可
function g<T extends Record<string, any>>({state,...params} : newONe<T>){
    console.log(state);
    console.log(params.c)
}

方案3：添加索引签名（适配任意剩余字段，类型安全较低）

如果剩余参数的字段完全不确定，可以添加索引签名兜底：

interface newONe {
    state: objectType;
    // 允许任意字符串类型的键
    [key: string]: any;
}

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