本文介绍如何在React中应用TypeScript，了解TypeScript在实际项目中的使用。
使用TypeScript创建React应用程序
本文假设您已对React是什么，以及它的大致工作原理有所了解，如果您根本不清楚React，本文就不适合您。
使用TypeScript创建React项目：
npx create-react-app reminders-app –template typescript
我们用create-react-app创建React应用 reminders-app，并指定使用TypeScript语言。
用vscode打开reminders-app，我们看到文件扩展名是tsx，项目里也有tsconfig.json文件。
添加BootStrap
安装bootstrap。
npm i bootstrap
安装完成后，在index.tsx中导入bootstrap的css；接着为了简单，删除app.css所有内容，简单添加body的padding的样式；
在项目的主页，app.css中，简单添加一个按钮，使用bootstrap的样式，再运行看看有没有生效。
创建组件
新建文件夹 components, 再在其下创建ReminderList.tsx组件。在vscode中，如果有Reactjs code snippets插件的话，输入rsf并按TAB键，自动生成代码。
再创建models文件夹，并在其下新建reminder.ts文件。新建interface Reminder。
回到ReminderList组件，创建interface ReminderList并传递该类型的参数传递给函数ReminderList。
然后在app.tsx中调用ReminderList组件，并传递数据。组件里通过map方法渲染列表。
使用State Hook
State Hook是个泛型函数，名为useState。
比如，useState<Reminder[]>([])
但也未必一定要提供类型，它会自动感知。
如，useState(false)
编译器会自动感知是boolean类型，相当于
useState<boolean>(false)
我们用useState对app.tsx略作修改。
调用后端
调用后端是一个相对独立的职责，我们分离出来。
创建services文件夹再创建reminder.ts文件，用于调用后端。
我们使用一个伪后端
https://jsonplaceholder.typicode.com
调用后端使用axios。安装:
npm i axios
这是JavaScript库，它已自带类型定义文件，所以没必要再用DefinitelyTyped定义。
我们创建ReminderService类，该类有一个http属性，用于定义基本的后端端点URL。而且还有getReminders, addReminder，removeReminder等方法。注意我们导出的是一个ReminderService的实例，这样调用者不必再用new关键字来创建实例。
使用Effect Hook
在app.tsx里导入reminderService使用。
首先删除硬编码的数据，然后使用useEffect 获取后端数据，并用bootstrap美化样式。
处理事件
给每一行reminder添加删除按钮。然后处理按钮事件。
构建表单
我们构建一个表单用于添加新的reminder。
components下新建NewReminer.tsx文件，输入rsf并按TAB快速生成模板代码，去掉props参数。根据最佳实践，提供函数的返回类型JSX.Element，这样确保函数返回JSX组件，而不能是类似 “return 1；” 这样的返回值。
添加form, label, input, button等HTML元素，再利用 useState保存input 的值。
处理表单提交
我们处理表单提交事件。
添加函数submitForm用于处理form的onSubmit事件，submitForm里用到一个回调函数onAddReminder，该函数作为NewRemind的参数传入，因为App里维持着列表数据，必须由App来实际处理addReminder。
小结
本文实现了一个非常简单的React项目，介绍了如何在React中使用TypeScript。如果您想详细了解React相关知识，本公众号前面有完整的React系列可以学习。