如何创建支持TypeScript的React Native项目及JS项目改造

直接创建支持TypeScript的新项目 #

React Native官方已提供开箱即用的TypeScript模板，初始化时指定模板参数即可，生成的项目默认入口为App.tsx，所有TS相关配置已预设完成：

npx react-native init YourProjectName --template react-native-template-typescript

现有纯JS项目适配TypeScript（TSX） #

按以下步骤操作即可完成适配，无需重构全量代码：

• 第一步：安装TS相关依赖
  执行命令安装开发依赖：

  npm install --save-dev typescript @types/react @types/react-native @tsconfig/react-native
  

  若项目使用Jest做单元测试，额外安装以下依赖：

  npm install --save-dev @types/jest @types/react-test-renderer
  

• 第二步：添加TS配置文件
  在项目根目录新建tsconfig.json，基础配置参考如下，可根据自身需求调整编译规则：

  {
    "extends": "@tsconfig/react-native/tsconfig.json",
    "compilerOptions": {
      "jsx": "react-jsx",
      "strict": false // 迁移初期可设为false降低适配门槛，后续再逐步开启严格校验
    },
    "exclude": ["node_modules"]
  }
  

• 第三步：修改文件后缀
  把React组件文件的.js后缀改为.tsx，普通工具逻辑文件的.js后缀改为.ts，入口文件App.js直接重命名为App.tsx即可。
• 第四步：补充类型声明
  可先运行项目验证适配是否成功，后续逐步给组件props、函数、变量补充TS类型标注即可。

迁移阶段支持JS与TS文件共存，不需要一次性替换所有JS代码，可按业务模块逐步调整适配。

内容的提问来源于stack exchange，提问作者Fatemeh