初次尝试使用typescript开发react-native

typescript是javascript的超集，在javascript的基础上添加了可选的静态类型，非常适合团队开，这次我们尝试使用typescript来开发react-native应用。

搭建react-native开发环境

安装yarn和react-native命令行工具

npm install -g yarn react-native-cli

Yarn是Facebook提供的替代npm的工具，可以加速node模块的下载。React Native的命令行工具用于执行创建、初始化、更新项目、运行打包服务（packager）等任务。

React Native目前需要Xcode 7.0 或更高版本。你可以通过App Store或是到Apple开发者官网上下载。这一步骤会同时安装Xcode IDE和Xcode的命令行工具。

虽然一般来说命令行工具都是默认安装了，但你最好还是启动Xcode，并在Xcode | Preferences | Locations菜单中检查一下是否装有某个版本的Command Line Tools。Xcode的命令行工具中也包含一些必须的工具，比如git等。

搭建typescript开发环境

先安装typescript

npm install -g typescript

接下来安装typings

typings是typescript的依赖管理器，如果你使用sublime text或者vscode，会非常方便的补全代码

npm install -g typings

使用react-native命令行工具初始化react-native项目

react-native init ReactNativeApp

等待片刻后，进入刚刚新建的项目，创建一个名为"tsconfig.json" 的文件。tsconfig.json是一个 typescript 项目的配置文件，可以通过读取它来设置 ts 编译器的编译参数

内容如下：

{"compilerOptions": {"target":"es6","allowJs":true,"jsx":"react","outDir":"./dist","sourceMap":true,"noImplicitAny":false},"include": ["typings/**/*.d.ts","src/**/*.ts","src/**/*.tsx"],"exclude": ["node_modules"]}

在项目下新建一个目录"src"，typescripe源代码就放在这里

现在安装typings依赖

typings install npm~react --save

typings install dt~react-native --globals --save

编写Hello world

在src目录下新建myview.tsx，内容如下

import*asReactfrom"react"import{ Text }from'react-native';/**

* Hello

*/exportdefaultclassHelloextendsReact.Component{    render() {return(            Hello world!

        );

    }

}

返回根目录，编译刚刚写好的tsx文件

tsc

修改index.ios.js

importReact, { Component }from'react';importHellofrom'./dist/myview';import{    AppRegistry,    StyleSheet,    Text,    View}from'react-native';exportdefaultclassReactNativeAppextendsComponent{    render() {return();    }}conststyles = StyleSheet.create({container: {flex:1,justifyContent:'center',alignItems:'center',backgroundColor:'#F5FCFF',    }});AppRegistry.registerComponent('ReactNativeApp', () => ReactNativeApp);

运行run-ios试试效果

react-native run-ios

运行效果：