如何将{ [k: string]: string; }类型转换为自定义urlParamsType类型？

我定义了如下自定义类型：

type urlParamsType = {
    drawer: 'true' | undefined,          
    action: 'edit' | 'create' | undefined,     
}

尝试在组件中使用该类型时：

const MyComponent = () => {
     const { drawer, action}: urlParamsType = useUrlSearchParams();     
}

由于useUrlSearchParams返回类型为{ [k: string]: string; }，代码报错：

Type '{ [k: string]: string; }' is missing the following properties from type 'urlParamsType': drawer, action

解决方案 #

方案1：类型断言（快速实现）

直接用as关键字做类型断言，告知TypeScript你确认返回值匹配目标类型：

const MyComponent = () => {
     const { drawer, action } = useUrlSearchParams() as urlParamsType;     
}

注：因为你的自定义类型允许属性值为undefined，即便运行时useUrlSearchParams返回的对象没有drawer或action键，解构后的值会是undefined，刚好符合类型定义，所以这种方式是安全的。

方案2：运行时类型检查（更严谨）

通过运行时验证确保属性值完全符合类型约束：

const MyComponent = () => {
    const params = useUrlSearchParams();
    
    let drawer: 'true' | undefined = undefined;
    if (params.drawer === 'true') {
        drawer = params.drawer;
    }

    let action: 'edit' | 'create' | undefined = undefined;
    if (params.action === 'edit' || params.action === 'create') {
        action = params.action;
    }

    // 后续可安全使用drawer和action
}

方案3：封装转换函数（最安全）

写一个转换函数，明确处理从原始类型到自定义类型的映射逻辑：

const convertToUrlParams = (rawParams: { [k: string]: string }): urlParamsType => {
    return {
        drawer: rawParams.drawer === 'true' ? 'true' : undefined,
        action: ['edit', 'create'].includes(rawParams.action) ? rawParams.action as 'edit' | 'create' : undefined
    };
};

const MyComponent = () => {
    const { drawer, action } = convertToUrlParams(useUrlSearchParams());
}

报错原因 #

urlParamsType要求必须包含drawer和action属性（即使值为undefined），但useUrlSearchParams返回的是字符串索引类型，TypeScript无法确认该对象一定存在这两个属性，因此抛出缺失属性的错误。

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