Get typescript working

packages/react-scripts/config/loaders.js

@@ -0,0 +1,46 @@
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
+
+const tsLoader = {
+  test: /\.tsx?$/,
+  loader: 'ts-loader'
+};
+
+const jsonLoader = {
+  test: /\.json$/,
+  loader: 'json-loader',
+};
+
+const cssLoader = {
+  test: /\.css$/,
+  loaders: ['style-loader', 'css-loader'],
+};
+
+const cssExtractTextLoader = {
+  test: /\.css$/,
+  loader: ExtractTextPlugin.extract("style-loader", "css-loader"),
+};
+
+const tslintLoader = {
+  test: /\.tsx?$/,
+  loader: 'tslint',
+};
+
+const imagesLoader = {
+  test: /\.(jpe?g|png|gif)$/i,
+  loader: 'url?name=images/[hash].[ext]',
+};
+
+const inlineSvgLoader = {
+  test: /\.svg$/,
+  loader: 'svg-inline'
+};
+
+module.exports = {
+  tsLoader,
+  jsonLoader,
+  cssLoader,
+  cssExtractTextLoader,
+  tslintLoader,
+  imagesLoader,
+  inlineSvgLoader,
+}

packages/react-scripts/config/paths.js

@@ -45,7 +45,7 @@ module.exports = {
   appBuild: resolveApp('build'),
   appPublic: resolveApp('public'),
   appHtml: resolveApp('public/index.html'),
-  appIndexJs: resolveApp('src/index.js'),
+  appIndexJs: resolveApp('src/index.tsx'),
   appPackageJson: resolveApp('package.json'),
   appSrc: resolveApp('src'),
   yarnLockFile: resolveApp('yarn.lock'),
@@ -65,7 +65,7 @@ module.exports = {
   appBuild: resolveApp('build'),
   appPublic: resolveApp('public'),
   appHtml: resolveApp('public/index.html'),
-  appIndexJs: resolveApp('src/index.js'),
+  appIndexJs: resolveApp('src/index.tsx'),
   appPackageJson: resolveApp('package.json'),
   appSrc: resolveApp('src'),
   yarnLockFile: resolveApp('yarn.lock'),
@@ -82,7 +82,7 @@ if (__dirname.indexOf(path.join('packages', 'react-scripts', 'config')) !== -1)
     appBuild: resolveOwn('../../../build'),
     appPublic: resolveOwn('../template/public'),
     appHtml: resolveOwn('../template/public/index.html'),
-    appIndexJs: resolveOwn('../template/src/index.js'),
+    appIndexJs: resolveOwn('../template/src/index.tsx'),
     appPackageJson: resolveOwn('../package.json'),
     appSrc: resolveOwn('../template/src'),
     yarnLockFile: resolveOwn('../template/yarn.lock'),

packages/react-scripts/config/webpack.config.dev.js

@@ -32,6 +32,7 @@ var publicPath = '/';
 var publicUrl = '';
 // Get environment variables to inject into our app.
 var env = getClientEnvironment(publicUrl);
+console.log(paths)
 
 // This is the development configuration.
 // It is focused on developer experience and fast rebuilds.
@@ -86,7 +87,7 @@ module.exports = {
     // We also include JSX as a common component filename extension to support
     // some tools, although we do not recommend using it, see:
     // https://github.com/facebookincubator/create-react-app/issues/290
-    extensions: ['.js', '.json', '.jsx', ''],
+    extensions: ['.ts', '.tsx', '.js', '.json', '.jsx', ''],
     alias: {
       // Support React Native Web
       // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
@@ -96,21 +97,21 @@ module.exports = {
   // @remove-on-eject-begin
   // Resolve loaders (webpack plugins for CSS, images, transpilation) from the
   // directory of `react-scripts` itself rather than the project directory.
-  resolveLoader: {
-    root: paths.ownNodeModules,
-    moduleTemplates: ['*-loader']
-  },
+  // resolveLoader: {
+  //   root: paths.ownNodeModules,
+  //   moduleTemplates: ['*-loader']
+  // },
   // @remove-on-eject-end
   module: {
     // First, run the linter.
     // It's important to do this before Babel processes the JS.
-    preLoaders: [
-      {
-        test: /\.(js|jsx)$/,
-        loader: 'eslint',
-        include: paths.appSrc,
-      }
-    ],
+    // preLoaders: [
+    //   {
+    //     test: /\.(ts|tsx)$/,
+    //     loader: 'tslint',
+    //     include: paths.appSrc,
+    //   }
+    // ],
     loaders: [
       // Default loader: load all assets that are not handled
       // by other loaders with the url loader.
@@ -130,6 +131,7 @@ module.exports = {
         exclude: [
           /\.html$/,
           /\.(js|jsx)$/,
+          /\.(ts|tsx)$/,
           /\.css$/,
           /\.json$/,
           /\.svg$/
@@ -140,21 +142,11 @@ module.exports = {
           name: 'static/media/[name].[hash:8].[ext]'
         }
       },
-      // Process JS with Babel.
+      // Compile .tsx?
       {
-        test: /\.(js|jsx)$/,
+        test: /\.(ts|tsx)$/,
         include: paths.appSrc,
-        loader: 'babel',
-        query: {
-          // @remove-on-eject-begin
-          babelrc: false,
-          presets: [require.resolve('babel-preset-react-app')],
-          // @remove-on-eject-end
-          // This is a feature of `babel-loader` for webpack (not Babel itself).
-          // It enables caching results in ./node_modules/.cache/babel-loader/
-          // directory for faster rebuilds.
-          cacheDirectory: true
-        }
+        loader: 'ts',
       },
       // "postcss" loader applies autoprefixer to our CSS.
       // "css" loader resolves paths in CSS and adds assets as dependencies.
@@ -183,10 +175,10 @@ module.exports = {
   },
   // @remove-on-eject-begin
   // Point ESLint to our predefined config.
-  eslint: {
-    configFile: path.join(__dirname, '../.eslintrc'),
-    useEslintrc: false
-  },
+  // eslint: {
+  //   configFile: path.join(__dirname, '../.eslintrc'),
+  //   useEslintrc: false
+  // },
   // @remove-on-eject-end
   // We use PostCSS for autoprefixing only.
   postcss: function() {

packages/react-scripts/package.json

@@ -24,11 +24,6 @@
   },
   "dependencies": {
     "autoprefixer": "6.5.1",
-    "babel-core": "6.17.0",
-    "babel-eslint": "7.1.1",
-    "babel-jest": "17.0.2",
-    "babel-loader": "6.2.7",
-    "babel-preset-react-app": "^2.0.1",
     "case-sensitive-paths-webpack-plugin": "1.1.4",
     "chalk": "1.1.3",
     "connect-history-api-fallback": "1.3.0",
@@ -36,13 +31,6 @@
     "css-loader": "0.26.0",
     "detect-port": "1.0.1",
     "dotenv": "2.0.0",
-    "eslint": "3.8.1",
-    "eslint-config-react-app": "^0.5.0",
-    "eslint-loader": "1.6.0",
-    "eslint-plugin-flowtype": "2.21.0",
-    "eslint-plugin-import": "2.0.1",
-    "eslint-plugin-jsx-a11y": "2.2.3",
-    "eslint-plugin-react": "6.4.1",
     "extract-text-webpack-plugin": "1.0.1",
     "file-loader": "0.9.0",
     "filesize": "3.3.0",
@@ -60,6 +48,8 @@
     "recursive-readdir": "2.1.0",
     "strip-ansi": "3.0.1",
     "style-loader": "0.13.1",
+    "ts-loader": "^1.3.1",
+    "typescript": "^2.1.4",
     "url-loader": "0.5.7",
     "webpack": "1.14.0",
     "webpack-dev-server": "1.16.2",

packages/react-scripts/template/gitignore

@@ -13,3 +13,4 @@ build
 .DS_Store
 .env
 npm-debug.log
+typings

packages/react-scripts/template/src/App.test.tsx

@@ -1,5 +1,5 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
 import App from './App';
 
 it('renders without crashing', () => {

packages/react-scripts/template/src/App.tsx

@@ -1,13 +1,14 @@
-import React, { Component } from 'react';
-import logo from './logo.svg';
-import './App.css';
+import * as React from 'react';
+import * as Styles from './App.css';
 
-class App extends Component {
+const logo = require('./logo.svg');
+
+class App extends React.Component<null, null> {
   render() {
     return (
       <div className="App">
+        <img src={logo} />
         <div className="App-header">
-          <img src={logo} className="App-logo" alt="logo" />
           <h2>Welcome to React</h2>
         </div>
         <p className="App-intro">

packages/react-scripts/template/src/index.js

@@ -1,9 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import App from './App';
-import './index.css';
-
-ReactDOM.render(
-  <App />,
-  document.getElementById('root')
-);

packages/react-scripts/template/src/index.tsx

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import App from './App';
+import './index.css';
+
+ReactDOM.render(
+  <App />,
+  document.getElementById('root') as HTMLElement
+);

packages/react-scripts/template/tsconfig.json

@@ -0,0 +1,32 @@
+{
+  "compilerOptions": {
+    "outDir": "build/dist",
+    "module": "commonjs",
+    "target": "es5",
+    "lib": ["es6", "dom"],
+    "sourceMap": true,
+    "allowJs": true,
+    "jsx": "react",
+    "moduleResolution": "node",
+    "rootDir": "src",
+    "forceConsistentCasingInFileNames": true,
+    "noImplicitReturns": true,
+    "noImplicitThis": true,
+    "noImplicitAny": true,
+    "strictNullChecks": true,
+    "suppressImplicitAnyIndexErrors": true,
+    "noUnusedLocals": true
+  },
+  "exclude": [
+    "node_modules",
+    "build",
+    "scripts",
+    "acceptance-tests",
+    "webpack",
+    "jest"
+  ],
+  "types": [
+    "typePatches"
+  ]
+}

+

packages/react-scripts/template/tslint.json

@@ -0,0 +1 @@
+{}

packages/react-scripts/template/typings.json

@@ -0,0 +1,9 @@
+{
+  "dependencies": {},
+  "globalDependencies": {
+    "jest": "registry:dt/jest#16.0.0+20161025131017",
+    "node": "registry:dt/node#6.0.0+20161121110008",
+    "react": "registry:dt/react#0.14.0+20161203201537",
+    "react-dom": "registry:dt/react-dom#0.14.0+20160412154040"
+  }
+}