RN 集成 TypeScript方案和问题大全

这篇文章主要介绍了如何在 ReactNative 中如何集成 TypeScript，以及咱们遇到的一些问题总结。

其实关于如何集成TS，RN官方有一篇博客介绍了接入方案，但在参照接入过程当中发现针对老工程部分迁移TS、以及新版本RN并不适用。

集成方案

目前RN 集成 TypeScript 有两个方案：

方案一： 借助第三方编译插件react-native-typescript-transformer

方案二： RN 0.57 版本以后将 babel 升级到了 V7， Babel 从V7开始支持 TypeScript 编译，详情介绍参考这里。

关于 babel 支持TypeScript编译有如下几个问题须要咱们注意：

1. babel 只负责在编译期将 TS 编译为JS，并无进行类型校验，这意味着即便咱们代码类型写错了也能编译经过，没有任何提示。不过目前包括 VSCode、WebStorm等开发工具基本支持 TS 语法、类型校验，因此咱们就不须要强依赖编译期类型校验。

2. 有一些 TS 特性babel不支持：

   namespaces
    bracket style type-assertion
    enums
   复制代码

具体操做

上面介绍了现有的两种集成方案的一些详细状况，下面咱们具体说明若是根据不一样 RN 版本已经实际的需求引入TS支持：

< 0.57版本

咱们在上面介绍过，对于 RN 版本低于 0.57 的，只能使用react-native-typescript-transformer, 参考官方文档有很详细的步骤指导。

> 0.57版本

若是是新项目直接执行下面命令

$ react-native init MyAwesomeProject --template typescript
复制代码

若是是老项目迁移TS，由于新版本使用 babel 编译TS，babel 编译并不会读取tsconfig.json中的配置，咱们须要将相关配置转移到 babel.config.js 或 .babelrc

为何 babel 编译不会读取 tsconfig.json？

上面有介绍过，babel 只是加入了对于TS语法的支持，并无进行类型校验。而 tsconfig.json 的主要做用就是描述了如何进行类型校验，因此 babel并不须要读取这个问题。具体能够参考这个issues。

虽然 babel 编译期并不须要tsconfig.json，但由于咱们还须要vscode、WebStorm 等开发工具支持 TS 校验，项目中仍是须要维护 tsconfig。

具体操做步骤：

$ yarn add metro-react-native-babel-preset @babel/plugin-transform-runtime  babel-plugin-module-resolver typescript --dev

$ yarn add --dev @types/react @types/react-native --dev
复制代码

babel.config.js 配置以下：

// babel.config.js
module.exports = {
    "presets": [
        "module:metro-react-native-babel-preset",
    ],
    "plugins": [
        // 解决TS中的 module 引用问题，下面会详细说明
        ["module-resolver", {
            "root": ["./src"],
            "extensions": [".js", ".ts", ".tsx", ".ios.js", ".android.js"]
        }],
        "@babel/plugin-transform-runtime",
    ],
}
复制代码

固然咱们也能够在大于 0.57 版本中继续使用 react-native-typescript-transformer 方式支持 TS，具体的实现步骤参考这里。

其余方案

haul 基于 webpack 开发的一套 React Native 编译、打包工具，用来替代 Facebook 官方提供的 metro 打包工具。

常见问题汇总

React Hook 中使用 TypeScript

我在另一篇文章里有详细介绍 Hook 和 TypeScript 的结合，请移步这里参考。

TS中使用绝对路径

TS官方支持在 tsconfig 中使用 --baseUrl、--paths 等参数容许咱们使用绝对路径引用其余模块，但咱们按照官方配置使用会有相似以下错误：

error: bundling failed: Error: Unable to resolve module `page/passport/component/index` from `/Users/wangcheng/work/we/rrd-react-native/src/page/passport/login/component/AccountLoginPage.tsx`: Module `page/passport/component/index` does not exist in the Haste module map

This might be related to https://github.com/facebook/react-native/issues/4968
To resolve try the following:
1. Clear watchman watches: `watchman watch-del-all`.
2. Delete the `node_modules` folder: `rm -rf node_modules && npm install`.
3. Reset Metro Bundler cache: `rm -rf /tmp/metro-bundler-cache-*` or `npm start -- --reset-cache`.
4. Remove haste cache: `rm -rf /tmp/haste-map-react-native-packager-*`.
    at ModuleResolver.resolveDependency (/Users/wangcheng/work/we/rrd-react-native/node_modules/@react-native-community/cli/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:183:15)
    at ResolutionRequest.resolveDependency (/Users/wangcheng/work/we/rrd-react-native/node_modules/@react-native-community/cli/node_modules/metro/src/node-haste/DependencyGraph/ResolutionRequest.js:52:18)
    at DependencyGraph.resolveDependency (/Users/wangcheng/work/we/rrd-react-native/node_modules/@react-native-community/cli/node_modules/metro/src/node-haste/DependencyGraph.js:283:16)
    at Object.resolve (/Users/wangcheng/work/we/rrd-react-native/node_modules/@react-native-community/cli/node_modules/metro/src/lib/transformHelpers.js:261:42)
    at dependencies.map.result (/Users/wangcheng/work/we/rrd-react-native/node_modules/@react-native-community/cli/node_modules/metro/src/DeltaBundler/traverseDependencies.js:399:31)
    at Array.map (<anonymous>)
    at resolveDependencies (/Users/wangcheng/work/we/rrd-react-native/node_modules/@react-native-community/cli/node_modules/metro/src/DeltaBundler/traverseDependencies.js:396:18)
    at /Users/wangcheng/work/we/rrd-react-native/node_modules/@react-native-community/cli/node_modules/metro/src/DeltaBundler/traverseDependencies.js:269:33
    at Generator.next (<anonymous>)
    at asyncGeneratorStep (/Users/wangcheng/work/we/rrd-react-native/node_modules/@react-native-community/cli/node_modules/metro/src/DeltaBundler/traverseDependencies.js:87:24)
复制代码

其实缘由很简单，以前也有提到过，babel 编译期间并无读取tsconfig，咱们的 --baseUrl、--paths 等并无生效。在babel中咱们怎么使用绝对路径引用模块呢， 使用插件babel-plugin-module-resolver。

参考配置以下：

"plugins": [
    ["module-resolver", {
        "root": ["./src"],
        "extensions": [".js", ".ts", ".tsx", ".ios.js", ".android.js"],
    }],
    "@babel/plugin-transform-runtime",
]
复制代码

遗憾的是按照上面的配置以后，仍然有报错。而后咱们在issues里面找到了相关问题，目前有一个解决方案是在须要做为绝对路径引入的目录增长一个package.json。举个例子：

// 咱们但愿 component目录做为绝对路径 以下引用
import { slider } from 'component';

// 在component目录增长 package.json
{
    "name": "component"
}
复制代码

至此终于能够在TS中使用绝对路径引入模块了。

TS 中引入 ESLint

关于 TypeScript 中 defaultProps

• class component 的 default props, TS 3.0 之后支持类的静态属性 defaultProps

interface PageProps {
    foo?: string;
    bar: string;
}

export class PageComponent extends React.Component<PageProps, {}> {
    public static defaultProps = {
        foo: "default"
    };

    public render(): JSX.Element {
        return (
            <span>Hello, { this.props.foo.toUpperCase() }</span>
        );
    }
}
复制代码

• function component的 defaultProps， 组件须要是 StatelessComponent

interface PageProps {
    foo?: string;
    bar: number;
}

const PageComponent: StatelessComponent<PageProps> = (props) => {
    return (
        <span>Hello, {props.foo}, {props.bar}</span>
    );
};

PageComponent.defaultProps = {
    foo: "default"
};
复制代码

metro & babel

咱们在TS配置中涉及到了 metro.config.js、.babelrc、tsconfig等一系列的配置文件，这里简单总结下他们之间的关系。

metro：是 Facebook 开发的一个专门为React Native 提供 JS的 bundler，做用和前端中的webpack相似，也有人尝试使用metro做为前端的编译打包工具。

metro 经过调用 babel 提供将ES六、JSX、TS等编译成 ES5的JS代码。

metro.config.js、.babelrc 则是编译期间须要使用的配置文件，tsconfig目前更多的是给 VSCode、WebStorm 等开发工具使用作TS校验。

参考文档

typescript-and-babel-7

react-native-typescript-transformer

need react-native-typescript-transformer anymore

TypeScript Module resolution

default-property-in-typescript

metro 简介

Using Metro as a web bundler

absolute-paths-for-react-native-typescript