缘由

最近在业余学习React,本身接触的egret一年多了,接触TypeScript时间还算有段时间,非常喜欢TypeScript。学习了TypeScript 就再也不想写JavaScript了。看了找了好些教程都是直接用JavaScript来写React,比较痛苦。今天找到了一篇比较好的教程。于是就想翻译一下,这里是原始博客链接,于是就有了这篇博客。

简单的介绍使用TypeScript 和 Atom 来开发 React 应用。

我们准备从 TodoMVC 项目开始,使用React 和 TypeScript 来开发著名的TODO App.

在这篇文章中你将学习到如下内容:

  • 1.搭建开发环境
  • 2.设置项目
  • 3.React 基础组件
  • 4.使用TypeScript 开发 React组件
  • 5.编译应用
  • 6.运行应用

搭建开发环境

我们将开始搭建开发环境

$ npm install -g typescript tsd

说明:如果你使用的是OSX系统,请在命令行前面加上 sudo

  • 为Atom安装 atom-typescript插件

$ apm install atom-typescript

这个插件有一些很酷的功能,如HTML 转换成 TSX:

或依赖视图:

如果你感兴趣,请到project’s page on Github查看该插件更多的功能。

这个插件方便我们调试React应用 可以查看属性值和所选组件的状态。

设置项目

到本教程结束时,该项目的结构类似下面的一个:

让我们从创建应用的根目录开始

1
2
$ mkdir typescript-react
$ cd typescript-react

然后在项目的根目录里面创建 package.json 文件

1
2
3
4
5
6
7
8
{
private: true,
dependencies: {
director: "^1.2.0",
react: "^0.13.3",
todomvc-app-css: "^2.0.0"
}
}

再然后你可以使用npm来安装项目所依赖的文件

1
2
// 在项目的根目录文件
$ npm install

这个命令会在项目的根目录生成一个node_modules文件夹,在node_modules文件夹下会包含有三个文件,分别是director,reacttodomvc-app-css

我们现在开始安装一些TypeScript类型定义文件

类型定义文件通常用于定义公用的第三方库文件API接口,比如React。在一些IDE中使用TypeScript开发应用,IDE可以通过这些接口提供一些代码提示,方便项目的开发。

类型定义文件也用于编译器来确保我们正确地使用第三方库。

我们现在需要React 的类型定义文件,我们可以通过下面的命令来创建他们。

1
2
3
//在应用的根目录
$ tsd init
$ tsd install react --save

以上命令会在应用的根目录创建一个 tsd.json文件和 typings文件夹,在typings文件夹中包含react文件夹

我们也需要下载然后取名为global.d.ts保存到typings/react文件夹下。

我们现在到应用根目录创建index.html文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!doctype html>
<html lang="en" data-framework="typescript">
<head>
<meta charset="utf-8">
<title>React • TodoMVC</title>
<link rel="stylesheet"
href="node_modules/todomvc-common/base.css">
<link rel="stylesheet"
href="node_modules/todomvc-app-css/index.css">
</head>
<body>
<section class="todoapp"></section>
<footer class="info">
<p>Double-click to edit a todo</p>
<p>
Created by
<a href="http://github.com/remojansen/">Remo H. Jansen</a>
</p>
<p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
</footer>
<script type="text/javascript"
src="node_modules/react/dist/react-with-addons.js">
</script>
<script type="text/javascript"
src="node_modules/director/build/director.js">
</script>
<script type="text/javascript" src="js/constants.js"></script>
<script type="text/javascript" src="js/utils.js"></script>
<script type="text/javascript" src="js/todoModel.js"></script>
<script type="text/javascript" src="js/todoItem.js"></script>
<script type="text/javascript" src="js/footer.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</body>
</html>

此时,你的应用目录结构应该是这样的

你可能注意到在index.html文件中有些JavaScript文件是缺少的,我们接下来将解决这个问题。

React 基础组件

组件是React的主要应用程序块,一个组件表示一个自包含的用户界面,组件通常会显示一些数据,并且能够处理一些用户交互。

组件可以包含子组件。我们即将开发的应用程序是非常小的,所以我们只会开发一个顶级组件取名TodoApp。

TodoApp 组件将有多个组件组成,包含一个TodoFooter组件和一些TodoItem组件。

组件区分不同的数据集:属性和状态

属性

属性(短的属性)是一个组件的配置,它的选项,如果你可以。它们是从上面接收到的,并且是不可改变的,因为接收它们的组件是有关的。

组件不能更改其属性,但它负责将其子组件的属性放在一起。

状态

该状态从一个组件安装时开始,并在时间(主要是用户事件产生的情况下)遭受突变。这是一个序列化表示在时间快照一点

组件管理其自己的内部,除了设置初始状态与它的孩子的状态不改。你可以说内部是私有的。

当我们使用TypeScript定义一个新的React组件的时候,我们必须申明接口的属性和状态,如下:

1
2
3
class SomeComponent extends React.Component<ISomeComponentProps, ISomeComponentState> {
// ...
}

现在,我们有我们的项目结构的地方,我们知道的基本知识,现在开始开发我们的组件。

使用TypeScript 开发 React组件

我们在应用根目录下创建一个名为js的文件夹,然后我们将创建如下图的目录结构文件

当我们创建完成之后,我们可以随意的修改它们。

interfaces.d.ts

我们将把我们应用中的所有接口都定义在此文件中。我们使用的扩展。d.ts(这也是由类型定义文件使用)代替。TS因为这个文件不会编译成为JavaScript文件。在我们编程过程中,此文件不会被编译,因为TypeScript接口不会编译成JavaScript。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
// Defines the interface of the structure of a task
interface ITodo {
id: string,
title: string,
completed: boolean
}
// Defines the interface of the properties of the TodoItem component
interface ITodoItemProps {
key : string,
todo : ITodo;
editing? : boolean;
onSave: (val: any) => void;
onDestroy: () => void;
onEdit: () => void;
onCancel: (event : any) => void;
onToggle: () => void;
}
// Defines the interface of the state of the TodoItem component
interface ITodoItemState {
editText : string
}
// Defines the interface of the properties of the Footer component
interface ITodoFooterProps {
completedCount : number;
onClearCompleted : any;
nowShowing : string;
count : number;
}
// Defines the TodoModel interface
interface ITodoModel {
key : any;
todos : Array<ITodo>;
onChanges : Array<any>;
subscribe(onChange);
inform();
addTodo(title : string);
toggleAll(checked);
toggle(todoToToggle);
destroy(todo);
save(todoToSave, text);
clearCompleted();
}
// Defines the interface of the properties of the App component
interface IAppProps {
model : ITodoModel;
}
// Defines the interface of the state of the App component
interface IAppState {
editing? : string;
nowShowing? : string
}

常量

这个文件用于定义一些常量。通常用于保存一些键盘的常量和一些事件。

我们也可以用一些值来区分一些任务的当前状态:

  • COMPLETED_TODOS 用于完成任务时
  • ACTIVE_TODOS 用于没有完成任务时
  • ALL_TODOS 用于显示所有任务时使用
1
2
3
4
5
6
7
namespace app.constants {
export var ALL_TODOS = 'all';
export var ACTIVE_TODOS = 'active';
export var COMPLETED_TODOS = 'completed';
export var ENTER_KEY = 13;
export var ESCAPE_KEY = 27;
}

实用工具

这个文件包含一个叫Utils的类。这个类不仅仅包含是一些静态方法。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
namespace app.miscelanious {
export class Utils {
// generates a new Universally unique identify (UUID)
// the UUID is used to identify each of the tasks
public static uuid() : string {
/*jshint bitwise:false */
var i, random;
var uuid = '';
for (i = 0; i < 32; i++) {
random = Math.random() * 16 | 0;
if (i === 8 || i === 12 || i === 16 || i === 20) {
uuid += '-';
}
uuid += (i === 12 ? 4 : (i === 16 ? (random & 3 | 8) : random))
.toString(16);
}
return uuid;
}
// adds 's' to the end of a given world when count > 1
public static pluralize(count, word) {
return count === 1 ? word : word + 's';
}
// stores data using the localStorage API
public static store(namespace, data?) {
if (data) {
return localStorage.setItem(namespace, JSON.stringify(data));
}
var store = localStorage.getItem(namespace);
return (store && JSON.parse(store)) || [];
}
// just a helper for inheritance
public static extend(...objs : any[]) : any {
var newObj = {};
for (var i = 0; i < objs.length; i++) {
var obj = objs[i];
for (var key in obj) {
if (obj.hasOwnProperty(key)) {
newObj[key] = obj[key];
}
}
}
return newObj;
}
}
}

模型

TodoModel 是一个通用 “model” 对象。由于这个应用程序是非常小的,它甚至可能不值得把这个逻辑分开,但我们这样做是为了演示一种方式来分离你的应用程序的部分。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
/// <reference path="../typings/react/react-global.d.ts" />
/// <reference path="./interfaces.d.ts"/>
namespace app.models {
export class TodoModel implements ITodoModel {
public key : string; // key used for local storage
public todos : Array<ITodo>; // a list of tasks
public onChanges : Array<any>; // a list of events
constructor(key) {
this.key = key;
this.todos = app.miscelanious.Utils.store(key);
this.onChanges = [];
}
// the following are some methods
// used to manipulate the list of tasks
public subscribe(onChange) {
this.onChanges.push(onChange);
}
public inform() {
app.miscelanious.Utils.store(this.key, this.todos);
this.onChanges.forEach(function (cb) { cb(); });
}
public addTodo(title : string) {
this.todos = this.todos.concat({
id: app.miscelanious.Utils.uuid(),
title: title,
completed: false
});
this.inform();
}
public toggleAll(checked) {
// Note: it's usually better to use immutable
// data structures since they're easier to
// reason about and React works very
// well with them. That's why we use
// map() and filter() everywhere instead of
// mutating the array or todo items themselves.
this.todos = this.todos.map<ITodo>((todo : ITodo) => {
return app.miscelanious.Utils.extend(
{}, todo, {completed: checked}
);
});
this.inform();
}
public toggle(todoToToggle) {
this.todos = this.todos.map<ITodo>((todo : ITodo) => {
return todo !== todoToToggle ?
todo :
app.miscelanious.Utils.extend(
{}, todo, {completed: !todo.completed}
);
});
this.inform();
}
public destroy(todo) {
this.todos = this.todos.filter(function (candidate) {
return candidate !== todo;
});
this.inform();
}
public save(todoToSave, text) {
this.todos = this.todos.map(function (todo) {
return todo !== todoToSave ? todo : app.miscelanious.Utils.extend({}, todo, {title: text});
});
this.inform();
}
public clearCompleted() {
this.todos = this.todos.filter(function (todo) {
return !todo.completed;
});
this.inform();
}
}
}

页脚

这个文件使用.tsx扩展代替.ts,因为它包含一些TSX 代码。

TSX 是 JSX的一种超集。我们将使用TSX代替客户端HTML模板因为TSX和JSX是用来生成一个在DOM状态存储。当组件的属性或者状态发生变化时,React会从最有效率的方式去更新DOM状态存储,并且同时把这些改变及时应用于DOM的真实展现。这个过程React非常高效的及时更新DOM内容。

说明:我们需要一些额外的编译选项来编译.tsx文件。我们将在这篇文章结尾介绍更多关于这方面的内容

这个页脚组件允许用户去根据状态去删选任务列表和显示一些任务数。这个组件没有状态(注意如何通过将其传递给该接口的状态)但是有一些继承于父亲组件(TodoApp组件)的属性。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
/// <reference path="../typings/react/react-global.d.ts" />
/// <reference path="./interfaces.d.ts"/>
namespace app.components {
export class TodoFooter extends React.Component<ITodoFooterProps, {}> {
public render() {
var activeTodoWord = app.miscelanious.Utils.pluralize(this.props.count, 'item');
var clearButton = null;
if (this.props.completedCount > 0) {
clearButton = (
<button
className="clear-completed"
onClick={this.props.onClearCompleted}>
Clear completed
</button>
);
}
// React idiom for shortcutting to `classSet` since it'll be used often
var cx = React.addons.classSet;
var nowShowing = this.props.nowShowing;
return (
<footer className="footer">
<span className="todo-count">
<strong>{this.props.count}</strong> {activeTodoWord} left
</span>
<ul className="filters">
<li>
<a
href="#/"
className={cx({selected: nowShowing === app.constants.ALL_TODOS})}>
All
</a>
</li>
{' '}
<li>
<a
href="#/active"
className={cx({selected: nowShowing === app.constants.ACTIVE_TODOS})}>
Active
</a>
</li>
{' '}
<li>
<a
href="#/completed"
className={cx({selected: nowShowing === app.constants.COMPLETED_TODOS})}>
Completed
</a>
</li>
</ul>
{clearButton}
</footer>
);
}
}
}

todoItem

TodoItem组件代表一个任务列表中的一个任务。
这个组件不仅有属性(ITodoItemProps)而且还有状态(ITodoItemState)。

这个组件初始化状态是在构造函数里面设置同时属性是通过父亲组件传递过来的构造函数的参数来设置组件的(TodoApp组件)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
/// <reference path="../typings/react/react-global.d.ts" />
/// <reference path="./interfaces.d.ts"/>
namespace app.components {
export class TodoItem extends React.Component<ITodoItemProps, ITodoItemState> {
constructor(props : ITodoItemProps){
super(props);
// set initial state
this.state = { editText: this.props.todo.title };
}
public handleSubmit(event) {
var val = this.state.editText.trim();
if (val) {
this.props.onSave(val);
this.setState({editText: val});
} else {
this.props.onDestroy();
}
}
public handleEdit() {
this.props.onEdit();
this.setState({editText: this.props.todo.title});
}
public handleKeyDown(event) {
if (event.which === app.constants.ESCAPE_KEY) {
this.setState({editText: this.props.todo.title});
this.props.onCancel(event);
} else if (event.which === app.constants.ENTER_KEY) {
this.handleSubmit(event);
}
}
public handleChange(event) {
this.setState({editText: event.target.value});
}
// This is a completely optional performance enhancement
// that you can implement on any React component. If you
// were to delete this method the app would still work
// correctly (and still be very performant!), we just use it
// as an example of how little code it takes to get an order
// of magnitude performance improvement.
public shouldComponentUpdate(nextProps, nextState) {
return (
nextProps.todo !== this.props.todo ||
nextProps.editing !== this.props.editing ||
nextState.editText !== this.state.editText
);
}
// Safely manipulate the DOM after updating the state
// when invoking this.props.onEdit() in the handleEdit
// method above.
public componentDidUpdate(prevProps) {
if (!prevProps.editing && this.props.editing) {
var node = React.findDOMNode<HTMLInputElement>(this.refs["editField"]);
node.focus();
node.setSelectionRange(node.value.length, node.value.length);
}
}
public render() {
return (
<li className={React.addons.classSet({
completed: this.props.todo.completed,
editing: this.props.editing
})}>
<div className="view">
<input
className="toggle"
type="checkbox"
checked={this.props.todo.completed}
onChange={this.props.onToggle}
/>
<label onDoubleClick={ e => this.handleEdit() }>
{this.props.todo.title}
</label>
<button className="destroy" onClick={this.props.onDestroy} />
</div>
<input
ref="editField"
className="edit"
value={this.state.editText}
onBlur={ e => this.handleSubmit(e) }
onChange={ e => this.handleChange(e) }
onKeyDown={ e => this.handleKeyDown(e) }
/>
</li>
);
}
}
}

app模块

此文件包含应用程序的入口点,这是该应用程序只有顶层组件的todoapp组件声明。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
/// <reference path="../typings/react/react-global.d.ts" />
/// <reference path="./interfaces.d.ts"/>
// We should have installed a type declaration file but
// for the director npm package but it is not available
// so we will use this declaration to avoid compilation
// errors for now.
declare var Router : any;
var TodoModel = app.models.TodoModel;
var TodoFooter = app.components.TodoFooter;
var TodoItem = app.components.TodoItem;
namespace app.components {
export class TodoApp extends React.Component<IAppProps, IAppState> {
constructor(props : IAppProps) {
super(props);
this.state = {
nowShowing: app.constants.ALL_TODOS,
editing: null
};
}
public componentDidMount() {
var setState = this.setState;
// we will configure the Router here
// our router is provided by the
// director npm module
// the router observes changes in the URL and
// triggers some component's event accordingly
var router = Router({
'/': setState.bind(this, {nowShowing: app.constants.ALL_TODOS}),
'/active': setState.bind(this, {nowShowing: app.constants.ACTIVE_TODOS}),
'/completed': setState.bind(this, {nowShowing: app.constants.COMPLETED_TODOS})
});
router.init('/');
}
public handleNewTodoKeyDown(event) {
if (event.keyCode !== app.constants.ENTER_KEY) {
return;
}
event.preventDefault();
var val = React.findDOMNode<HTMLInputElement>(this.refs["newField"]).value.trim();
if (val) {
this.props.model.addTodo(val);
React.findDOMNode<HTMLInputElement>(this.refs["newField"]).value = '';
}
}
public toggleAll(event) {
var checked = event.target.checked;
this.props.model.toggleAll(checked);
}
public toggle(todoToToggle) {
this.props.model.toggle(todoToToggle);
}
public destroy(todo) {
this.props.model.destroy(todo);
}
public edit(todo) {
this.setState({editing: todo.id});
}
public save(todoToSave, text) {
this.props.model.save(todoToSave, text);
this.setState({editing: null});
}
public cancel() {
this.setState({editing: null});
}
public clearCompleted() {
this.props.model.clearCompleted();
}
// the JSX syntax is quite intuitive but check out
// https://facebook.github.io/react/docs/jsx-in-depth.html
// if you need additional help
public render() {
var footer;
var main;
var todos = this.props.model.todos;
var shownTodos = todos.filter(function (todo) {
switch (this.state.nowShowing) {
case app.constants.ACTIVE_TODOS:
return !todo.completed;
case app.constants.COMPLETED_TODOS:
return todo.completed;
default:
return true;
}
}, this);
var todoItems = shownTodos.map(function (todo) {
return (
<TodoItem
key={todo.id}
todo={todo}
onToggle={this.toggle.bind(this, todo)}
onDestroy={this.destroy.bind(this, todo)}
onEdit={this.edit.bind(this, todo)}
editing={this.state.editing === todo.id}
onSave={this.save.bind(this, todo)}
onCancel={ e => this.cancel() }
/>
);
}, this);
var activeTodoCount = todos.reduce(function (accum, todo) {
return todo.completed ? accum : accum + 1;
}, 0);
var completedCount = todos.length - activeTodoCount;
if (activeTodoCount || completedCount) {
footer =
<TodoFooter
count={activeTodoCount}
completedCount={completedCount}
nowShowing={this.state.nowShowing}
onClearCompleted={ e=> this.clearCompleted() }
/>;
}
if (todos.length) {
main = (
<section className="main">
<input
className="toggle-all"
type="checkbox"
onChange={ e => this.toggleAll(e) }
checked={activeTodoCount === 0}
/>
<ul className="todo-list">
{todoItems}
</ul>
</section>
);
}
return (
<div>
<header className="header">
<h1>todos</h1>
<input
ref="newField"
className="new-todo"
placeholder="What needs to be done?"
onKeyDown={ e => this.handleNewTodoKeyDown(e) }
autoFocus={true}
/>
</header>
{main}
{footer}
</div>
);
}
}
}
var model = new TodoModel('react-todos');
var TodoApp = app.components.TodoApp;
function render() {
React.render(
<TodoApp model={model}/>,
document.getElementsByClassName('todoapp')[0]
);
}
model.subscribe(render);
render();

确保其中的 this在所有的时候都指向正确的元素。例如,你应用使用箭头函数:
onKeyDown = { e => this.handleNewTodoKeyDown(e) }
代替
onKeyDown = { this.handleNewTodoKeyDown }

确保this指向handleNewTodoKeyDown函数内部的组件。

编译应用程序

为了编译我们的应用程序,我们需要在js文件夹下添加一个tsconfig.json文件。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"isolatedModules": false,
"jsx": "react",
"experimentalDecorators": true,
"emitDecoratorMetadata": true,
"declaration": false,
"noImplicitAny": false,
"removeComments": true,
"noLib": false,
"preserveConstEnums": true,
"suppressImplicitAnyIndexErrors": true
},
"filesGlob": [
"**/*.ts",
"**/*.tsx",
"!node_modules/**"
],
"files": [
"constants.ts",
"interfaces.d.ts",
"todoModel.ts",
"utils.ts",
"app.tsx",
"footer.tsx",
"todoItem.tsx"
],
"exclude": []
}

如果我们认真阅读了TypeScript compiler options我们就能够知道该如何使用tsconfig.json文件:

参数--project或者-p 都能用于编译项目在给定的文件下。这个文件需要含有tsconfig.json文件来直接编译。

我们可以编译我们的应用程序通过以下命令:

1
2
//在应用程序的根目录
$ tsc -p js

执行这个命令之后,应该会在js文件夹下生成以下JavaScript文件:

这些文件会在我们的index.html文件中引用:

1
2
3
4
5
6
<script type="text/javascript" src="js/constants.js"></script>
<script type="text/javascript" src="js/utils.js"></script>
<script type="text/javascript" src="js/todoModel.js"></script>
<script type="text/javascript" src="js/todoItem.js"></script>
<script type="text/javascript" src="js/footer.js"></script>
<script type="text/javascript" src="js/app.js"></script>

接下来我们准备运行我们的应用程序。

运行应用程序

为了运行我们的应用程序,我们需要一个web服务器。这里我们通过npm来安装http-server。这里博主推荐使用https://www.npmjs.com/package/anywhere

我们通过以下命令来安装http-server:

1
$ npm install -g http-server

如果你使用的是OSX系统,请使用sudo权限

运用以下命令来运行应用程序:

1
2
// 在应用的根目录
$ http-server

如果你打开浏览器导航到http://127.0.0.1:8080/,你应用可以看到应用程序正在运行:

记得打开谷歌浏览器开发者工具去查看一下React 开发者扩展工具 并且查看一下当你与应用程序交互时,如何改变组件的属性和状态的值。

总结

在这篇博客中我们已经学习了怎么搭建开发环境和怎么使用TypeScript来开发React应用程序。

你可以查看这个项目的源码

如果你想了解更多内容?请查看Type React and Redux