标签：TypeScript react typescript tsx RN native

前言

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.js和App.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代码啦。

标签：TypeScript,react,typescript,tsx,RN,native
来源： https://www.cnblogs.com/aoximin/p/13173805.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。