pdl 的个人博客

记录精彩的程序人生

Open Source, Open Mind,
Open Sight, Open Future!
  menu
121 文章
4453 浏览
0 当前访客
ღゝ◡╹)ノ❤️

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

React + TypeScript 50 条规范和经验

编写第三方库的typescript声明文件,提示找不到模块?

tsconfig.json 里面的 noImplicitAny 改成 false

TypeScript 中的声明文件

https://daief.github.io/2018-09-04/declaration-files-of-typescript.html


typescript中如何import json文件

解决办法,可以在根目录建立一个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 类型
```
  1. 项目的根目录中找到你的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是否是可以用的


报错: Expected a constructor, 弄了好久...

原因: 使用了@修饰器, 由于目前react-native 还不支持
解决:

  1. 去掉所有@修饰器, 用其它方法代替


标题:TypeScript在react-native中使用遇到的各种奇怪问题
作者:pengdongliang
地址:https://www.p0d0.com/articles/2019/06/03/1573740586240.html