搭建typescript环境的步骤
首先你电脑确保已经配置好react-native的环境,能够运行普通的RN项目。现在我们一步一步在RN的基础上来搭建typescript的环境。
1、新建一个初始化项目,命令:
react-native init AwesomeProject
cd AwesomeProject
react-native run-ios
运行完上面的步骤能正常跑起项目就ok,进行第二步。
2、安装typescript 和 typings
npm install --save-dev typescript,执行这个命令后,package.json文件里的devDependencies会自动添加"typescript": "^2.1.5"。当然你也可以安装全局的typescript,用这个命令:npm install -g typescript,(或指定npm install -g typescript@2.0) ,但是安装在项目的话,会比较直观,版本也好控制。
TypeScript 2.0 開始, DefinitelyTyped的類型定義自動被發布成npm包 (@ types/XXX) , 這種包就不需要typings來安裝,例如npm install --save @types/core-decorators ,就能把core-decorator声明d.ts文件下载,就不用安装typings。
不过用typings下载d.ts,现在也是没问题的,现在我们介绍下如何用typings。
安装typings : npm install -g typings,这个装全局就好了,主要是用来下载和管理d.ts文件。
然后初始化tsconfig.json和typings.json,命令:tsc --init,typings init, 在项目的根目录能看到两个新建的文件。
tsconfig.json的配置,可以按照如下:
对于js文件生成的路径,我们需要建一个硬链接的文件,需要用命令:
ln -s TypeScriptDemo.TypeScriptDemo.out
至于为什么要这样创建js生成路径,你可以试试在项目随便建个js文件,结果你会发现文件路径很奇怪,跟你预期很不一样。还有的是,点击项目,用替身的选项生成文件夹,属于软连接,跟用命令生成的硬链接文件夹是不一样的。可以看看这个硬链接和软链接的区别。用命令ls -l 查看文件就发现不同之处。
typescript环境里配置js路径总是莫名其妙的,你不一定需要按照我上面的方式去弄。
3、安装d.ts文件
typings搜索包:typings search react
typings安装包:typings install dt~react --module --save
安装语法:typings install <source>~<name> --global/--module --save,source是包来源,上面命令中的dt是指DefinitelyTyped源。(或者typings install <name> --save,默认从npm下载。经测试,并不能下载d.ts文件,还是用第一个语法好了。)
我们需要安装react和react-native这两个的d.ts文件:typings install dt~react dt~react-native --module --save
在项目可以看到自动生成了typings文件,typings.json也把这两个声明添加进去了。
如果你是别的地方把typescript的项目下载过来,可以直接运行:typings install,就能把该项目typings.json配置的d.ts文件都下载下来.
4、新建tsx文件,尝试跑简单的界面
开两个命令界面,一个运行:react-native start,这个是运行RN的服务器,另一个运行:$(npm bin)/tsc --watch,这个是时刻watch项目中typescript语法错误,并且在Visual studio code点击保存文件,能迅速把tsx文件转换成js文件。
例如建个main.tsx文件,把index.js的内容复制过来,发现styles报错,
点击红色处,提示“alignItems”的值不匹配定义的类型。我们打开react-native.d.ts文件,找到alignItems的结构定义,如图:
这时候需要我们改react-naitve的d.ts文件,方便我们以后开发。把FlexStyle改成如下:
把提示type错误,都改成这样子。再看看watch命令,已经没错误提示了,现在运行下项目,最后可能发现js文件路径还是有些小问题。如果可尝试在scr-tsx文件夹下多建几个文件夹以及几个tsx文件放入其中,js文件夹路径应该就会正常点。
最后,你修改过的react-native.d.ts文件,如果再次运行typings install 的命令,会把你修改过的内容被官方那个覆盖掉了。所以,我们可以新建以typings开头命名的文件来存放我们修改的react-naitve.d.ts 文件,避免被typings install命令覆盖掉。至于为什么要用typings开头,就跟node查找文件的策略有关,可以看看typescript官方文档,里面有说。以下是需要修改的文件:
5、下载第三库
例如我们要下载core-decorators库,在类或方法前面“@autobind”自动绑定this。先用npm 下载该库,
npm install core-decorators --save,再用typings下载它的d.ts文件,
typings install dt~core-decorators --module --save
还有个网络库whatwg-fetch,都可以下载来用。
上述步骤的demo供参考的连接。