背景
Expo SDK v31 から、標準でTypeScriptをサポートしているらしく、ホンマかいな、というエントリです。
ゴール
うるせえ動くもん見せろ
はい
github.com
以下、ログなので読まなくていいです。
簡単なアプリの作成
% expo --version
2.4.0
% expo init
? Choose a project name: MyTypeScriptRNApp
? Choose a template: blank
[17:33:56] Extracting project files...
[17:34:02] Customizing project...
Your project is ready at /Users/otiai10/proj/react-native/MyTypeScriptRNApp
To get started, you can type:
cd MyTypeScriptRNApp
expo start
% cd MyTypeScriptRNApp
% expo start
To run the app with live reloading, choose one of:
• Sign in as @otiai10 in Expo Client on Android or iOS. Your projects will automatically appear in the "Projects" tab.
• Scan the QR code above with the Expo app (Android) or the Camera app (iOS).
• Press a for Android emulator, or i for iOS simulator.
• Press e to send a link to your phone with email/SMS.
くっそ簡単やんけ。
以下、遊び心。
--- a/App.js
+++ b/App.js
@@ -5,7 +5,7 @@ export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
- <Text>Open up App.js to start working on your app!</Text>
+ <Text style={{fontSize: 120, fontFamily: "Courier"}}>Foo Bar Bla Bla</Text>
</View>
);
}
こんなすると、
こんななる。
TypeScriptにしていく
github.com
公式にサポートしているらしいので、いっちょ適当にやってみる。
% npm install --save-dev typescript
% ./node_modules/.bin/tsc --init
% mv App.js App.tsx
% expo start
めっちゃいけてるやんけ。
開発環境ととのえる
エディタに、 @types がもろもろ無いというお叱りを受けている。
このままではなんのためのTypeScriptやねん、という感じなので。
% npm install --save-dev \
@types/react \
@types/react-native \
@types/expo
jsxね。
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -6,7 +6,7 @@
// "lib": [], /* Specify library files to be included in the compilation. */
// "allowJs": true, /* Allow javascript files to be compiled. */
// "checkJs": true, /* Report errors in .js files. */
- // "jsx": "preserve", /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
+ "jsx": "react-native", /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
// "declaration": true, /* Generates corresponding '.d.ts' file. */
// "declarationMap": true, /* Generates a sourcemap for each corresponding '.d.ts' file. */
// "sourceMap": true, /* Generates corresponding '.map' file. */
TypeScriptっぽいことをしてみる。（返り値の型を定義しただけ）
--- a/App.tsx
+++ b/App.tsx
@@ -1,14 +1,26 @@
import React from 'react';
-import { StyleSheet, Text, View } from 'react-native';
+import {
+ StyleSheet, Text, View,
+ TouchableHighlight,
+} from 'react-native';
export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<Text style={{fontSize: 120, fontFamily: "Courier"}}>Foo Bar Bla Bla</Text>
+ <TouchableHighlight onPress={() => this._showTime()}>
+ <Text>What time is it now?</Text>
+ </TouchableHighlight>
</View>
);
}
+ _showTime() {
+ alert(this._getText());
+ }
+ _getText(): string {
+ return (new Date()).toLocaleString();
+ }
}
const styles = StyleSheet.create({
いいですね。
DRYな備忘録として
