使用 TypeScript + React + Redux 进行项目开发（入门篇，附源码）

本文详细介绍了如何使用 Create-React-App 编写 TypeScript + React 项目

前言

对于 TypeScript + React 开发，MicroSoft 编写了一个 TypeScript-React-Starter 的例子，Github 地址。有需要的朋友可以去看一下。

我自己也看了一下，文档说明讲解的很好，但是 Demo 拉下来却无法正常运行，一直报错。所以我自己使用 TypeScript + React + Redux 写了 Demo，作为范例来用一下。

本文 Demo 地址

• 本文 Counter Demo 是一个简易的例子，可以用来作为入门参考，Counter Demo

• 另外还写了一个 TodoList 的例子，稍微更有难度一些，代码量和组件更多更详细。有需要的朋友也可以参考一下。TodoList Demo

建议

可以先下载 Counter Demo 后，运行项目，查看运行效果，然后对照本文进行阅读，效果更佳！

使用 TypeScript 编写 React 需要注意的规范

• 必须遵守的要求：

  • 所有用到 jsx 语法的文件都需要以 tsx 后缀命名
  • 使用组件声明时的 Component<P, S> 泛型参数声明，来代替 PropTypes进行类型校验

• 额外的代码规范：

  • 全局变量或者自定义的 window 对象属性，统一在项目根下的 global.d.ts 中进行声明定义
  • 对于项目中常用到的接口数据对象，最好在 types/ 目录下定义好其结构化类型声明

---

安装 Create-React-App

$ npm install create-react-app -g

---

创建项目

先创建一个新的项目，这里我们命名为 typescript-react-app

$ create-react-app typescript-react-app --scripts-version=react-scripts-ts

react-scripts-ts是一系列适配器，它利用标准的create-react-app工程管道并把TypeScript混入进来。

项目创建成功后，此时项目结构如下所示：

my-app/
├─ node_modules/
├─ public/
├─ src/
│  └─ ...
├─ .gitignore
├─ images.d.ts
├─ package.json
├─ README.md
├─ tsconfig.json
├─ tsconfig.prod.json
├─ tsconfig.test.json
├─ tslint.json
└─ yarn.lock

注意：

• tsconfig.json包含了工程里TypeScript特定的选项。
• tslint.json保存了要使用的代码检查器的设置，TSLint。
• package.json包含了依赖，还有一些命令的快捷方式，如测试命令，预览命令和发布应用的命令。
• public包含了静态资源如HTML页面或图片。除了index.html文件外，其它的文件都可以删除。
• src包含了TypeScript和CSS源码。index.tsx是强制使用的入口文件。