阅读 1301

使用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,夜深了,晚安!