TypeScript 1.6でReact JSXを使用する

• TypeScript 1.6
  
  • ネイティブJSXサポート
  
  
• 準備する
  
  • TypeScript 1.6 Betaをインストールする
  • package.jsonを作成します
  • gulpfile.jsを作成する
    
    • TypeScriptのコンパイル
    • browserify
    • index.htmlをコピーします
    • gulpfile.jsファイル
    
    
  • TypeScriptの定義
  • tsconfig.jsonの作成
  
  
• React Code
  
  • todoItem.tsxコンポーネント
  • main.tsxコンポーネント
  • bootstrap.ts
  • index.html
  
  
• 打ち上げと花火
  
  • インストールとコンパイル
  • 打ち上げ
  
  
• 結論の代わりに

TypeScript 1.6

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

ネイティブJSXサポート

準備する

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

npm install -g typescript@1.6.0-beta 

 tsc --version 

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

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を作成する

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')); }); 

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.task('through', function () { return gulp .src(['src/index.html']) .pipe(gulp.dest('dist')); }); 

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の定義

 npm install -g tsd 

 tsd query react --action install --save 

注：

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

tsconfig.jsonの作成

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

React Code

todoItem.tsxコンポーネント

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

 import * as React from 'react'; 

 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コンポーネント

 /// <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 

打ち上げ

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

結論の代わりに