型定義付きライブラリの型の探し方がわからない

TypeScript初心者です。

わからないこと

例えば、Reactのコードです。

import * as React from 'react';

interface Props {
	data: string;
}

const ChildComponentPresenter: React.SFC<Props> = props => (
	<Txt>{props.data}</Txt>
);

ChildComponentPresenterというコンポーネントをReactの方定義ファイルの中からReact.SFCという型で型付けをしています。
これは、「TypeScriptでReactを書いてみた」的なブログ記事などを参考にして、React.SFCという型が定義されていて、それをstateless functional componentにあてればいいのかということを知りました。

node_moduleの中にReactの型定義ファイルを直接見ることもできますが、
interfaceやtypeなどがたくさん書かれていて、いつどれにどれを適用したらいいのかさっぱりわかりません。

エディタにはatomを使っていて、関数などにカーソルをあてれば、型情報などが表示されますが、
これが表示されたところでどう適用したらいいのかわかりません。

以上はReactを例に上げましたが、その他のライブラリでも同様です。
現在は、先人のコードを参考にしながらあっているのかもわからないまま適用していてとても良くないと感じているのですが、
良い勉強の進め方がわかりません。

型定義ファイルを使いこなすときに、気をつけるべき着眼点や、
「型定義ファイル初心者はこのサイトを見るといいよ」といったものがあれば教えていただけると嬉しいです。

よろしくおねがいします。

行動規範の内容に同意します

回答2件

自分の場合は、型定義が複雑なライブラリで型の指定方法に悩んだ時には、型定義ファイルのテストコードを見るようにしてます。

大抵のライブラリは DefinitelyTyped にある型定義を使っているので、そこを探してみるといいと思います。例えばReactならここにテストコードがあるので見てみてください。

投稿2018/07/12 14:14

編集2018/07/12 14:18

kakajika

総合スコア3131

Atomは知りませんがVisual Studio Codeでは型定義へジャンプできます。

たぶんAtomもあるのではないでしょうか。

これが表示されたところでどう適用したらいいのかわかりません。

それを見ても分からないということでしたら,TypeScriptや型定義が分かっていないのではなくReactの使い方が分からないということだと思います。

    type SFC<P = {}> = StatelessComponent<P>;
    interface StatelessComponent<P = {}> {
        (props: P & { children?: ReactNode }, context?: any): ReactElement<any> | null;
        propTypes?: ValidationMap<P>;
        contextTypes?: ValidationMap<any>;
        defaultProps?: Partial<P>;
        displayName?: string;
    }

上記の型定義から以下のように使用できるというところまでは分かります。

interface HogeProps {
  text: string;
}
const Hoge: React.SFC<HogeProps> = (props: HogeProps) => {
  return (
    <p>{props.text}</p>
  );
};

..........

Hoge.defaultProps = {
  text: 'HELLO WORLD'
};
Hoge.displayName = 'hoge';

ただしdefaultPropsやdisplayNameが何に使用されるのかはReact自体の仕様なので,TypeScriptや型定義は関係ないです。

なので