React始めました〜④TypeScriptで書いててつまづいた点

前書き

だいぶサボってしまいましたorz
最近はReactはおろか、時間があってもYouTubeをテキトーに見て過ごしてしまっています。。。
そろそろ、もう一度気合いを入れ直し頑張っていこうと思います（いつまで続くか分かりませんが。。。）

Reactの方は前述の通り、まるっきり触っていないんですが実は最近、仕事の方でTypeScriptを使っています。
そのおかげでようやくTypeScriptに慣れてきた感じです。

やはり独学でやるのと違い、出来る方のコードをすぐ見れるのと触れている時間が多いのでこれは覚えるなー
とか思っています。

「そんなんどーでもええわっ！」

って訳で、以前にReact + TypeScriptで書いててつまづいた点を備忘録としてまとめていきたいと思います。

props、stateを使うにはインターフェースが必要

これ、超基礎的なことかもしれませんが。。。React＆TypeScript初心者にはしんどかったです
「どーせ、TypeScriptって言っても普通のJavaScriptでも動くんでしょ？簡単じゃん？」
的な感覚で普通のjsxの記法で見よう見まねで書いたらエラー！ってなって焦りました。

TypeScriptでは以下のように書く必要があるみたいです。

import * as React from 'react';

interface Props {
  hoge: string;
}
interface State {
  foo: string;
}
class Item extends React.Component<Props, State> {
  constructor(props: Props) {
    super(props);
    this.state = {
      foo: ''
    }
   }
  render() {
/* 省略 */

react-addons-css-transition-groupを使う場合は型定義ファイルを書き換える

Reactのアニメーションアドオン'react-transition-group'というものがあると知り、
使ってみようと思ったらつまづきました。

npm install react-addons-css-transition-group @types/react-addons-css-transition-group

まず、アドオンをインストールし。。。

import ReactCSSTransitionGroup from 'react-addons-css-transition-group';

こんな感じでインポートし、実行したら。。。

error TS1192: Module '"my-app/node_modules/@types/react-addons-css-transition-group/index"' has no default export.

ピギィィィィィ！

どうやら、node_modules/@types/react-addons-css-transition-group/index.d.tsの最後を

// export = ReactCSSTransitionGroup; // ←変更前
/* ↓変更↓ */
export default ReactCSSTransitionGroup; // 変更後

に書き変えればエラーが消えるみたいです。

Reactコンポーネントの型はJSX.Element

こちらはつまづいたというより、気になったので調べた部分です。

「Reactコンポーネントを変数に入れたり、配列に入れたりする際の型ってなんだろ？
anyでいけそうだけどそれって最終手段だよなー」
って思ったのがきっかけで調べました。

import Hoge from './Hoge';
const hoge: JSX.Element = <Hoge foo='enjoy' />;

こんな風に書くみたいです。

まとめ

とりあえず少し触ってつまづいた点は以上になります。
もっとゴリゴリ書いてReactマスターになりたいなーとは思っていますが、なかなか出来ないでいますorz
まぁ、そもそも普通のJavaScriptが怪しいのでそっからなんですが。。。
というわけで、いつまで続くか分かりませんがモチベーションの続く限り頑張っていこうと思います笑