吐槽几句

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:

2018.10.29更新，我在githut issues看到了这个问题他们讨论结果貌似是这是一个bug?可能会在ts3.2修复？
请自行看一下
https://github.com/DefinitelyTyped/DefinitelyTyped/issues/29265

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


// 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'.
  Type 'RegisteredStyle<{ fontSize: number; textAlign: string; margin: number; }>' is not assignable to type 'RecursiveArray>'.
    Property 'length' is missing in type 'Number & { __registeredStyleBrand: { fontSize: number; textAlign: string; margin: number; }; }'.

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

type Style={welcome:TextStyle}// 定义一个别名
// styles
const styles = StyleSheet.create

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

吐槽几句

开始

NO1:

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

NO2: