TypeScript In React-Native

一、在RN项目中添加TypeScript

yarn add --dev typescriptyarn add --dev react-native-typescript-transformeryarn tsc --init --pretty --jsx react// 创建tsconfig.json文件linux： touch rn-cli.config.js windows： type nul > rn-cli.config.jsyarn add --dev@types/react@types/react-native

二、找到刚才创建的tsconfig.json文件，取消下面这行的注释

// "allowSyntheticDefaultImports": true, /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */

三、打开刚才创建的rn-cli.config.js文件，添加以下内容

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

四、修改文件名后缀

App.js 修改为 App.tsx

五、按照提示安装包

如果编辑器安装了TypeScript的插件，修改成.tsx后缀的文件将会报错，鼠标移入报错信息，将会有以下提示信息

[ts]无法找到模块“react”的声明文件。“c:/Users/YOURUSER/PATH/TO/YOURPROJECTNAME/node_modules/react/index.js”隐式拥有"any"类型。  尝试"npm install @types/react"(如果存在)，或者添加一个包含“声明模块‘react’”的新声明文件(.d.ts)；

执行 yarn add --dev @types/jest @types/react @types/react-native @types/react-test-renderer

修改文件引入方式

-importReact, { Component }from'react';+importReactfrom'react'+import{ Component }from'react';

更新

配置好TypeScript后，使用es6语法时，还是会发生[ts] 'Promise' only refers to a type, but is being used as a value here.的报错，修改tsconfig.json文件，找到"target": "es5",修改为es6