用react-native typescript redux 构建项目

2019独角兽企业重金招聘Python工程师标准>>>

react-native现在是越来越火了，公司也在开始使用react-native构建项目了，就此将自己的踩坑经历记录于此

---

初始化项目

这里有详细的步骤，在此就不赘述了。按照步骤来应该不会有什么问题

这里主要介绍一下在react native中使用typescript的方法以及我在此过程中踩过的坑。

• 安装typescript以及typings

  npm install -g typescript typings

• 初始化 生成tsconfig.json

   tsc --init

tsconfig.json里面的配置项可以根据自己的具体项目来进行，有相关的文档可以进行查阅

• 使用typings安装依赖

typings install dt~react --global --save

但是会一直报下面这个错误

message:Attempted to compile "react" as a global module, but it looks like an external module. You'll need to remove the global option to continue

在网上搜了半天也没有搜到，难道react-native默认安装的react依赖是模块化的而非全局化的吗？ 就是因为这个导致react在setup.tsx中会报错：

import React,{ Component } from "react";
import { Component } from "react";
import {
    AppRegistry,
    StyleSheet,
    Text,
    View
} from 'react-native';

class Root extends React.Component<any, any>{
    render() {
        return (
            <Text>this is a test，wyf</Text>
        )
    }
}
export default () => Root

提示React module is not existed,一脸懵逼，然后搜索这个错误信息，找到如下的解决方案，将上面第一行改为：

import * as React from "react";

这样确实可以解决问题，但是之后问题又来了，由于react-native不是全局的，Text没有类型说明，所以又通不过，最终还是需要用typings全局安装react-native 最后尝试了终极办法：

• 初始化typings

typings --init

就会在项目根目录生成typings.json,然后通过直接配置该文件

{
   "globalDependencies": {
    "react": "registry:dt/react#0.14.0+20161024223416",
    "react-native": "registry:dt/react-native#0.29.0+20160709063508",
  }
}

• typings install

结果居然成功了。真是历尽千辛万苦啊

（2）使用gulp实时编译typescript

• 安装gulp

npm install --global gulp

• 作为项目安装依赖

npm install --save-dev gulp

• 在项目根目录新建gulpfile.js文件，配置如下：

var gulp = require('gulp');
var ts = require('gulp-typescript');
var tsProj = ts.createProject('tsconfig.json');

gulp.task('tsc', function () {
    var tsResult = gulp.src('js/**/*.ts')
        .pipe(ts(tsProj))
        .pipe(gulp.dest('built/'));
});

gulp.task('tsc:w', ['tsc'], function () {
    gulp.watch('js/**/*.ts', ['tsc']);
});

其中src文件和built文件是指需要编译的文件目录和目标文件目录，具体可以参考这里

然后执行gulp tsc:w就可以实现实时编译了 菜鸟踩坑中，将自己的经验记录下来

这篇文章也很不错

转载于:https://my.oschina.net/sunshinewyf/blog/808053