这个快速入门指南将教你如何使用React连接TypeScript。 最后，将会获得：

  • 一个使用React和TypeScript的项目

  • 用TSLint项目检查

  • 用Jest和Enzyme进行测试，

  • Redux流程管理

我们将使用 create-react-app工具快搭建一个应用程序。

我们假设您已经在使用Node.js和npm。 您可能还想了解React的基础知识。

  • 安装 create-react-app

我们将使用create-react-app，因为它为React项目设置了一些有用的工具和规范默认值。 这只是一个命令行实用工具，用于创建新的React项目。

npm install -g create-react-app

  • 创建我们的项目

我们创建一个新的项目，项目名称为 my-app:

create-react-app my-app --scripts-version=react-scripts-ts

react-scripts-ts是对标准的create-react-app项目管道进行一系列调整，并将TypeScript引入到组合中。

此时，你的项目布局将如下所示：

my-app/
├─ .gitignore
├─ node_modules/
├─ public/
├─ src/
│  └─ ...
├─ package.json
├─ tsconfig.json
└─ tslint.json

注意：

  • tsconfig.json包含我们项目的特定于TypeScript的选项。

  • tslint.json存储我们的linter，TSLint将使用的设置。

  • package.json包含我们的依赖关系，以及我们想要运行的用于测试，预览和部署应用程序命令的一些快捷方式。

  • public包含静态资源，比如我们计划部署到的HTML页面或图像。 您可以删除该文件夹中除index.html之外的任何文件。

  • src包含我们的TypeScript和CSS代码。 index.tsx是我们文件的入口点，是强制性的。


  • 运行项目

运行项目只需简单的一个命令：

npm run start

这将运行我们的package.json指定的启动脚本，并将生成一个服务器，当我们保存文件时重新加载页面。通常，服务器运行在http://localhost:3000，自动为你打开。

这可以通过允许我们快速预览更改来收紧迭代循环。

  • 测试项目

测试也是通过一个简单的命令：

npm run test

此命令运行Jest，这是一个非常有用的测试实用程序，针对扩展名以.test或.spec.ts结尾的所有文件。 像npm run start命令一样，Jest会在检测到更改后立即自动运行。 如果你愿意，你可以并行运行npm run start和npm run test，以便您可以预览更改并同时测试。

  • 创建生产构建

当以npm运行启动运行项目时，我们没有最终构建优化版本。 通常，我们希望我们传送给用户的代码尽可能快和小。 某些优化如缩小可以实现这一点，但往往需要更多的时间。 我们称这样的“生产”构建（而不是开发版本）。

运行生产构建，只需运行

npm run build

这将分别在./build/static/js和./build/static/css中创建优化的JS和CSS构建。

大多数时间您不需要运行生产版本，但如果您需要测量类似于应用程序最终大小，这将非常有用。

  • 创建组件

我们将写一个Hello组件。该组件将以我们要打招呼的内容命名（我们称之为name），以及任意感叹号的数值（enthusiasmLevel）跟踪。

当我们写一些代码比如时，组件将会渲染为

Hello Daniel !!! 。如果没有指定enthusiasmLevel，组件就会给enthusiasmLevel 一个默认值。如果enthusiasmLevel为0或负数，则应该会出错。

Hello.tsx 代码如下：

// src/components/Hello.tsx

import * as React from 'react';

export interface Props {
  name: string;
  enthusiasmLevel?: number;
}

function Hello({ name, enthusiasmLevel = 1 }: Props) {
  if (enthusiasmLevel <= 0) {
    throw new Error('You could be a little more enthusiastic. :D');
  }

  return (
    
      
        Hello {name + getExclamationMarks(enthusiasmLevel)}
      
    
  ); } export default Hello; // helpers function getExclamationMarks(numChars: number) {   return Array(numChars + 1).join('!'); }

请注意，我们定义了一个名为Props的类型，该类型指定了组件将要执行的属性。 name是一个必需的string类型，而enthusiasmLevel是一个任意数字（你可以从name 后面的?看出来）。

我们还写了Hello作为无状态函数组件（SFC）。具体来说，Hello是一个使用Props对象的功能，并对其进行重构。如果我们的Props对象中没有enthusiasmLevel值，那么默认值为1。

函数是React允许我们制作组件的两个主要方式之一。如果我们想要，我们可以把它写成一个类，如下所示：

class Hello extends React.Component {
  render() {
    const { name, enthusiasmLevel = 1 } = this.props;

    if (enthusiasmLevel <= 0) {
      throw new Error('You could be a little more enthusiastic. :D');
    }

    return (
      
        
          Hello {name + getExclamationMarks(enthusiasmLevel)}