いろいろ把握しないまま頑張ってHello Worldを作ったのでメモ。参考にしたのは、Angular2のチュートリアルと、React+TypeScriptのチュートリアル

出来上がったものは、js-study/react-hello-worldに置いておきました。

package.json

最初に作ったのは、package.json。Angular2のチュートリアル見てたら、scriptのところ使ってて、良さそうだったので取り入れた。tscは後で書くけどTypeScriptのコンパイルツール。

concurrentlyは、複数のコマンドを非同期で実行できるパッケージらしい。今回は、tscのwatchとローカルサーバーのlite-serverを同時に動かしている。concurrentlyは引数も取れて便利ぽい。

reactとreact-domを入れた。これがないとReactが書けないようだったので。

gulpを使う方法もいくつか目にしたけれど、gulpを使うとどんどん肥大化して行ってよくわからなくなったりするので、今回は最初だし簡単そうなこちらの方法を試してみた。そのうちいろんなタスクをやりたくなったらgulpを使わなきゃいけないのかな。

package.json

{ “name”: “project-name”, “version”: “1.0.0”, “scripts”: { “tsc”: “tsc”, “tsc:w”: “tsc -w”, “lite”: “lite-server”, “start”: “concurrent \“npm run tsc:w\” \“npm run lite\” ” }, “license”: “ISC”, “dependencies”: { “react”: “^0.14.6”, “react-dom”: “^0.14.6” }, “devDependencies”: { “concurrently”: “^1.0.0”, “lite-server”: “^1.3.1”, “typescript”: “^1.7.3” } }

$ npm install $ npm start

tsc

tsc周りの設定をする。書いたのは、tsconfig.json。 tsconfig.jsonを書いておくことで変換の自動化をする際の設定を変えられる。

tsconfig.json

これは参考にした二つのサンプルの組み合わせ。ちゃんと理解してない項目もあるけれど、使いながら覚えれば良いかと思っている。jsxはReactのJSX記法をコンパイルするなら書いておく必要があるらしい。rootDirでコンパイル前のディレクトリを指定してoutDirで出力先を指定する。

{ “compilerOptions”: { “target”: “ES5”, “module”: “commonjs”, “moduleResolution”: “node”, “sourceMap”: true, “emitDecoratorMetadata”: true, “experimentalDecorators”: true, “removeComments”: true, “noImplicitAny”: false, “jsx”: “react”, “rootDir”: “src”, “outDir”: “dist” }, “exclude”: [ “node_modules” ] }

tsd

TypeScriptで書くためにはReactなどのJSをTypeScriptから利用できるようにラップした定義ファイルが必要な様子。その定義ファイルを管理するのがtsd。とりあえず必要なreactとreact-domをインストールした。

$ tsd init $ tsd install react —save $ tsd install react-dom —save

tsd.json

{ “version”: “v4”, “repo”: “borisyankov/DefinitelyTyped”, “ref”: “master”, “path”: “typings”, “bundle”: “typings/tsd.d.ts”, “installed”: { “react/react.d.ts”: { “commit”: “b4646ff708f39d2896bcb3e3974667f92e26c5a4” }, “react/react-dom.d.ts”: { “commit”: “b4646ff708f39d2896bcb3e3974667f92e26c5a4” } } }

tsd initをすると、typingというディレクトリができて、その中にtsd.d.tsというまとめファイルができる。今回はこうなった。

矢印があるのは自動生成されていないファイルで中身はこうなっている。

/// /// import React = __React; import ReactDOM = __React.__DOM;

参考サイトのものをちょっと変えただけなんだけど、実際、react.d.tsもreact-dom.d.tsも__Reactとかちょっと変な変数の書き方をしている（理由があるんだろうけど、名前衝突回避かな？？）。そこで、それを扱いやすいように書き換えてimportしている（あっているかな）。TypeScriptのファイルから利用するときは、

///

となる。これは2番目の参考サイトの受け売りだしなんかちょっと不格好な気がするのでまだ納得してない。

DefinitelyTyped/DefinitelyTypedというレポに変換の定義ファイルがまとまっているらしいが、沢山ある。

index.htmlとapp.tsx

今回とりあえず書いてみたのはこれ。

ファイル構成

. ├── dist │   ├── app.js │   └── app.js.map ├── index.html ├── node_modules ├── package.json ├── src │   └── app.tsx ├── tsconfig.json ├── tsd.json └── typings ├── react │   ├── react-dom.d.ts │   ├── react-global.d.ts │   └── react.d.ts └── tsd.d.ts

app.tsx

/// namespace app.components { export class App extends React.Component { style: any; constructor() { super() this.style = { title: { color: “#ddd”, textAlign: “center” } } }

public render(){
  return (
    

      

Hello world!

  )
}

} }

var App = app.components.App; ReactDOM.render( , document.getElementById(‘app’) );

styleは中で指定している。cssをstyleという変数に書いてみてんだけど型をどうすれば良いかわからず、anyにしている。

index.html

index.htmlはこうなった。

初心者すぎる記事です。なにか、アドバイスがあればお願いします＞＜