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
运行效果：
网友评论