typescript是javascript的超集官研，在javascript的基礎(chǔ)上添加了可選的靜態(tài)類型蓬痒，非常適合團隊開泻骤，這次我們嘗試使用typescript來開發(fā)react-native應(yīng)用。
搭建react-native開發(fā)環(huán)境
安裝yarn和react-native命令行工具
npm install -g yarn react-native-cli
Yarn是Facebook提供的替代npm的工具梧奢，可以加速node模塊的下載狱掂。React Native的命令行工具用于執(zhí)行創(chuàng)建、初始化亲轨、更新項目趋惨、運行打包服務(wù)（packager）等任務(wù)。
React Native目前需要Xcode 7.0 或更高版本瓶埋。你可以通過App Store或是到Apple開發(fā)者官網(wǎng)上下載希柿。這一步驟會同時安裝Xcode IDE和Xcode的命令行工具。
雖然一般來說命令行工具都是默認安裝了养筒，但你最好還是啟動Xcode曾撤，并在Xcode | Preferences | Locations菜單中檢查一下是否裝有某個版本的Command Line Tools。Xcode的命令行工具中也包含一些必須的工具晕粪，比如git等挤悉。
搭建typescript開發(fā)環(huán)境
先安裝typescript
npm install -g typescript
接下來安裝typings
typings是typescript的依賴管理器，如果你使用sublime text或者vscode巫湘，會非常方便的補全代碼
npm install -g typings
使用react-native命令行工具初始化react-native項目
react-native init ReactNativeApp
等待片刻后装悲，進入剛剛新建的項目，創(chuàng)建一個名為"tsconfig.json" 的文件尚氛。tsconfig.json是一個 typescript 項目的配置文件诀诊，可以通過讀取它來設(shè)置 ts 編譯器的編譯參數(shù)
內(nèi)容如下：
{"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源代碼就放在這里
現(xiàn)在安裝typings依賴
typings install npm~react --save
typings install dt~react-native --globals --save
編寫Hello world
在src目錄下新建myview.tsx阅嘶，內(nèi)容如下
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
運行效果：
