H5W3
当前位置:H5W3 > 其他技术问题 > 正文

【前端问题精选】typescript怎么处理reduce的返回?

在处理浏览器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”,这里应该怎么处理?

求大神指点

回答:

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

回答:

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

回答:

强制变成any使用

回答:

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) 

回答:

{} as Record<string,string>

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

回答:

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

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

本文地址:H5W3 » 【前端问题精选】typescript怎么处理reduce的返回?

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址