使用TypeScript编写react-native(高效版)



  • 更新:从RN0.57版本开始已经可以直接支持typescript,无需任何配置。在保留根入口文件index.js的前提下,其他文件都可以直接使用.ts.tsx后缀。但这一由babel进行的转码过程并不进行实际的类型检查,因此仍然需要编辑器和插件来共同进行类型检查。


    TypeScript作为JavaScript的一个富类型扩展语言,深受代码风格严谨的前端开发者欢迎。但在react-native下,因为packager的配置困难,使用TypeScript一直是个麻烦的选择。网上的大部分方案,甚至微软的官方方案都是启动两个进程,一个进程将typescript编译成javascript,另一个进程则是RN默认的packager。

    实际上自从RN的packager独立并改名为metro之后,也多了很多配置的可能性。因此我们也能更高效的在React Native工程中使用TypeScript了。现在我们来尝试进行这样的配置。

    初始化RN工程

    如果你已经有一个RN工程了,可以跳过这一步。

    按照RN中文网的入门文档安装所需的软件,然后初始化项目:

    react-native init MyProject
    cd MyProject
    

    安装TypeScript相关依赖

    yarn add tslib @types/react @types/react-native
    yarn add --dev react-native-typescript-transformer typescript
    

    配置tsconfig.json

    您可以从您之前的TS项目中复制这个文件,也可以使用tsc初始化(具体参考TypeScript的教程)。注意务必设置"jsx":"react"
    注意多余的注释可能会不兼容,需要移除。

    {
      "compilerOptions": {
        "importHelpers": true,
        "target": "es2015",
        "jsx": "react",
        "noEmit": true,
        "moduleResolution": "node",
      },
      "exclude": [
        "node_modules",
      ],
    }
    

    在项目目录中新建或编辑rn-cli.config.js,使用支持typescript的transfomer

    module.exports = {
      getTransformModulePath() {
        return require.resolve('react-native-typescript-transformer');
      },
      getSourceExts() {
        return ['ts', 'tsx'];
      }
    }
    

    最后修改你的源代码

    入口index.jsApp.js的文件名请不要改变,你可以新建src文件夹,在其中建立index.tsx,然后把App.js的内容改成

    import './src';
    

    然后在index.tsx里重新编写你的入口代码。注意引用react的写法有所区别:

    -import React, { Component } from 'react';
    +import React from 'react'
    +import { Component } from 'react';
    

    自由的TS吧,少年

    接下来你可以在工程中自由的使用ts/tsx来编写TypeScript代码啦。



  • 此回复已被删除!


  • @tdzl2003 配置rn-cli.config.js,使用自定义的transfomer,这里直接在根目录下建立新文件?还是需要在package上改一些东西?



  • 请问,使用ts和js混编后,最后bundle体积会不会增大太多呢??



  • @tangsir 不会,字数补丁



  • 请问有没有办法实现ts编译出错时,可以报红屏错误,或者metro直接构建失败提示错误信息,现在即使ts检查不对,rn还是会执行



  • @fantasy525 上面说了啊,只能配合编辑器实现