使用typescript开发react-native前期踩坑记录

typescript最大的卖点对于我来说就是类型检查和IDE提示的快感了，以前我是抗拒用ts的，因为感觉它加入了太多东西了，又要新学很多东西，但是呢现在貌似ts是个大势所趋，我最喜欢的框架vue都要用ts重构了，so,向ts前进吧！

我用rn开发了一个项目后，就迫不及待的准备在下个项目中开始介入ts了，但是完事开头难，遇到了好多问题，主要在配置上...我自己想了办法解决，但是感觉不完美，希望掘金ts大佬指导下，另外react-native的坑在上个项目也让我见识了，不是一般的多，怪不得现在还没发布1.0版本，但是也没办法，跨端项目本身就及其负责，有时间总结下rn的坑.

开始

初始化react-native按照官网的教程，自己踩坑哈，接下来成功运行后，开始改造成ts,教程按照微软的这个教程 TypeScript-React-Native-Starter

完成后出现了两个我暂时解决的问题

NO1:

react-native中有个全局的global对象，类似web中的window,有时候我会想往global上放一个全局的方法或者变量，怎么做呢？

我安装的 @types/react-native 是0.57.0版本，然后我再代码中输入 global.time=33 这时候编译器总是提示 Error:(25, 3) TS2304: Cannot find name 'global'. wfk? 疑问来了，我点开@types/react-native/index.d.ts明明看到了

...
declare global {
    function require(name: string): any;
    }
...
复制代码

这个问题搞了我好久了，github 一开始我以为是bug就去github搜搜issues发现没有，于是提了个issues,希望有回应，但是得想个办法解决: 首先在 自己的src目录新建一个文件夹typings,用来放自己的类型声明文件新建一个global.d.ts，名字随便起，我之前觉得是只能叫这个，然后在里面写如下代码

declare module global{
	let name:string;
	let time:Time;
	let dp:(px:number)=>number;
	let font:(px:number)=>number;
}
复制代码

然后就可以在代码中使用了，看图

喜大普奔，就在我写文章的时候，github 的isseus收到了回复，效率还可以哈

回复就是

It isn't a good practice to use this global keyword, but it exists and should be present in react-native context. 嗯不是最佳实践，但是有时候真的需要啊就像window对象，有时候还是需要挂在东西给它的，然后我们在源码也可以看到他们添加了global

那上面的问题就看他们什么时候发布新代码了，不过也算学习了。另外说个我的疑问 源码中是用

declare global{
     function require(name: string): any;

    /**
     * Console polyfill
     * @see https://facebook.github.io/react-native/docs/javascript-environment.html#polyfills
     */
    interface Console {
        error(message?: any, ...optionalParams: any[]): void;
        info(message?: any, ...optionalParams: any[]): void;
        log(message?: any, ...optionalParams: any[]): void;
        warn(message?: any, ...optionalParams: any[]): void;
        trace(message?: any, ...optionalParams: any[]): void;
        debug(message?: any, ...optionalParams: any[]): void;
        table(...data: any[]): void;
        disableYellowBox: boolean;
        ignoredYellowBox: string[];
    }
}
复制代码

直接declare global是什么意思？一般不都是declare namespace ,declare module,declare function等等么

NO2:

我看到微软那个教程上写样式是这么写的

// styles

const styles = StyleSheet.create({
  root: {
    alignItems: "center",
    alignSelf: "center"
  }
})
复制代码

嗯完美，没问题，可是我自己写个就报错了

// styles
const styles = StyleSheet.create({
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 0,
  }
});
复制代码

Error:(42, 11) TS2322: Type 'RegisteredStyle<{ fontSize: number; textAlign: string; margin: number; }>' is not assignable to type 'StyleProp<TextStyle>'.
  Type 'RegisteredStyle<{ fontSize: number; textAlign: string; margin: number; }>' is not assignable to type 'RecursiveArray<false | TextStyle | RegisteredStyle<TextStyle>>'.
    Property 'length' is missing in type 'Number & { __registeredStyleBrand: { fontSize: number; textAlign: string; margin: number; }; }'.
复制代码

意思就是类型不对，解决办法

type Style={welcome:TextStyle}// 定义一个别名
// styles
const styles = StyleSheet.create<Style>({
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 0,
  }
});

复制代码

但是这样写好麻烦啊，而且我参考的文章别人都没有在这里传入类型，后来翻了翻github 貌似有人说这是新版本才有这个问题的，所以我还不知道别人怎么解决的，我先这么写吧, 我想能不能定义一个全局的Style别名或者接口呢?每个页面直接用就好了 同样的我在global.d.ts这么写

import {ViewStyle} from "react-native";

interface Style{
	[prop:string]:ViewStyle
}
复制代码

这么一写不知道为什么无法识别global这个变量了，提示找不到，我把导入语句删了就没事了这是为什么？真的需要大佬帮忙解释了。

NO3:

怎么写路径别名？ 我在百度一顿搜索，好吧，还真的有 babel-plugin-root-import ，这里有两个问题要解决

1. 解决ts识别路径别名问题
2. ts编译时识别了还得让运行时的也能识别，也就是让babel转换别名 奔着这个思路，我两个都配置好了，发现始终无法让babel识别，总是报错找到不到模块 配置大概这样子

// .babelrc
{

  "env": {
    "production": {
      "plugins": [
        "transform-remove-console",[
          "babel-plugin-root-import",
          {
            "paths":[
              {
                "rootPathSuffix": "src",
                "rootPathPrefix": "@src"
              },
              {
                "rootPathSuffix": "./src/components",
                "rootPathPrefix": "@components"
              }
            ]
          }
        ]
      ]
    }
  },
  "presets": ["module:metro-react-native-babel-preset"],
  "plugins": [[
    "babel-plugin-root-import",
    {
      "paths":[
        {
          "rootPathSuffix": "src",
          "rootPathPrefix": "@src"
        },
        {
          "rootPathSuffix": "./src/components",
          "rootPathPrefix": "@components"
        }
      ]
    }
  ]]
}

复制代码

我这个配置我感觉没错，按照插件文档写的一模一样，但是依旧不行，难道我写错了吗？ 不过最终我放弃了，因为我最新版本的react-native已经使用了一个叫 react-native-typescript-transformer 的 工具 在编译时自动转换ts为js,从前据说用ts写rn要先用ts编译器转换成js,然后再让rn 读取转换后的代码，这个开发体验很不好啊，现在有了这个，不用再单独去转js了，不过我觉得有个不好的，就是它只转换ts不检查类型错误，也就是你类型不对照样能运行，关于这个github也有讨论，我大概看过，貌似意思是故意而为之，我还是希望直接报错，别运行，现在只能借助ide提示了，接着说那个问题，我在这个工具的文档上发现了个说明

刚开始没认真看啊，毕竟英语，后来仔细看了看原来是用这个工具可以配置别名，但是方法有点奇怪 大概意思是在你想要起别名的文件夹里面新建一个package.json文件，里面写个name属性叫你配置的别名，这个别名要跟tsconfig配置的一致 比如我在tsconfig配置个路径别名

"baseUrl": ".",   //注意这个一定要配置，不然paths没用              
"paths": {
     "@components/*":["src/components/*"]
},  
复制代码

接下来我要在components文件夹新建一个package.json

{
  "name":"@components"
}
复制代码

这样再运行，终于跑起来了，同时ts能识别了，厉害的是ws也能跳转了，之前在vue中配置别名，ws是不识别的

最后

我会持续更新这个文章，保持踩坑，希望有大佬看到我上面的问题来评论交流下啊，另外接触react-native后我深刻的感受到github issues的强大和英语能力的需求，我遇到的rn的坑大部分我只需要把报错在rn的issues一搜索就能搜到，但是都是英语，所以 程序员 真的需要提高英语阅读能力哦，最后再说句，rn的新版本不要立即用，100%有坑，如果能力强可以先踩坑，另外遇到问题了，不要怂，提issues,用有道词典翻译一下大致就能说明白了，我的好几个问题都是提issues解决的最后。emmm,夜深了，晚安!