⛺️ 👮 🙇🏽 TypeScript 1.6でReact JSXを使用する 🍳 👩🏼‍🌾 🔪

少し前、マイクロソフトはTypeScript 1.6 Betaのリリースを発表しました。私の意見では、興味深い革新の1つは、React / JSXのサポートであり、TypeScriptの機能とともに、新しい可能性を開きます。

TypeScript + Reactバンドルの使用を開始した方法、発生した問題、および解決方法について、個人的な経験についてお話します。また、TypeScript + React（ Githubへのリンク）で最小限のToDoアプリケーションのコードを動作させるために、gulpタスクの例を示します。

興味があるなら、猫の下に行ってください。

TypeScript 1.6

この更新によってもたらされた主な変更と追加は次のとおりです。

ES6イテレーター
ローカルタイプ
ネイティブJSXサポート
抽象クラスとメソッド

完全なリストと問題へのリンクは、 Githubで見つけることができます。 habrasocietyの誰かがすべての変更のより完全なレビューを行うことを願っています。そのうちの1つだけに注目します。

ネイティブJSXサポート

「うわー」-これは私が発表を読んだときの最初の考えです。しかし、その後、問題が発生しました。エッジテクノロジーをただ使用して使用することはできないためです。したがって、クールな型付きコードの作成を開始する前に、コンソールで少し作業して、コードのアセンブリと展開に関する将来の問題を回避する必要があります。

準備する

デフォルトでは、現在のバージョンのnodejsおよびnpmがインストールおよび構成されていると想定しています。

TypeScript 1.6 Betaをインストールする

TypeScript 1.6 Betaをグローバルスコープにインストールするには、次のコマンドを使用します。

npm install -g typescript@1.6.0-beta

その後、 コンソールでtscコマンドが使用可能になります-これは実際にはTypeScriptのコンパイラです。バージョン1.6-betaがインストールされていることを確認してください。

次のコマンドを使用して、すべてがインストールされたことを確認します。

 tsc --version

ローカルインストールの場合、次のコマンドを使用します。

 npm install typescript@1.6.0-beta --save-dev

package.jsonを作成します

package.jsonファイルには、アプリケーションに関する情報（名前、バージョン、依存関係など）が含まれています。このファイルがあるディレクトリは、公開しない場合でもNode.jsパッケージとして解釈されます。

package.jsonファイルの使用方法は、パッケージをダウンロードするか公開するかによって異なります。この場合、プロジェクトの依存関係のリストが含まれます。

 { "name": "tsc-react-gulp-example", "version": "1.0.0", "dependencies": { "react": "^0.13.3" }, "devDependencies": { "browserify": "^11.0.0", "del": "^1.2.0", "gulp": "^3.9.0", "gulp-typescript": "^2.8.0", "typescript": "next", "vinyl-source-stream": "^1.1.0" } }

gulpfile.jsを作成する

私はgulpをプロジェクトビルダーとして使用しましたが、私にとっては、主なものはアイデアであるため、大きな違いはありません。プロジェクトをビルドするには、既製のnpmパッケージgulp -typescriptを使用してTypeScriptをコンパイルし、 browserifyを使用してプロジェクトの依存関係を処理します。

TypeScriptのコンパイル

TypeScriptをコンパイルするためのタスクは次のとおりです。

 var gulp = require('gulp'), typescript = require('typescript'), ts = require('gulp-typescript'), var project = ts.createProject('src/tsconfig.json', {typescript: typescript}); gulp.task('compile', function () { var result = gulp .src('src/**/*{ts,tsx}') .pipe(ts(project)); return result.js.pipe(gulp.dest('.tmp')); });

ここでは、以前にレビューしたプロジェクトファイルを使用しました。詳しくは、プロジェクトのgithubページをご覧ください。

browserify

プロジェクトバンドルを作成するタスクは次のとおりです。

 var gulp = require('gulp'), browserify = require('browserify'), source = require('vinyl-source-stream'); gulp.task('bundle', function () { var b = browserify('.tmp/bootstrap.js'); return b.bundle() .pipe(source('bundle.js')) .pipe(gulp.dest('dist')); });

index.htmlをコピーします

静的ファイルを操作してgulpにコピーする例として、 index.htmlをdistフォルダーにコピーするgulpタスクの例を示します。

 gulp.task('through', function () { return gulp .src(['src/index.html']) .pipe(gulp.dest('dist')); });

gulpfile.jsファイル

gulpfile.js全体は次のようになります。

ソースパッケージgulpfile.jsをダウンロード

 'use strict'; var gulp = require('gulp'), typescript = require('typescript'), ts = require('gulp-typescript'), browserify = require('browserify'), source = require('vinyl-source-stream'), del = require('del'); var project = ts.createProject('src/tsconfig.json', {typescript: typescript}); gulp.task('through', function () { return gulp .src(['src/index.html']) .pipe(gulp.dest('dist')); }); gulp.task('compile', function () { var result = gulp.src('src/**/*{ts,tsx}') .pipe(ts(project)); return result.js.pipe(gulp.dest('.tmp')); }); gulp.task('bundle', ['through','compile'], function () { var b = browserify('.tmp/bootstrap.js'); return b.bundle() .pipe(source('bundle.js')) .pipe(gulp.dest('dist')) ; }); gulp.task('clean', function (done) { del(['.tmp'], done.bind(this)); });

TypeScriptの定義

TypeScriptの定義の詳細については説明しませんが、これについて多くのクールな記事が書かれています。 JSで記述されたライブラリを使用できるようにするには、これらの同じTypeScript定義を使用する必要があるとしか言えません。そして、人気のあるプロジェクトのために人々がそのような定義を書くオープンソースプロジェクトさえあります。サイトで検索してダウンロードするか、このプロセスを簡素化するコンソールユーティリティを配置できます。

 npm install -g tsd

このユーティリティを使用して、Reactの定義をダウンロードし、 tsd.jsonファイルにTypeScript Definitionエントリを保存します。

 tsd query react --action install --save

注：

プロジェクトはオープンソースであり、コミュニティによって開発され、積極的にサポートされています-borisyankov / DefinitelyTyped 。

tsconfig.jsonの作成

tsconfig.jsonファイルには、プロジェクトのコンパイル設定が保存されます。このようなファイルは、バージョン1.5以降のコンパイラでサポートされています。 React / JSXのファイルをコンパイルするための最小のtsconfig.jsonは次のとおりです。

 { "compilerOptions" : { "module" : "umd", "jsx" : "react" } }

React Code

TypeScript + Reactバンドルの操作の例として、最小限のtodoアプリケーションを作成します。

todoItem.tsxコンポーネント

最小のブリック、つまりTodoItemから始めましょう。 ReactのTypeScript定義をファイルの先頭に追加します。

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

次に、Reactをクラスにインポートします。

 import * as React from 'react';

要素のITodoインターフェイスを定義します。

 interface ITodo { description: string; }

コンポーネントの状態とプロパティのインターフェース：

 export interface ITodoItemState {} export interface ITodoItemProps { item: ITodo; onRemove?: (todo: ITodo) => any; key?: number; }

コンポーネント自体は次のようになります。

 export class TodoItem extends React.Component<ITodoItemProps, ITodoItemState> { constructor () { super(); this.removeItem = this.removeItem.bind(this); } removeItem () { this.props.onRemove(this.props.item); } render () { return ( <li> <span> {this.props.item.description} </span> <button onClick={this.removeItem} >delete</button> </li> ); } }

main.tsxコンポーネント

このコンポーネントには、アプリケーションのメインロジックが含まれます。原則はTodoItemコンポーネントと同じなので、ファイルの完全なリストを提供します。

main.tsx

 /// <reference path="../../typings/react/react.d.ts" /> import * as React from 'react'; import {TodoItem} from './todoItem'; interface ITodo { description: string; key: number; } export interface IMainState { newItem?: { description: string; }; todoList?: ITodo[]; } export interface IMainProps {} export class Main extends React.Component<IMainProps, IMainState> { state: IMainState = {newItem: {description: ''}, todoList: []} constructor () { super(); this.changeName = this.changeName.bind(this); this.addItem = this.addItem.bind(this); this.removeItem = this.removeItem.bind(this); } changeName (e: any) { this.setState({ newItem: { description: e.target.value } }); } addItem () { var list = this.state.todoList; list.push({ description: this.state.newItem.description, key: new Date().getTime() }); this.setState({ todoList: list, newItem: {description: ''} }); } removeItem (item: ITodo) { var list = this.state.todoList.filter(i => i.key !== item.key); this.setState({todoList: list}); } render () { var todoItems = this.state.todoList.map(item => { return <TodoItem key={item.key} item={item} onRemove={this.removeItem} ></TodoItem>; }); return ( <div> <div> <input type="text" placeholder="input new item" value={this.state.newItem.description} onChange={this.changeName} /> <button onClick={this.addItem} >add</button> </div> <ul>{todoItems}</ul> </div> ); } }

bootstrap.ts

このファイルは、アプリケーションの開始点として機能し、メインコンポーネントを呼び出すためのロジックが含まれています。

 /// <reference path="../typings/react/react.d.ts" /> import * as React from 'react'; import {Main} from './Main/main'; React.render(React.createElement(Main), document.getElementById('main'));

index.html

スタイルなどを追加しなかったため、ファイルのソースコードは次のようになります。

 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>tsc-react-example</title> </head> <body> <div id="main"></div> <script src="bundle.js"></script> </body> </html>

打ち上げと花火

インストールとコンパイル

すべてのファイル、フォルダー、およびタスクが作成されたら、次を実行します。

 npm install

すべてのパッケージをインストールするため：

 gulp bundle

アプリケーションをコンパイルします。

打ち上げ

ここではすべてが散文的です-distフォルダーにお気に入りのサーバーを設定し、次のように結果を楽しみます：

 cd dist npm install -g http-server http-server -p 3000

次に、 localhost：3000 / index.htmlにアクセスしてテストします。

結論の代わりに

このミニガイドに記載されているすべてのコードは、ここにあります。コメントや提案は大歓迎です。

ご清聴ありがとうございました。

ハッピーコーディング！

TypeScript 1.6でReact JSXを使用する