React Native + TypeScript学习（1）

前言

之前一直被灌输TS大法好，可以通过TS规避项目的很多基本错误。例如：

TypeScript的优势

• 规避静态类型出错
  TS通过静态类型检查，能把错误从运行时提前至编译时，避免了一些基本bug。
  大数据证明了这一点，随着TypeScript的普及，undefined is not a function的关键字搜索大大减少
  

  

• 应对接口改变 快速准确
  假如后端改变了一些接口字段，可以通过直接改变编译出错的地方，快速替换。而不需要一个一个字段地寻找。

在知乎上看到一段话，引用一下：

公司现在的前端项目大概有十几万行代码，各种从后端拿到的数据类型有上百种以前后端接口一改，要改字段，瞬间懵逼。全局搜索，一个个改，各种牵扯到的东西改下来再测试一顿估计小半天没了。用了 TypeScript 之后，把数据对应的 interface 改掉，然后重新编译一次，把编译失败的地方全部改掉就好了。而且在优秀的 TypeScript 架构中，业务开发基本不需要写类型，所有外部输入的类型都可以自动拿到，只需要把一些 local variable 和 output 的类型定义一下就好了，基本跟手写 ES 6 没有区别。写代码的过程中各种错误在越早期修改的成本就越低。试想没有静态检查跑一遍代码进某个奇怪的 case 才能复现的错误在写代码时期就直接给你的个错误提示，将是多么省时省力省钱。

开始

初始化项目

  react-native init TypeScriptLearn

引入TypeScript

在RN的packager未独立之前，我们采用的是启用两个进程，一个进程将typescript编译为javascript，另一个为RN默认 的packager。但在RN的packager独立并改名为metro后，多了很多配置的可能性。因此我们也能更高效的在React Native工程中使用TypeScript了
安装TypeScript相关依赖:

yarn add tslib @types/react @types/react-native
yarn add --dev react-native-typescript-transformer typescript

我们借助这个react-native-typescript-transformer库进行转换

配置tsconfig.json

可使用tsc进行初始化，但务必设置"jsx":"react"。

{
  "compilerOptions": {
    "importHelpers": true,
    "target": "es2015",
    "jsx": "react",
    "noEmit": true,
    "moduleResolution": "node",
  },
  "exclude": [
    "node_modules",
  ],
}

配置rn-li.config.js

module.exports = {
  getTransformModulePath() {
    return require.resolve('react-native-typescript-transformer');
  },
  getSourceExts() {
    return ['ts', 'tsx'];
  }
}

引入react navigation

yarn add react-navigation

修改App.js为App.tsx

最后修改你的源代码

入口index.js的文件名请不要改变。你可以把App.js 改为 App.tsx在这里开始编写入口代码。你也可以新建src文件夹，在其中建立index.tsx。然后在index.tsx里重新编写你的入口代码。注意引用react的写法有所区别：

-import React, { Component } from 'react';
+import * as React from 'react'
+import { Component } from 'react';

接下来便可以在工程中自由的使用ts/tsx来编写TypeScript代码。

To be continued...