setup typescript better

index.android.js

@@ -1,53 +1,14 @@
-/**
+import React from 'react';
- * Sample React Native App
+import { AppRegistry } from 'react-native';
- * https://github.com/facebook/react-native
- * @flow
- */
 
-import React, { Component } from 'react';
+import App from './dist/index';
-import {
-  AppRegistry,
-  StyleSheet,
-  Text,
-  View
-} from 'react-native';
 
-class zxcvbn extends Component {
+class MainApp extends React.Component {
   render() {
     return (
-      <View style={styles.container}>
+      <App />
-        <Text style={styles.welcome}>
-          Welcome to React Native!
-        </Text>
-        <Text style={styles.instructions}>
-          To get started, edit index.android.js
-        </Text>
-        <Text style={styles.instructions}>
-          Double tap R on your keyboard to reload,{'\n'}
-          Shake or press menu button for dev menu
-        </Text>
-      </View>
     );
   }
 }
 
-const styles = StyleSheet.create({
+AppRegistry.registerComponent('zxcvbn', () => MainApp);
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    backgroundColor: '#F5FCFF',
-  },
-  welcome: {
-    fontSize: 20,
-    textAlign: 'center',
-    margin: 10,
-  },
-  instructions: {
-    textAlign: 'center',
-    color: '#333333',
-    marginBottom: 5,
-  },
-});
-
-AppRegistry.registerComponent('zxcvbn', () => zxcvbn);

index.ios.js

@@ -1,53 +1,14 @@
-/**
+import React from 'react';
- * Sample React Native App
+import { AppRegistry } from 'react-native';
- * https://github.com/facebook/react-native
- * @flow
- */
 
-import React, { Component } from 'react';
+import App from './dist/index';
-import {
-  AppRegistry,
-  StyleSheet,
-  Text,
-  View
-} from 'react-native';
 
-class zxcvbn extends Component {
+class MainApp extends React.Component {
   render() {
     return (
-      <View style={styles.container}>
+      <App />
-        <Text style={styles.welcome}>
-          Welcome to React Native!
-        </Text>
-        <Text style={styles.instructions}>
-          To get started, edit index.ios.js
-        </Text>
-        <Text style={styles.instructions}>
-          Press Cmd+R to reload,{'\n'}
-          Cmd+D or shake for dev menu
-        </Text>
-      </View>
     );
   }
 }
 
-const styles = StyleSheet.create({
+AppRegistry.registerComponent('zxcvbn', () => MainApp);
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    backgroundColor: '#F5FCFF',
-  },
-  welcome: {
-    fontSize: 20,
-    textAlign: 'center',
-    margin: 10,
-  },
-  instructions: {
-    textAlign: 'center',
-    color: '#333333',
-    marginBottom: 5,
-  },
-});
-
-AppRegistry.registerComponent('zxcvbn', () => zxcvbn);

package.json

@@ -4,15 +4,18 @@
   "private": true,
   "scripts": {
     "start": "node node_modules/react-native/local-cli/cli.js start",
-    "build": "tsc"
+    "build": "rm -rf build && tsc"
   },
   "dependencies": {
     "immutable": "=3.8.1",
     "react": "=15.3.1",
     "react-native": "=0.33.0",
     "react-native-progress-bar": "=0.1.2",
-    "typescript": "^1.8.10",
+    "typescript": "=1.8.10",
     "underscore": "=1.8.3",
     "zxcvbn": "=4.3.0"
+  },
+  "devDependencies": {
+    "tslint": "^3.15.1"
   }
 }

src/index.tsx

@@ -0,0 +1,43 @@
+// src/index.ts
+
+import React, { Component } from 'react';
+import {
+    StyleSheet,
+    Text,
+    View
+} from 'react-native';
+
+interface Props {
+
+}
+
+interface State {
+
+}
+
+export default class App extends Component<Props, State> {
+    render() {
+        return (
+            <View style={styles.container}>
+                <Text style={styles.text}>
+                    Welcome to React Native!
+                </Text>
+            </View>
+        );
+    }
+}
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+        backgroundColor: '#F5FCFF',
+    } as React.ViewStyle,
+
+    text: {
+        fontSize: 20,
+        textAlign: 'center',
+        margin: 10,
+    } as React.TextStyle,
+});

tsconfig.json

@@ -1,19 +1,27 @@
 {
-  "compilerOptions": {
+    "compilerOptions": {
-      "target": "es6",
+        "target": "es2015",
-      "allowJs": true,
+        "module": "es2015",
-      "jsx": "react",
+        "jsx": "react",
-      "outDir": "dist",
+        "outDir": "dist",
-      "rootDir": "src",
+        "rootDir": "src",
-      "sourceMap": true,
+        "allowSyntheticDefaultImports": true,
-      "noImplicitAny": false
+        "noImplicitAny": true,
-  },
+        "experimentalDecorators": true,
-  "filesGlob": [
+        "preserveConstEnums": true,
-      "typings/**/*.d.ts",
+        "allowJs": true,
-      "src/**/*.ts",
+        "sourceMap": true
-      "src/**/*.tsx"
+    },
-  ],
+    "filesGlob": [
-  "exclude": [
+        "typings/index.d.ts",
-      "node_modules"
+        "src/**/*.ts",
-  ]
+        "src/**/*.tsx"
+    ],
+    "exclude": [
+        "index.android.js",
+        "index.ios.js",
+        "dist",
+        "node_modules"
+    ],
+    "compileOnSave": false
 }

typings.json

@@ -4,6 +4,7 @@
     "immutable": "registry:npm/immutable#3.7.6+20160411060006"
   },
   "globalDependencies": {
+    "react": "registry:dt/react#0.14.0+20160829191040",
     "react-native": "registry:dt/react-native#0.29.0+20160830141535"
   }
 }