1. ホーム
  2. typescript

TypeScript typeof 関数の戻り値

2023-11-13 11:40:20

質問内容

このような関数があることを認めてください

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

どうすれば インターフェイスや型を宣言することなく を宣言する前に createPerson を宣言する前に、戻り値の型を取得しますか?

このようなものです。

type Person = typeof createPerson()


シナリオの例

Reduxコンテナで、コンポーネントのpropsにステートとディスパッチアクションをマッピングしています。

コンテナ/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)

コンポーネント/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>
)

の種類をエクスポートできるようにしたい。 mapDispatchToProps を作成することなく MappedDispatch インターフェースを作成する必要がありません。

ここでコードを縮小しましたが、同じものを2回入力させられます。

どのように解決するのですか?

元の記事

TypeScript < 2.8

TypeScriptに完全に宣言的な方法が追加されるまでの間、回避策を可能にする小さなライブラリを作成しました。

https://npmjs.com/package/returnof

また、Github に課題を作成し、以下のことを求めました。 一般的な型の推論 を求める課題も作成し、これを行うための完全に宣言的な方法を許可しています。

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


2018年2月更新

タイプスクリプト2.8

TypeScript 2.8では、新しい静的型である ReturnType が導入され、それを実現することができるようになりました。

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

完全に宣言的な方法で、関数の戻り値の型を簡単に取得できるようになりました。

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

type Person = ReturnType<typeof createPerson>