「React Native」Typescript实战

一、typescript配置说明(基于react native0.57版本之后,已经自带支持ts。)

(1)配置.babelrc文件(该文件用来设置转码的规则和插件)

{"presets": ["module:metro-react-native-babel-preset"],"plugins": [    ["@babel/plugin-proposal-decorators",      {"legacy":true}    ]  ]}

rn<0.57前module:react-native

rn>=0.57module:metro-react-native-babel-preset

plugin-proposal-decorators在babel7之后,不自带支持装饰(注解),需要引入该插件,并配置。(一般mobx会采用到装饰)

(2)配置rn-cli.config.js(它是 Packager 的配置文件)

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

配置修改ts代码也能享受RN的Hot reloading特性。

(3)配置tsconfig.json(如果一个目录下存在一个tsconfig.json文件,那么它意味着这个目录是TypeScript项目的根目录。 tsconfig.json文件中指定了用来编译这个项目的根文件和编译选项。)

{"compilerOptions": {    /* Basic Options */"target":"es6",                          /* Specify ECMAScript target version:'ES3'(default),'ES5','ES2015','ES2016','ES2017','ES2018'or'ESNEXT'. */"module":"es2015",                    /* Specify module code generation:'none','commonjs','amd','system','umd','es2015', or'ESNext'. */"jsx":"react",            /* Strict Type-Checking Options */"strict":true,                          /* Enable all stricttype-checking options. */"noImplicitAny":false,"moduleResolution":"node",            /* Specify module resolution strategy:'node'(Node.js) or'classic'(TypeScript pre-1.6). */"baseUrl":"./",                        /* Type declaration files to be includedincompilation. */"allowSyntheticDefaultImports":true,  /* Allow default imports from modules with no defaultexport. This does not affect code emit, just typechecking. */"esModuleInterop":true},"exclude": ["node_modules"]}

配置参数,参考文档https://www.typescriptlang.org/docs/handbook/tsconfig-json.html

二、集成ts中遇到的坑

letresponsePromise =newPromise((resolve, reject) =>{returnreject(newError(`missing is needed data`))  })

在src目录下使用es6的语法,报Promise是引用类型,不是值类型,是因为在src配置了jsconfig.json,设置了

{"compilerOptions": {"experimentalDecorators":true,"emitDecoratorMetadata":true}}

experimentalDecorators表示允许在实验环境下采用装饰模式,emitDecoratorMetadata允许元数据反射 。删除掉该文件后,即可成功引用es6中的promise了。

在根界面可以使用ts的特性,比如在tsx中集成jsx,报

# [Cannot use JSX unless the '--jsx' flag is provided](https://stackoverflow.com/questions/50432556/cannot-use-jsxunless-the-jsx-flag-is-provided)

删除掉jsconfig.json立即就能在编辑器消失红线提示。

三、实战

「React Native」Typescript实战_第1张图片

local.png

四、感受

引入ts之后,结合mobx,ui层和viewmodule层都采用ts,代码看起来很规范,(比如让以前不确定的props和state变得确定了、参对参数设置类型约束),使用强类型,代码开发效率提高(支持对象.属性),在编译器就提示出问题,能够减少debug定位问题的成本等等。

你可能感兴趣的:(「React Native」Typescript实战)