読者です 読者をやめる 読者になる 読者になる

へっぽこびんぼう野郎のnewbie日記

けろけーろ(´・ω・`)!

全然よくわからないけどReact + TypeScript + webpackをとりあえずつかってみた

TypeScript React webpack JavaScript

前提知識

npm
webpack

このへんの説明は完全に省くので、webpackってなにだとか、webpack.config.jsの設定ってなにするのとか、npmってなんやねんって場合はそっちを読まないとたぶんイミフだと思います。(暗黙の了解とかを多用しているので)

バージョン

webpack: 1.12.14
TypeScript: 1.8.9
React: 15.0.1

追記 (2016/04/13):

TypeScriptがUpdateされて、1.8.10になりました。早い……
1ヶ月とか2ヶ月でアップデートされるもよう。

この記事書いた瞬間は大丈夫だけど、のちのち古い情報になってるのでしれないので注意。
ググってるときに結構古い情報があった。1年前でも結構違っててヤベェので注意。

(´・ω・`)こんなかんじで表示されるよ

f:id:haruharu1:20160411170048p:plain

右側のツールGoogle Chrome Extensionの1つであるReactDevTools
TypeScriptは関係ない

React Developer Toolsというらしい!

便利さが溢れ出ている( ・`ω・´)

ざっくりソース

./foo.ts

/// <reference path="./typings/main.d.ts" />

// reactの読み込みテスト
import * as React from "react";
import * as ReactDOM from "react-dom";

console.log("Check Loading");

console.log(React);

interface Props {
  foo: string;
}
class MyComponent extends React.Component<Props, {}> {
    render() {
        return <span>{this.props.foo}</span>
    }
}

ReactDOM.render(
    <MyComponent foo="( ・`ω・´)" />,
    document.getElementById('content')
);

ソースの意味→IDがcontentのタグに、spanタグをぶちこむだけ

今回やることはこれだけ。

./tsconfig.json

{
    "compilerOptions": {
        "jsx": "react",
        "noImplicitAny": true,
        "preserveConstEnums": true,
        "outDir": "dist",
        "sourceMap": true
    },
    "exclude": [
      "typings/browser.d.ts",
      "typings/browser",
      "node_modules"
    ]
}

これのexcludeの部分を取り除くと、
コンパイル時に/// <reference path="./typings/main.d.ts" /></code>のところで
(2469,9): error TS2300: Duplicate identifier 'tspan'.的なエラーがいっぱい出て怒られる。

Typescript, confusing "duplicate identifier" error message - Stack Overflow



./webpack.config.js

(ソースは省略)

とりあえず{ test: /\.tsx?$/, loader: 'ts-loader' }とか

    resolve: {
        extensions: ['', '.js', '.jsx']
    },

って書いとけばよさげ。
externalに"React"書けよって言ってる人もいるけど、ぼくはコンパイル後のJSの中にReact入れたかったので書かなかった
Reactをnativeで使うと、デバッグのときファイルURLを叩けないとダメなので
DevToolsからIf this is React Native, you need to interact with the app (just tap the screen) in order to establish the bridge.みたいなことを言われる。
なので chrome://extensions の
f:id:haruharu1:20160411171849p:plain
このへんの設定をする。
New React Developer Tools | Hacker News


./hoge.html

<html>
<body>
    <div id="content"></div>
    <script type="text/javascript" src="/path/to/foo.js.bundle.js' %}"></script>
</body>
</html>

これを開くとできてる
foo.js.bundle.jsfoo.tsコンパイルした後のコード。webpack.config.jsで定義してね!

苦しんだとこ

とりあえず$ npm install reactとかしてないと当たり前だけど動かないので、Reactの公式ドキュメントを見るのを推奨。



TypeScriptでは、tsdとかいうのを使って、型のユーザー定義を持ってくるのだというのが昔の話。
いまは非推奨になったので、typingsというやつを使うようだ。npmのモジュール。
typings

TypeScriptの型定義管理ツールTypingsについて - Qiita
TypeScriptのtsdが非推奨になったので、typingsへ移行 - Qiita

$ typings install react react-dom --save --ambientってやると、typings.jsonが出来る。要はtypingsは、ユーザ定義型の管理ツール
ちなみにreact-globalという型もあるけど、こっちはグローバルに使いたい人のやつっぽい。よくわかってない。
JSX | TypeScript Deep Dive

↓こんなかんじ。--ambientについては説明省略。
typings.json

{
  "ambientDependencies": {
    "react": "registry:dt/react#0.14.0+20160319053454",
    "react-dom": "registry:dt/react-dom#0.14.0+20160316155526"
  }
}

これをやるとtypingsディレクトリに型定義がいっぱい入って便利。コンパイルするときに呼び出して「おっ!型やん!つかったろ!」となる。そんな感じ。

「どんな型あるのかな」っていうリファレンスが/// <reference path="./typings/main.d.ts" /></code>っぽい。
毎回書かないといけないっぽい。めんどくさすぎわろすなので自動化しておきたい。

ちなみに、このreference path=~~は、別にインポートではないので注意。

インポートはこっち。これ。他にも書き方があって別にこれだけじゃないもよう。
import * as React from "react";
この"react"の部分は、さっきの$ typings install reactのreact。

ふつうの言語のふつうのインポート。CommonJSとかRequireJSとか言ってるけど、よくわかってないので知らない。

その他詰まったとこ

React.renderは廃止されてたので動かなかった。野生のブログはそのへんを加味してくれていないようだ。
reactjs - Property 'render' does not exist on type 'typeof __React' - Stack Overflow

ts-jsx-loaderとかいうものもあったけど、別に使わなくていい。更新も9ヶ月前で止まってる。
ここでつかってる人がいるみたいだけど、ts-loaderの方で対応してるので、マジ使う意味……
reactjs - Webpack + React + Typescript - Stack Overflow

リファレンス

できたあとに見つけた。typingsのとこだけどちょっと古い情報だけど綺麗にまとまってて嬉しみ。
React+Typescript+Webpackを試してみた - Qiita

全部読んでない。だるしむ。
Working with React and TypeScript

Reactのユーザ定義型が置いてある所。とりあえずGetting Startedだけ読んだ
DefinitelyTyped/react at master · DefinitelyTyped/DefinitelyTyped · GitHub

Microsoftによる、TypeScriptのモジュールについて説明してるやつ。とりあえずこのpagesを読むの大事そう。
TypeScript-Handbook/Modules.md at master · Microsoft/TypeScript-Handbook · GitHub

TypeScriptのインポートらへん
TypeScript のモジュールの使い方 - 鷲ノ巣

説明がざっくりなのは許してください!

説明することがいっぱいあってめんどくさかったのでかなり端折りました!(`・ω・´)!