【react】使用 create-react-app 构建基于TypeScript的React前端架构

写在前面

一直在探寻，那优雅的美；一直在探寻，那精湛的技巧；一直在探寻，那简单又直白，优雅而美丽的代码。

------ 但是在JavaScript的动态类型、有时尴尬的自动类型转换，以及 “0 == false” 是true的尴尬, 你知道 “[undefined] == 0“ 是什么返回结果吗？再然后

function add (a, b) { 
    return a+b 
}
add ("1", 2) // 12

这个结果是返回是12。

还记得某个深夜，当你望着万行代码流出千行热泪的时候吗？最后发现有一个if语句，条件为‘’ 判false了？ 或者发现忘记加parseInt导致的大坑？

是时候亮出利器了。

TypeScript的简单入门 

我们都知道JavaScript是动态类型，动态编译的网页脚本语言，“ 动态 ” 这个词语实现在一个纯粹的网页脚本语言身上来说，似乎并没有什么不妥。但现在，JavaScript要运行在node中，运行在服务端，甚至最初的网页脚本js都由webpack，gulp这类的自动化构建工具变成了一个具有工程化、大型化、交互复杂化、性能要求高的 ” 编程语言 “ 了。

而这个时候，最初的动态类型，或者所谓的 ”object类型“，再或者双等号两边的尴尬，在构建这些 ” 大型软件系统 （大型屎山）“ 的时候，沉积的类型债务就真的是一座巨大的屎山了。

TypeScript一定程度上解决了这个问题，它可以一股脑儿的将屎山上的一大坨清除，在各种中大型团队形形色色的开发者们中间获得一致的好评。

 --------------------------------------------------知识分割线----------------------------------------------------

如果你希望能够一边看，一边敲，你可以先转到下面的React和TypeScript章节，搭建一个基于create-react-app创建的typeScript的react架构，然后再回来看看这些示例，不多、很简单。

TypeScript是JavaScript的超集，它是一门编译型语言，我个人认为，入门TypeScript从以下三个点入手，然后结合react的搭建、再到实际的项目应用，在应用中陆续接触更多的技巧，泛型、枚举、类型推论、命名空间等等。我们先看看最重要的三点。

静态类型

TypeScript可以实现静态的变量申明, 如下面的例子，注意在TypeScript中 string类型、 object类型的首字母也是小写。

// 静态类型申明
let isStatic: boolean = false;

isStatic = 1; // error: Cannot convert 'number' to boolean

let isString: string = 1;  // Type '1' is not assignable to type 'string'.

TypeScript里，在有些没有明确指出类型的地方，类型推论会帮助提供类型。如下面的例子

let a = 1;
    a = false;
    alert(a); // error: Cannot convert 'boolean' to number

绝大多数情况类型推导就像上面那样的情况一样，a = 1 ，a就是number类型了。

还有一些涉及更多的类型，入门可以暂时忽略。

这里我们学习到的一点是：  TypeScript的变量类型是静态的，每一个变量都会有一个固定的类型。

函数

让我们再看看js中函数的定义：

function add (a, b) {
   return a + b;
}

上面这个函数实现了两数相加，在本文开篇我挂了这个代码上去，它的调用方式是这样的：

add ("1", 2) // 12

”1“ + 2 = 12 , 虽然这里的add函数看起来挺简单的，我们换个方式看看，就知道这个有多难受了。

add(testNumber(), 2)

谁能保证testNumber返回的一定是number ？

TypeScript可以

function add (a: number, b: number) : number {
    return a + b;
}

在TypeScript中可以通过类似变量申明那样的类型申明的方式，申明一个函数的入参，返回的具体类型格式，能够真正保证函数的输入输出的一致性。

add("1", 2) // Argument of type '"1"' is not assignable to parameter of type 'number' 

function testNumber () {
      let num = '1';
      return num;
    }
    function add (a: number, b: number) : number {
        return a + b;
    }
    add(testNumber(), 2); // Argument of type 'string' is not assignable to parameter of type 'number'.ts(2345)

现在这些代码将直接报错，无法通过编译，这就是静态类型的强大之处。

接口

接口是TypeScript的核心原则之一的实现，是对值所具有的结构进行类型检查。

这句话什么意思呢？说简单点，接口就是对象的属性，对象上的方法也可以做类型检查，可以约束某个对象的值必须是预期的值。例如：

interface IAddObj {
      a: number,
      b: number
}
function add (addObj: IAddObj) : number {
      return addObj.a + addObj.b;
}

我们定义add函数，希望传入一个addObj的对象值，然后对象上有a和b，这时候我想要规定这个对象必须有a和b，而且a和b是number类型的。

这就是接口最简单，80%，最通用的用法：规定对象的属性

React&TypeScript的环境搭建

前提

首先你电脑上需要安装有nodejs、npm，怎么安装百度即可，其次你需要对react和webpack有一定的认知。这是前提。

第一步 工程创建

1、安装create-react-app

安装create-react-app，打开命令行 输入命令

npm install -g create-react-app

2、创建基于TypeScript的react环境

打开命令行 输入 

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

3、为了能够自定义webpack打包配置，我们还要运行一个命令，进入项目目录/apptest运行    运行后提示输入y即可

 npm run eject

4、在项目目录运行命令： npm run start 稍等片刻就可以看见react的欢迎界面啦

第二步 目录规整

如果你想要直接获取规整后的源代码，在我的git可以下载到： 链接  下载完成在目录npm install 即可。

创建完项目后，可以看见目前的目录结构还是比较混乱的，现在让我们来梳理一下

主要规整 /src 主代码目录中的文件，我们依次新建几个文件夹

assets 资源目录，存放css、image、字体文件等

components   存放组件目录

views 存放主视图目录

utils 存放工具函数、工具类

config  存放公共配置文件

规整后的文件目录如下，我将示例代码分别分配到了其中

 

需要注意的是移动文件后，对应的资源引用目录的更改。

然后需要修改根目录tslint.json为：

{
  "extends": ["tslint:recommended", "tslint-react", "tslint-config-prettier"],
  "linterOptions": {
    "exclude": [
      "config/**/*.js",
      "node_modules/**/*.ts",
      "coverage/lcov-report/*.js"
    ]
  },
  "rules": {
    "ordered-imports": false
  },
  "jsRules": {
    "ordered-imports": false
  }
}

然后重新运行 npm run start 就可以了，现在可以在App.vue里试一试TypeScript了

小结

到这里，其实还远远没有完结，我们还需要引入其他的组件来开发一个真正的React项目，还需要制定一套规范去搭建一个React团队，拭目以待。