TypeScript在react-native中使用遇到的各种奇怪问题

## [React + TypeScript 50 条规范和经验](https://juejin.im/post/5ce24f8ae51d45106477bd45)

## **编写第三方库的typescript声明文件，提示找不到模块？**
> 把 `tsconfig.json` 里面的 `noImplicitAny` 改成 `false`

## **TypeScript 中的声明文件**
> https://daief.github.io/2018-09-04/declaration-files-of-typescript.html

****
## **typescript中如何import json文件**
1. 
 ### 解决办法，可以在根目录建立一个`typings.d.ts`文件(此方法试过了, 不行)
    ```
    declare module "*.json" {
        const value: any;
        export default value;
    }
    ```

### 然后就可以通过下面的方式使用
    ```
    import * as data from './xxx.json';
    const name = (data as any).name; // .tsx中类型断言只能使用: xxx as 类型
    ```

2. 项目的根目录中找到你的`tsconfig.json`，然后添加一个新行：`"resolveJsonModule"：true`，

****

## **vscode里不识别@装饰器**
**注意: 这里说的是解决vscode识别修饰器, 不是react-native项目运行支持**
> 项目的根目录中找到你的`tsconfig.json`，然后添加一个新行：`"experimentalDecorators"：true`，

****
## **如果react-native项目里不识别es6和es7语法的话**
### 根目录新建 `.babelrc` 文件, 增加如下两个包
> metro-react-native-babel-preset // 默认有
> @babel/plugin-proposal-decorators //支持`RN 0.56`版本以上, `0.56` 以下使用 `babel/plugin-proposal-decorators`
```
{
    "presets": [
        "module:metro-react-native-babel-preset"
    ],
    "plugins": [
        [
            "@babel/plugin-proposal-decorators",
            {
                "legacy": true
            }
        ]
    ]
}
```

****

## **验证**: 通过http://localhost:8081/index.android.bundle?platform=android可以验证自己的`packager`是否是可以用的

****
## <span data-mce-style="font-weight: bold; color: red;" style="font-weight: bold; color: red;" color="red">报错: Expected a constructor</span>, 弄了好久...

> 原因: `使用了@修饰器`, 由于目前`react-native` 还不支持
> 解决:
1. 去掉所有@修饰器, 用其它方法代替

****

Leanote's Blog

Navigation

Recent Posts

Friend Links