Discussion: TypeScript support

.gitignore

@@ -4,3 +4,4 @@ build
 *.tgz
 my-app*
 template/src/__tests__/__snapshots__/
+.awcache

config/jest/transform.js

@@ -10,5 +10,23 @@
 
 const babelDev = require('../babel.dev');
 const babelJest = require('babel-jest');
+const tsc = require('typescript');
+const babelTransformer = babelJest.createTransformer(babelDev);
 
-module.exports = babelJest.createTransformer(babelDev);
+// transpile the source with TypeScript, if needed, and then with Babel
+module.exports = {
+  process(src, path) {
+    if (path.endsWith('.ts') || path.endsWith('.tsx')) {
+      src = tsc.transpile(
+        src,
+        {
+          module: tsc.ModuleKind.CommonJS,
+          jsx: tsc.JsxEmit.React,
+        },
+        path,
+        []
+      );
+    }
+    return babelTransformer.process(src, path);
+  },
+};

config/typescript.dev.js

@@ -0,0 +1,26 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ */
+
+var path = require('path');
+var paths = require('./paths');
+
+// strip cacheDirectory since it's a babel-loader specific option 
+var babelOptions = Object.assign({}, require('./babel.dev'))
+delete babelOptions['cacheDirectory']
+
+module.exports = {
+  // uses the cache to improve dev performance
+  useCache: true,
+  // when TypeScript emits a file, pass it to Babel to provide backwards compatibility
+  useBabel: true,
+  // these are the options to use
+  babelOptions: babelOptions,
+  // tell the loader where the path is
+  babelCore: path.join(paths.appNodeModules, 'babel-core')
+};

config/typescript.prod.js

@@ -0,0 +1,20 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ */
+
+var path = require('path');
+var paths = require('./paths');
+
+module.exports = {
+  // when TypeScript emits a file, pass it to Babel to provide backwards compatibility
+  useBabel: true,
+  // these are the options to use
+  babelOptions: require('./babel.prod'),
+  // tell the loader where the path is
+  babelCore: path.join(paths.appNodeModules, 'babel-core')
+};

config/webpack.config.dev.js

@@ -77,7 +77,8 @@ 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', ''],
+    // We support also TypeScript ts and tsx which will be compiled later
+    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/
@@ -93,15 +94,27 @@ module.exports = {
   },
   module: {
     // First, run the linter.
-    // It's important to do this before Babel processes the JS.
+    // It's important to do this before Babel or TypeScript processes the JS/TS.
     preLoaders: [
       {
         test: /\.(js|jsx)$/,
         loader: 'eslint',
         include: paths.appSrc,
+      },
+      {
+        test: /\.tsx?$/,
+        loader: 'tslint',
+        include: paths.appSrc
       }
     ],
     loaders: [
+      // Process TS with TypeScript and then with Babel
+      {
+        test: /\.tsx?$/,
+        include: paths.appSrc,
+        loader: 'awesome-typescript',
+        query: require('./typescript.dev')
+      },
       // Process JS with Babel.
       {
         test: /\.(js|jsx)$/,

config/webpack.config.prod.js

@@ -72,7 +72,8 @@ 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', ''],
+    // We support also TypeScript ts and tsx which will be compiled later
+    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/
@@ -88,15 +89,27 @@ module.exports = {
   },
   module: {
     // First, run the linter.
-    // It's important to do this before Babel processes the JS.
+    // It's important to do this before Babel or TypeScript processes the JS/TS.
     preLoaders: [
       {
         test: /\.(js|jsx)$/,
         loader: 'eslint',
         include: paths.appSrc
+      },
+      {
+        test: /\.tsx?$/,
+        loader: 'tslint',
+        include: paths.appSrc
       }
     ],
     loaders: [
+      // Process TS with TypeScript and then with Babel
+      {
+        test: /\.tsx?$/,
+        include: paths.appSrc,
+        loader: 'awesome-typescript',
+        query: require('./typescript.prod')
+      },
       // Process JS with Babel.
       {
         test: /\.(js|jsx)$/,

package.json

@@ -29,6 +29,7 @@
   },
   "dependencies": {
     "autoprefixer": "6.4.0",
+    "awesome-typescript-loader": "^2.2.1",
     "babel-core": "6.14.0",
     "babel-eslint": "6.1.2",
     "babel-jest": "15.0.0",
@@ -72,6 +73,9 @@
     "rimraf": "2.5.4",
     "strip-ansi": "3.0.1",
     "style-loader": "0.13.1",
+    "tslint": "^3.15.1",
+    "tslint-loader": "^2.1.5",
+    "typescript": "^2.0.0",
     "url-loader": "0.5.7",
     "webpack": "1.13.2",
     "webpack-dev-server": "1.15.1",

scripts/eject.js

@@ -37,6 +37,8 @@ prompt(
     path.join('config', 'paths.js'),
     path.join('config', 'env.js'),
     path.join('config', 'polyfills.js'),
+    path.join('config', 'typescript.dev.js'),
+    path.join('config', 'typescript.prod.js'),
     path.join('config', 'webpack.config.dev.js'),
     path.join('config', 'webpack.config.prod.js'),
     path.join('config', 'jest', 'CSSStub.js'),

scripts/utils/createJestConfig.js

@@ -19,7 +19,9 @@ module.exports = (resolve, rootDir) => {
   }
 
   const config = {
-    moduleFileExtensions: ['jsx', 'js', 'json'],
+    // allow Jest to load TypeScript modules
+    moduleFileExtensions: ['jsx', 'js', 'json', 'ts', 'tsx'],
+    automock: false,
     moduleNameMapper: {
       '^[./a-zA-Z0-9$_-]+\\.(jpg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm)$': resolve('config/jest/FileStub.js'),
       '^[./a-zA-Z0-9$_-]+\\.css$': resolve('config/jest/CSSStub.js')

template/src/App.js

@@ -1,4 +1,5 @@
 import React, { Component } from 'react';
+import {HelloTypeScript} from './HelloTypeScript'
 import logo from './logo.svg';
 import './App.css';
 
@@ -13,6 +14,7 @@ class App extends Component {
         <p className="App-intro">
           To get started, edit <code>src/App.js</code> and save to reload.
         </p>
+        <HelloTypeScript />
       </div>
     );
   }

template/src/HelloTypeScript.tsx

@@ -0,0 +1,8 @@
+import * as React from "react";
+const {Component} = React;
+
+export class HelloTypeScript extends Component<any, any> {
+    render() {
+        return <p>If you'd like to, you can also use TypeScript!</p>;
+    }
+}

template/tsconfig.json

@@ -0,0 +1,12 @@
+{
+    "compilerOptions": {
+        "target": "es2015",
+        "jsx": "react"
+    },
+    "include": [
+        "src"
+    ],
+    "files": [
+        "./typings/index.d.ts"
+    ]
+}

template/typings.json

@@ -0,0 +1,7 @@
+{
+  "name": "create-react-app",
+  "dependencies": {
+    "react": "registry:npm/react#15.0.1+20160601175240",
+    "react-dom": "registry:npm/react-dom#15.0.1+20160826174104"
+  }
+}

template/typings/index.d.ts

@@ -0,0 +1,2 @@
+/// <reference path="modules/react-dom/index.d.ts" />
+/// <reference path="modules/react/index.d.ts" />