typescript怎么处理reduce的返回？

Question

在处理浏览器url参数的时候，发现只用类型推论，解决不了下面的问题

相关代码

const search = location.href.split('?')[1] // 例如 'a=123&b=456'
const searchArr = search.split('&') // 例如 ['a=123', 'b=456']
const query = searchArr.reduce((accumulator, currentValue) => {
  const [key, value] = currentValue.split('=')
  accumulator[key] = value
  return accumulator
}, {}) // 例如{ a: 123, b: 456 }
console.log(query.a) // ts报错类型“{}”上不存在属性“a”，这里应该怎么处理？

求大神指点

Answer 1

可以用类型断言array.reduce((res, v) => ..., {} as Type);至于Type是要严格的某个类型或者是any又或者简单的Record<string, string>都可以。

Answer 2

你可以看看web标准的URLSearchParams的API是怎么设计的
https://developer.mozilla.org...
你知道url里一定有一个key为a的searchparam，但ts怎么知道
你要是非要让ts知道就肯定要在某个地方做强制类型转化
你这种写法一点都不ts

Answer 3

强制变成any使用

Answer 4

const search = 'http://www.baidu.com?a=123&b=456'.split('?')[1] // 例如 'a=123&b=456'
const searchArr = search.split('&') // 例如 ['a=123', 'b=456']
interface IQueryProps {
    a: string;
    b: string;
}
type TKeyProps = keyof IQueryProps
const initQuery = {
    a: '',
    b: ''
}
const query = searchArr.reduce((accumulator: IQueryProps, currentValue: string):IQueryProps => {
  const [key, value] = currentValue.split('=')
  accumulator[key as TKeyProps] = value
  return accumulator
}, initQuery) // 例如{ a: 123, b: 456 }
console.log(query.a) 

Answer 5

{} as Record<string,string>

哪怕 js 你也只能是运行时才能知道返回的对象有什么 key ，所以这就是个 record 啊亲。

Answer 6

const query = searchArr
    .reduce((accumulator, currentValue) => {
        const [key, value] = currentValue.split('=')
        accumulator[key] = value
        return accumulator
    }, {} as { [key: string]: any });
//        ^^^^^^^^^^^^^^^^^^^^^^^^^

注释标记处可以根据实际情况，修改为更为精确的类型（不过从代码来看，目前这个类型比较合适）