Typescript (#355)

Makefile

@@ -89,20 +89,21 @@ build: .prefix
 
 lint-js:
 	eslint frontend --ext .js,.jsx
-
+lint-ts:
+	tslint frontend/**/*.tsx frontend/**/*.ts
 lint-scss:
 	sass-lint --verbose
 
 lint-go:
 	go vet $(shell glide nv)
 
-lint: lint-go lint-js lint-scss
+lint: lint-go lint-js lint-scss lint-ts
 
 test-go:
 	go test -cover $(shell glide nv)
 
 test-js:
-	_mocha --compilers js:babel-core/register \
+	_mocha --compilers js:babel-core/register,tsx:typescript-require  \
 		--recursive 'frontend/**/*.tests.js*' \
 		--require ignore-styles \
 		--require 'frontend/.test.setup.js' \

frontend/components/buttons/Button/Button.tsx

@@ -1,26 +1,30 @@
-import React, { Component, PropTypes } from 'react';
-import classnames from 'classnames';
+import * as React from 'react';
+const classnames = require('classnames');
 
 const baseClass = 'button';
 
-class Button extends Component {
-  static propTypes = {
-    className: PropTypes.string,
-    disabled: PropTypes.bool,
-    onClick: PropTypes.func,
-    text: PropTypes.string,
-    type: PropTypes.string,
-    variant: PropTypes.string,
-  };
+interface IButtonProps {
+  className: string;
+  disabled: boolean;
+  onClick: (evt: React.MouseEvent<HTMLButtonElement>) => boolean;
+  text: string;
+  type: string;
+  variant: string;
+}
 
+interface IButtonState {}
+
+class Button extends React.Component<IButtonProps, IButtonState> {
   static defaultProps = {
     variant: 'default',
   };
 
-  handleClick = (evt) => {
+  handleClick = (evt: React.MouseEvent<HTMLButtonElement>) => {
     const { disabled, onClick } = this.props;
 
-    if (disabled) return false;
+    if (disabled) {
+      return false;
+    }
 
     if (onClick) {
       onClick(evt);

frontend/components/buttons/Button/index.js

@@ -1 +1 @@
-export default from './Button';
+export default from './Button.tsx';

package.json

@@ -6,10 +6,14 @@
   "private": "true",
   "sasslintConfig": ".sass-lint.yml",
   "scripts": {
-    "lint": "make lint-js && make lint-scss",
+    "lint": "make lint-js && make lint-scss && make lint-ts",
     "test": "make test-js"
   },
   "dependencies": {
+    "@types/classnames": "0.0.31",
+    "@types/expect": "^1.13.30",
+    "@types/mocha": "^2.2.32",
+    "@types/react": "^0.14.43",
     "autoprefixer": "6.3.7",
     "autoprefixer-loader": "^3.2.0",
     "babel-core": "6.11.4",
@@ -69,6 +73,8 @@
     "sqlite-parser": "^0.14.5",
     "style-loader": "^0.13.0",
     "stylus-loader": "1.5.1",
+    "tslint": "^3.15.1",
+    "typescript": "^2.1.0-dev.20161031",
     "url-loader": "^0.5.7",
     "webpack": "1.13.1",
     "webpack-dev-middleware": "^1.5.1",
@@ -91,6 +97,7 @@
     }
   },
   "devDependencies": {
+    "@types/node": "^6.0.46",
     "babel-eslint": "^6.1.2",
     "eslint": "3.6.0",
     "eslint-config-airbnb": "12.0.0",
@@ -100,6 +107,13 @@
     "ignore-styles": "^5.0.1",
     "mocha": "^3.0.2",
     "react-addons-test-utils": "^15.3.1",
-    "sass-lint": "^1.9.1"
+    "sass-lint": "^1.9.1",
+    "source-map-loader": "^0.1.5",
+    "ts-loader": "^0.9.5",
+    "ts-node": "^1.6.1",
+    "tslint-eslint-rules": "^2.1.0",
+    "tslint-react": "^1.1.0",
+    "typescript": "^2.1.0-dev.20161031",
+    "typescript-require": "^0.2.9-1"
   }
 }

tsconfig.json

@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "sourceMap": true,
+    "noImplicitAny": true,
+    "module": "commonjs",
+    "target": "es5",
+    "jsx": "react"
+  },
+  "include": [
+    "./frontend/**/*"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}

tslint.json

@@ -0,0 +1,8 @@
+{
+  "extends": ["tslint:recommended", "tslint-react" ],
+  "rules": {
+    "member-access": false,
+    "no-var-requires": false,
+    "quotemark": [true, "single", "avoid-escape"]
+  }
+}

webpack.config.js

@@ -41,6 +41,7 @@ var config  = {
       {test: /\.(png|gif)$/, loader: 'url-loader?name=[name]@[hash].[ext]&limit=6000'},
       {test: /\.(pdf|ico|jpg|svg|eot|otf|woff|ttf|mp4|webm)$/, loader: 'file-loader?name=[name]@[hash].[ext]'},
       {test: /\.json$/, loader: 'raw-loader'},
+      {test: /\.tsx?$/, exclude: /node_modules/, loader: 'ts-loader'},
       {
         test: /\.css$/,
         loader: ExtractTextPlugin.extract("style-loader", "css-loader!autoprefixer-loader")