本文介绍了TypeScript typeof 函数返回值的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

承认我有这样的功能

const createPerson = () =>({ firstName: 'John', lastName: 'Doe' })

如何在声明 createPerson 之前不声明接口或类型,获取返回值类型?

像这样:

type Person = typeof createPerson()

示例场景

我有一个 Redux 容器,它将状态和分派动作映射到组件的 props.

containers/Counter.tsx

import { CounterState } from 'reducers/counter'//... 这里我还定义了 MappedState 和 mapStateToProps//我想移除的接口接口映射调度{增量:() =>任何}//并获取该函数的返回值类型const mapDispatchToProps =(调度:调度):映射调度=>({增量:() =>调度(增量)})//在这里导出它而不是 MappedDispatch导出类型 MappedProps = MappedState &映射调度导出默认连接(mapStateToProps,mapDispatchToProps)(计数器)

components/Counter.tsx

import { MappedProps } from 'containers/Counter'导出默认值(道具:MappedProps)=>(<div><h1>计数器</h1><p>{props.value}</p><button onClick={props.increment}>+</button>

)

我希望能够导出 mapDispatchToProps 的类型而无需创建 MappedDispatch 接口.

我在这里减少了代码,但它让我输入了两次相同的东西.

解决方案

原帖

打字稿

我创建了一个允许变通方法的小库,直到将完全声明性的方式添加到 TypeScript 中:

https://npmjs.com/package/returnof

还在 Github 上创建了一个问题,要求 泛型类型推断,这将允许以完全声明的方式来做到这一点:

https://github.com/Microsoft/TypeScript/issues/14400

2018 年 2 月更新

TypeScript 2.8

TypeScript 2.8 引入了一个新的静态类型 ReturnType,它允许实现:

https://github.com/Microsoft/TypeScript/pull/21496

您现在可以以完全声明的方式轻松获取函数的返回类型:

const createPerson = () =>({firstName: '约翰',姓氏:'母鹿'})type Person = ReturnType

Admit I have a function like this

const createPerson = () => ({ firstName: 'John', lastName: 'Doe' })

How can I, without declaring an interface or a type before declaring createPerson, get the return value type?

Something like this:

type Person = typeof createPerson()


Example Scenario

I have a Redux container that maps state and dispatch actions to props of a component.

containers/Counter.tsx

import { CounterState } from 'reducers/counter'

// ... Here I also defined MappedState and mapStateToProps

// The interface I would like to remove
interface MappedDispatch {
  increment: () => any
}

// And get the return value type of this function
const mapDispatchToProps =
  (dispatch: Dispatch<State>): MappedDispatch => ({
    increment: () => dispatch(increment)
  })

// To export it here instead of MappedDispatch
export type MappedProps = MappedState & MappedDispatch
export default connect(mapStateToProps, mapDispatchToProps)(Counter)

components/Counter.tsx

import { MappedProps } from 'containers/Counter'

export default (props: MappedProps) => (
  <div>
    <h1>Counter</h1>
    <p>{props.value}</p>
    <button onClick={props.increment}>+</button>
  </div>
)

I want to be able to export the type of mapDispatchToProps without having to create MappedDispatch interface.

I reduced the code here, but it makes me type the same thing two times.

解决方案

Original Post

TypeScript < 2.8

I created a little library that permits a workaround, until a fully declarative way is added to TypeScript:

https://npmjs.com/package/returnof

Also created an issue on Github, asking for Generic Types Inference, that would permit a fully declarative way to do this:

https://github.com/Microsoft/TypeScript/issues/14400


Update February 2018

TypeScript 2.8

TypeScript 2.8 introduced a new static type ReturnType which permits to achieve that:

https://github.com/Microsoft/TypeScript/pull/21496

You can now easily get the return type of a function in a fully declarative way:

const createPerson = () => ({
  firstName: 'John',
  lastName: 'Doe'
})

type Person = ReturnType<typeof createPerson>

这篇关于TypeScript typeof 函数返回值的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

09-05 11:44