react native 使用typescript
typescriptReact native 使用
2023-09-14 08:59:24 时间
前言
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 接口_typeScript
- TypeScript(3)基础类型[通俗易懂]
- react源码分析:深度理解React.Context
- TypeScript系列教程《单例》
- TypeScript 深水区:3 种类型来源和 3 种模块语法
- Java和TypeScript开发者之间的区别必须知道
- 从react源码角度看React-Hydrate原理
- TypeScript 中 type 和 interface 有什么区别?
- 在React中使用 react-router-dom 编程式路由导航【含V5.x、V6.x】
- TypeScript 4.8 发布!重点新特性解读
- 软件开发入门教程网之TypeScript 类
- typescript学习笔记
- 深入学习下 TypeScript 中的泛型
- (十四)与 TypeScript 集成
- 【TypeScript】条件语句
- TypeScript 2.0 与 AngularJS 2.0 的新动态
- 微软为大型 JavaScript 应用而开发的 TypeScript 发布了 2.0 版本
- 探索React框架中MySQL数据库的应用(react mssql)