質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
SPA(Single-page Application)

SPA(Single-page Application)は、単一のWebページのみでコンテンツの切り替えができるWebアプリケーションもしくはWebサイトです。ブラウザでのページ遷移がないため、デスクトップアプリケーションのようなUXを提供します。

型推論

型推論とは、コンパイラが型を自動で判断する機能を指します。メソッド内のローカル変数の宣言時に型宣言の代わりに指定することで、コードの記述量を減らすことが可能。変数や関数シグネチャに型を宣言せずとも、早期にエラーをチェックできるというメリットもあります。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

解決済

1回答

3190閲覧

typescriptのinterfaceに無名関数を定義した場合の挙動について(React.FunctionComponentの型定義について)

tanana_m

総合スコア28

SPA(Single-page Application)

SPA(Single-page Application)は、単一のWebページのみでコンテンツの切り替えができるWebアプリケーションもしくはWebサイトです。ブラウザでのページ遷移がないため、デスクトップアプリケーションのようなUXを提供します。

型推論

型推論とは、コンパイラが型を自動で判断する機能を指します。メソッド内のローカル変数の宣言時に型宣言の代わりに指定することで、コードの記述量を減らすことが可能。変数や関数シグネチャに型を宣言せずとも、早期にエラーをチェックできるというメリットもあります。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2021/05/11 09:50

知りたいこと

以下のようなinterfaceを定義します。

ts

1interface Itest { 2 (param1: string, param2: number): boolean; 3}

このinterfaceは以下のように使用することができます。

ts

1const testF: Itest = (param1, param2) => { 2 return true; 3};

どうしてこのように使用できるのかがわかりません
typescriptのinterfaceの実装方法について自分でも調べましたが、
このようなinterface内で無名関数のようなものを定義する実装方法について言及されている記事は見つかりませんでした。

また、Itestが以下のような定義の場合、hogeはどのように設定することになるのでしょうか。

ts

1interface Itest { 2 (param1: string, param2: number): boolean; 3 hoge: string; 4}

質問の動機

Reactの理解を深めようと思いReact.FunctionComponentの型定義を読んでいたところ、以下のような実装になっていました。

ts

1 interface FunctionComponent<P = {}> { 2 (props: PropsWithChildren<P>, context?: any): ReactElement<any, any> | null; 3 propTypes?: WeakValidationMap<P>; 4 contextTypes?: ValidationMap<any>; 5 defaultProps?: Partial<P>; 6 displayName?: string; 7 }

2行目の(props: PropsWithChildren<P>, context?: any): ReactElement<any, any> | null;の挙動について調べていましたが自分では解決できず、質問に至りました。

どなたかご教示いただくか、もしくはこの定義方法について言及されているドキュメントのリンクを教えてもらえると幸いです。
宜しくお願い致します。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

hoshi-takanori

2021/05/11 15:39 編集

単純な関数の型は => で書けますが、JavaScript では関数にもプロパティを設定できたり、Date のように Date() と new Date() で挙動が違ったりするので、それを表現するための型なのでは。 https://www.typescriptlang.org/docs/handbook/2/functions.html#construct-signatures また、引数の型によって戻り値の型を変える (オーバーロード) 場合も。 https://typescript-jp.gitbook.io/deep-dive/type-system/functions#no
tanana_m

2021/05/12 02:41

ご教示いただきありがとうございます。 > JavaScript では関数にもプロパティを設定できたり、Date のように Date() と new Date() で挙動が違ったりするので、それを表現するための型なのでは。 関数にプロパティを設定するための型、と考えると納得できました。 具体的な使い道を教えていただきありがとうございます。 > 単純な関数の型は => で書けますが これに関しては、以下のような形で関数の戻り値や引数の型を定義できるという意味で良いでしょうか? ```ts const testFC = (param1: string, param2: number): boolean => { return true } ``` もしくはintaefaceの定義において=>を使用する場合があるということでしょうか?
hoshi-takanori

2021/05/12 02:53

「単純な関数の型は => で書けますが」は例えばこんなのです。 type Itest = (param1: number, param2: number) => boolean;
tanana_m

2021/05/12 03:11

理解しました、ありがとうございます。 もしご存知でしたら、ReactのFunctionComponentの型定義に登場する propTypes, contextTypes, defaultProps, displayNameの使い方についてご教示いただければと思うのですが、可能でしょうか。
tanana_m

2021/05/12 04:28

わかりました。 propTypesは確かにTypeScriptにおいては必要無いのではと思っていたのですが、公式ドキュメントに記載があったのですね、見落としていました。 教えていただきありがとうございます。
guest

回答1

0

ベストアンサー

こちらにあるとおりです。

投稿2021/05/11 09:55

maisumakun

総合スコア145121

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

maisumakun

2021/05/11 09:59

> どうしてこのように使用できるのかがわかりません。 「そういうルールだから」以上の回答を望んでいるのでしょうか?
maisumakun

2021/05/11 10:00

> また、Itestが以下のような定義の場合、hogeはどのように設定することになるのでしょうか。 ふつうに、func.hoge=で読み書きできます(関数オブジェクトにも勝手なプロパティを追加できます)。
tanana_m

2021/05/11 11:08

大変参考になりました。ありがとうございます。 >> どうしてこのように使用できるのかがわかりません。 > >「そういうルールだから」以上の回答を望んでいるのでしょうか? このドキュメントを読んでこういうルールがあるのだと理解しましたので、ご回答の内容で満足しております。 追加で気になった点が2点ありますので、大変恐れ入りますが可能であればご回答いただけないでしょうか。 1.教えていただいたページに飛ぶとページトップにこのページは改訂されていることが提示され、 [go to the new page]のリンクから飛んだ先のページには私の質問に該当する内容がありませんでした。 この内容は最新版のTypeScriptでも有効であると思っていて問題無いのでしょうか。 2.以下のサンプルコードが私の知りたかった内容を網羅しているのですが、このfunctionの定義をアロー関数に置き換えることはできるのでしょうか。 ```ts interface Counter { (start: number): string; interval: number; reset(): void; } function getCounter(): Counter { let counter = function (start: number) {} as Counter; counter.interval = 123; counter.reset = function () {}; return counter; } let c = getCounter(); c(10); c.reset(); c.interval = 5.0; ``` 自分でもトライしてみたのですが解決できず…。 お手数おかけしますが、お返事いただけると幸いです。 宜しくお願い致します。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問