2016/01/11追記:以下の記事を参照してください blog.okazuki.jp
はじめに
react-nativeがWindowsでも動いた(Androidだけ)ので、試しにTypeScriptで書いてみたいとおもいます。
プロジェクトの作成
以下のコマンドを打ち込んでプロジェクトのひな型を作成します。
react-native init ReactNativeTypeScript
Visual Studioで開く
とりあえずVisual Studioで編集したいですよね?ということで、Visual Studioで開きます。 まず、From Existing Node.js codeでプロジェクトを作ります。 プロジェクト名はReactNativeTypeScriptで。
ウィザードが立ち上がるので、ReactNativeTypeScriptフォルダを選択してNextを押します。
プロジェクトの場所をReactNativeTypeScriptフォルダに設定してFinishを押します。
androidフォルダやiOSフォルダ以下をいったんプロじぇくtおから除外して再度プロジェクトに含めます。(必要なファイルが取り込まれてないので)
TypeScriptの設定を出すために、適当にTypeScriptのファイルを作って削除します。 プロジェクトのプロパティからTypeScriptビルドを選んでTSXファイルでのJSXコンパイルを応答に変更して保存します。
型定義ファイル
tsd install react-native
と打ち込んで型定義ファイルを取り込みます。プロジェクトにも含めておきます。そのままだと型定義間違ってるっぽいので、最後のほうを以下の内容から
declare module "react-native" { import ReactNative = __React export default ReactNative } declare var global: __React.GlobalStatic declare function require( name: string ): any //TODO: BGR: this is a left-over from the initial port. Not sure it makes any sense declare module "Dimensions" { import React from 'react-native'; interface Dimensions { get( what: string ): React.ScaledSize; } var ExportDimensions: Dimensions; export = ExportDimensions; }
以下の内容に書き換えます
declare module "react-native" { import ReactNative = __React export = ReactNative } declare var global: __React.GlobalStatic declare function require( name: string ): any //TODO: BGR: this is a left-over from the initial port. Not sure it makes any sense declare module "Dimensions" { import * as React from 'react-native'; interface Dimensions { get( what: string ): React.ScaledSize; } var ExportDimensions: Dimensions; export = ExportDimensions; }
tsxファイルの作成
index.android.tsxという名前でTypeScriptファイルを作成します。 なぜかBuild ActionがContentに設定されるのでTypeScriptCompileに変更しておきます。もともとあるindex.android.jsは削除しておきます。
そして、コードを以下のように記述します。元あったファイルをTypeScript JSXに焼き直した感じです。
import * as React from 'react-native'; var {AppRegistry, StyleSheet, View, Text} = React; var styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF' }, welcome: { fontSize: 20, textAlign: 'center', margin: 10, }, instructions: { textAlign: 'center', color: '#333333', marginBottom: 5, }, }); class HelloReactNative extends React.Component<{}, {}> { render() { return ( <View style={styles.container}> <Text style={styles.welcome}>ようこそReact Nativeへ!</Text> <Text style={styles.instructions}>index.android.tsxを編集して始めよう</Text> <Text style={styles.instructions}>ふがふが~~~</Text> </View> ); } } AppRegistry.registerComponent('ReactNativeTypeScript', () => HelloReactNative);
実行して動作確認
まず、開発サーバーを起動します。
react-native start
Visual Studio Emulator for Androidを立ち上げて以下のコマンドを実行します。
react-native run-android
実行すると、こんな感じの画面が出てきます。TypeScriptでも行けますね。