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>
関連
-
[解決済み】Typescriptで、! (エクスクラメーションマーク/バン)演算子でメンバを再参照するのは?
-
[解決済み] TypeScriptで文字列を数値に変換する方法とは?
-
[解決済み] TypeScript で `window` に新しいプロパティを明示的に設定するにはどうすればよいですか?
-
[解決済み] TypeScriptでの取得と設定
-
[解決済み] TypeScriptでパラメータとして強く型付けされた関数は可能か?
-
[解決済み] TypeScriptでオブジェクトに動的にプロパティを割り当てるには?
-
[解決済み】TypeScriptのインターフェースと型について
-
[解決済み】TypeScriptの関数のオーバーローディング
-
[解決済み] TypeScriptでObject.keysがkeyof型を返さないのはなぜですか?
-
[解決済み] 新しい Typescript 1.8.4 のビルドエラー。" ビルド。Property 'result' がタイプ 'EventTarget' に存在しません。"
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] ユニオン型からインターセクション型への変換
-
[解決済み] 文字列ユニオンから文字列配列へ
-
[解決済み] Visual Studio Code - インポート引用符の設定を調整する
-
[解決済み] TypeScript 2: 型付けされていない npm モジュールのためのカスタム型付け
-
[解決済み] TypeScriptの"=>"の意味とは?(ファットアロー)
-
[解決済み] TypeScriptとIterator。IterableIterator<T> 型は配列型ではありません。
-
[解決済み] ユーティリティクラスの構成方法
-
インターフェースではなく、リテラルに対して `keyof` 演算子を使用することは可能でしょうか?
-
同じ型を持つ複数のTypeScript変数を宣言する
-
TypeScriptのextendingとintersecting interfacesの違い?